13 de mayo de 2010

20 diseños de webs de comercio electrónico


Cuando nos ponemos a diseñar una web para una empresa que desea vender sus productos en internet, lo primero que pensamos la mayoría es que debe ser muy intuitiva y fácil para los usuarios y en algunas ocasiones olvidamos que además de la usabilidad, debemos hacerla también bonita y llamativa…agradable a la vista de los clientes.

En Under World Magazines han hecho una buena recopilación de 20 tiendas con carrito de compra pero que a la vez tienen unos geniales diseños.

Quizá te sirva de inspiración pasarte por el link de la fuente y visitarlas detenidamente para ver los buenos trabajos que se pueden hacer en las webs de comercio electrónico.

Algunas son de marcas muy conocidas como Timberland, Sony, UniQlo o Lee, las demás son de empresas menos conocidas, pero también vale la pena pasarse a ver los buenos trabajos que han hecho los diseñadores y programadores en ellas.

Fuente: 20 webs ce comercio electrónico con diseño creativo

30 posters tipográficos para inspirarte


La tipografía, tipos de letra o fuentes tipográficas (como quieras llamarlo) no solo sirven para escribir textos, eso lo sabemos muy bien los diseñadores, pero es en los últimos años desde cuando parece haberse puesto de moda esto de “diseñar con palabras”

En Design Dazzling, han hecho una genial recopilación de 30 posters tipográficos, es decir, 30 posters donde los elementos protagonistas son letras y con ellas se transmite todo o la mayoría del mensaje que se pretende hacer llegar a la persona que lo vea.

Os recomiendo que os paséis por el link de la fuente para ver estos 30 posters ya que a mi me han parecido bastante buenos y seguramente viéndolos consigáis la inspiración necesaria para hacer bonitos diseños con letras.

Fuente: 30 posters tipográficos

Adobe CS5 descarga la versión de prueba gratis en inglés, ahora sí !!


Hace unas semanas os anunciábamos que a finales del mes de Abril ya se podría descargar la versión de prueba de la nueva suite de Adobe para diseño, la Adobe Creative Suite CS5.

Pues bien, ya está disponible la versión en inglés para poder descargarla y ver algunas de las mejoras de esta nueva versión.

Según supimos también hace unas semanas, la versión de prueba en español estará disponible para descargar a mediados de Mayo.

Para descargarla tenéis que pulsar en el botón amarillo donde pone “TRY” y allí podréis elegir entre descargar la versión “Design Premiun” o la “Master Collection”

Para descargarlo tienes que ser usuario registrado de Adobe, pero no te preocupes es gratuito y no lleva más de 2 minutos registrarse.

Descarga Versión de prueba de Adobe Creative Suite CS5 en inglés

Enlaces directos de descarga:

50 tutoriales de After Effects


No recuerdo que hayamos hablado mucho por aquí de la edición de vídeo, pero de vez en cuando no viene mal recordar algo, máxime cuando estamos a unos días de que salga Adobe After Effects CS5 en español:

Adobe After Effects® (AE) es una aplicación en forma de estudio destinado para la creación o aplicación en una composición (realización de gráficos profesionales en movimiento) de efectos especiales y grafismo de video, que desde sus raíces han consistido básicamente en la superposición de imágenes. Adobe After Effects es uno los softwares más potentes del mercado junto con Autodesk Combustion y Fusion.

Una de las principales fortalezas del programa es que existen una gran cantidad de plugins desarrollados por otras compañías que ayudan a aligerar las cargas de trabajo continuo y repetitivo en lo que a aplicación de efectos se refiere, en las nuevas versiones tales como 6.5 o la 7 su habilidad para manejar archivos de gráficos y video de distintos formatos y el hecho de que su interfaz le es muy familiar a muchos editores dedicados a la postproducción se convierte en una razón muy poderosa para utilizarlo.

Tras el salto os dejo 50 tutoriales en inglés para los que quieran empezar a hacer sus pinitos en After Effects, o para los que busquen perfeccionar su técnica.

Fuente: HongKiat

20 sets de iconos para diseño de aplicaciones


Los packs de iconos que ponemos aquí normalmente están más orientados al diseño web normal y corriente, pero también podemos dedicarnos a diseñar aplicaciones para algún sistema operativo o aplicaciones web, y en ese caso los packs que os traigo hoy sí que son verdaderamente interesantes.

Son veinte sets que nos traen iconos en distintos tamaños de todo tipo de temáticas: muchos de redes sociales, controles de música y vídeo, iconos de aplicaciones y un largo etcétera que puedes descubrir viéndolos tras el salto.

Fuente: WebDesignLedger

Animaciones 3D usando CSS3


MarcoFolio sigue haciendo de las suyas con HTML5 y CSS3, algo en lo que es un maldito Masterclass y en lo que realmente se puede decir que poca gente llega al nivel de sus creaciones, las cuales encima hace por diversión.

Lo último que nos ha enseñado es a crear animaciones 3D sin tocar Javascript o jQuery, sino utilizando las propiedades que nos brinda el estándar HTML5+CSS3. En definitiva es una muestra más del gran potencial que tiene todo esto, para ver si de una vez por todas se le da un impulso en condiciones por parte de la industria web.

Investigad y probar cosas, ya que es el camino a la comprensión de las nuevas tecnologías…

Enlace: MarcoFolio

50 ejemplos de elementos hechos a mano en diseño web


El ‘hand drawing’ o hacer elementos a mano (simulados) está cada vez más de moda en el diseño web, ya que aporta un toque realmente bonito e inusual a un diseño, por lo que se están empezando a usar muchísimo en portfolios, webs de moda y alguna que otra web corporativa.

A mí me parece un elemento arriesgado para un diseño, me explico: si es algo en lo que la originalidad prima sobre el contenido me parece bien usarlo, pero creo que puede atraer demasiada atención el poner algo así en una web sobre el contenido, y eso puede ser perjudicial si lo que buscamos es que la persona que entre en nuestra web también vea el contenido.

Ahí ya es cuestión de evaluar los riesgos y las ventajas de hacer algo así, pero eso depende de tí…

Fuente: WebDesignLedger

20 fuentes más para completar tu colección


Es bastante posible que ya tengas muchas fuentes en tu ordenador y que creas que son suficientes, pero nunca está de más prestar atención a nuevas tipografías que no conocíamos y que pueden ampliar de forma considerable nuestra colección.

Las veinte que quedan tras el salto son de verdadera calidad, aunque no son precisamente indicadas para diseños donde premie la seriedad, por lo que se presumen ideales para proyectos más informales y tendiendo al buenrollismo con un toque retro.

Fuente: WebDesignLedger

Más de 200 pinceles para efectos luminosos


Ya os advertí hace tiempo que hay que tener cuidado con los pinceles, ya que son un arma de doble filo: tenerlos en nuestro Photoshop está genial al tener más recursos pero a la vez pueden hacer que nos vaya muy lento el programa, algo que no sería productivo.

Es por ello que sois vosotros los que debéis elegir cuidadosamente el material que instaláis y el que no, todo visto desde la perspectiva de que nosotros os damos un poco de todo y luego vosotros lo probáis con calma.

Quedan tras el salto, faltaría más…

Fuente Designm.ag

40 fotografías increíblemente manipuladas


Llevo unas cuantas semanas posteando fotografías manipuladas y parece que están gustando bastante por las reacciones que se pueden ver en nuestra página de Facebook (gracias a todos por seguirnos), por lo que aquí va más material.

Si las otras veces las fotos fueron espectaculares en esta ocasión ya son de apaga y vámonos, realmente brutales la mayoría de ellas y obviamente hechas por auténticos maestros del Photoshop, gente que tiene una imaginación y talento brutal.

Fuente WebDesignLedger

Lo nuevo de Adobe: OSMF


Open Source Media Framework (OSMF) es lo último que ha sacado Adobe a la luz en lo que a ayudas para el desarrollo web se trata, y la verdad es que puede ser algo que le venga bastante bien a más de uno.

OSMF no es otra cosa que un reproductor Flash de vídeo muy vitaminado, con posibilidad para soportar plugins y una futura API que permitirá acceder a todo el Core del Framework, algo que no será viable hasta que la versión 1.0 salga a la luz.

De momento se encuentra en fase previa a la salida oficial, la cual será en Mayo sin especificar el día.

Fuente WebResourcesDepot

Recopilación de efectos de texto


Los efectos en el texto están cada vez más de moda y con razón, ya que son una forma bastante llamativa de realizar diseños que llaman la atención con mucho menos trabajo del que lleva realizar otro tipo de diseño y encima puedes escribir un mensaje, algo que dota de fuerza al trabajo que hagamos.

Tras el salto quedan bastantes modificaciones que nos pueden enseñar el camino para alguna que tengáis pensada hacer desde hace un tiempo, y es que practicar siempre debe estar presente durante un rato en vuestro horario como diseñadores.

Yo me quedo con la que he puesto para encabezar la entrada, aunque apuesto a que cada uno tendrá su modificación favorita...

Fuente Designm.ag

55 diseños web en azul para mejorar tu inspiración


El azul es uno de los colores más infravalorados del diseño web y un color sobre el que vamos a aprender un poquito más hoy:

El color azul es una de las seis sensaciones cromáticas básicas de la visión humana normal. Su opuesto es el naranja en las artes plásticas y es complementario al amarillo en la luz, ya que para formar amarillo se necesita mezclar rojo y verde al 100% de intensidad, y nada de azul. La luz azul tiene una longitud de onda de alrededor de 470-450 nm.

Como podéis observar se trata de un absolutamente básico, por lo que tampoco se escapa a las múltiples curiosidades que persiguen a los colores:

  • En la tradición antigua este color es el color de la pureza y la virginidad. Por ello, a la Virgen María se la representa tocada con un manto azul.

  • El azul es asociado con la inteligencia y el conocimiento en ciertos aspectos. Así mismo, la Filosofía es representada con este color.

  • El azul se suele asociar con el frío, en contraposición con el rojo que se asocia con el calor.

  • El azul (kallfü) para el pueblo mapuche tiene relación con el mundo espiritual y lo sagrado con sus ancestros

  • En los países anglosajones se asocia al azul con la tristeza y la melancolía. De ahí proviene el nombre de la música blues.

Tras el salto os dejo los 55 sitios web en azul que os servirán de inspiración para vuestros trabajos, o eso espero.

Fuente: WebDesignLedger

20 fuentes con serifa de calidad


Aprender es algo que no debe pasar jamás de moda, así que hoy es turno para la serifa en las fuentes:

Las gracias, serifas, remates o terminales son pequeños adornos ubicados generalmente en los extremos de las líneas de los caracteres tipográficos. También son conocidas por el término inglés como serif. Las tipografías Times, Georgia, Garamond y Courier son ejemplos de estilos de letra con esta clase de remate.

La industria de la impresión se refiere a las tipografías sin serifas como sans-serif (del Francés sans: “sin”), o como grotesque (o, en alemán, grotesk), en todo caso estos términos no son comúnmente utilizados salvo en la jerga tipográfica.

Supongo que muchos ya lo sabíais, pero nunca está de más aprender que es una serifa y porqué se aplica en las fuentes de carácter más serio. Tras el salto quedan 20 fuentes con serifa listas para mejorar vuestros diseños.

Fuente: ourTuts

Otro interesante slider para jQuery: Coin Slider


Al final va a resultar totalmente cierto que estamos rodeados de sliders de jQuery, ya que cada día salen novedades de este tipo de añadidos para la famosa librería de Javascript que tanto se está usando en el desarrollo web de hoy día.

Quizás dónde más destaca Coin Slider es en el aspecto visual y en las transiciones entre las distintas imágenes, ya que aplica unos efectos propios realmente bonitos y que yo al menos no había visto en ningún otro plugin de este tipo.

Es compatible con la mayoría de navegadores
, Internet Explorer 6 incluído.

Fuente
WebResourcesDepot

10 reglas para perder a un cliente


Si eres diseñador freelance o te estás planteando dejar la empresa para la que trabajas y empezar a trabajar por tu cuenta, este post te interesará mucho.

Lo principal para poder dedicarte a diseñar por tu cuenta, es tener una cartera de clientes a los que poder ofrecer tu trabajo y con los que sacarte un sueldo “decente” para poder subsistir.

El trato con los clientes, todos sabemos que es difícil muchas veces, unas porque ellos no saben explicarnos bien lo que quieren y otras porque no entienden lo que nosotros queremos decirles, pero, si quieres que tu negocio prospere, debes intentar conservarlos y tenerlos contentos para que vuelvan a contratar tus servicios de diseño.

En el post de la fuente, os dejo 10 formas o 10 claves para perder a un cliente…es decir, 10 actitudes y formas de trabajo que puede que nos seas perjudiciales a la hora de conservar a los clientes y tenerlos contentos y también algunos malos hábitos que nos hacen menos productivos.

Leedlas atentamente y curaros en salud! ;-)

Fuente: 10 reglas para perder a un cliente

Elementos piratas en vectores


A raíz de una consulta por correo es que me dije: “como puede ser que no haya nada en el blog sobre piratas?”. En verdad es un tema que siempre viene bien tener recursos y que a todos atrapa por igual.

Ya sea para diseños infantiles o de solteros (todos hemos sido piratas alguna vez), esta es una colección de cinco archivos EPS con muchos elementos piratas y de variados estilos.

Descarga:
Elementos Piratas

Llamativo efecto de texto en Photoshop


Hay efectos de texto que dada su simpleza y resultado final merecen la pena ser difundidos. Este es el caso del efecto “Wooden Type” que creó la gente de Wegraphics.

En este tutorial se puede ver como con algunos estilos de capa y fusiones lograremos crear un llamativo texto de madera con tornillos en sus uniones.

Enlace: Create a Funny Wooden Type Treatment in Photoshop

55 diseños web en azul para inspirarte

Decidir el color principal de nuestra web o blog es una tarea complicada ya que tenemos que tener en cuenta nuestros gustos, porque escribir en un blog que no nos gusta se hará un trabajo complicado y tediosos, también tenemos que tener en cuenta la temática o temáticas que vamos a tratar y sobre todo, hay que tener cuidado con la estética, que el color de fondo convine con el resto de colores que vamos a utilizar.

Bien, para que os podáis inspirar, si vuestra decisión es el color azul, os traigo 55 diseños de webs y blogs donde el color azul el el principal. En estos ejemplos podéis ver cómo han distribuido los distintos elementos, qué otros colores han usado y así podréis decidir los últimos detalles de vuestra web azul.

Fuente: 55 diseños web en azul para inspirarse

15 packs de iconos sobre formas de pago para webs con carros de compra


Cada día son más personas las que emprenden negocios en internet, ya sea con una gran plataforma o simplemente ofreciendo sus productos a un público más reducido.

Sea como sea seguro que si tienes una página web con un carrito de compra estos 15 packs de iconos gratuitos te resultarán interesantes.

Si pretendes vender tus productos en tu web con carrito de compra, debes señalizar muy bien las formas de pago que admites y donde se debe clicar o entrar para pagar con los diferentes métodos que ofrezcas. Estos iconos te serán de utilidad para hacer esa señalización de forma visual para que tus clientes las encuentren más fácilmente.

Fuente: 15 packs de iconos sobre formas de pago para webs con carros de compra

35 packs de vectores


Seguimos dándole caña a los vectores, y es que ya os dije que no nos podemos olvidar de algo tan importante como esto, y ya puestos vamos a aprender un poco sobre la definición técnica de los vectores:

Una imagen vectorial es una imagen digital formada por objetos geométricos independientes (segmentos, polígonos, arcos, etc.), cada uno de ellos definido por distintos atributos matemáticos de forma, de posición, de color, etc. Por ejemplo un círculo de color rojo quedaría definido por la posición de su centro, su radio, el grosor de línea y su color.

Hablando de forma sencilla, ¿qué demonios significa esto? Significa que el trazado no se distorsiona jamás trabajemos en la resolución que trabajemos, y por eso los vectores son básicos en el diseño de hoy día.

Tras el salto quedan los packs, cortesía de Designm.ag

Recopilación de oficinas curiosas


Pocas veces os he hablado de esto, pero el lugar dónde trabajas es básico. Una buena ambientación, la decoración correcta, un orden apropiado en los alrededores y la sensación de armonía son algo clave para poder ser creativos.

Tras el salto os dejo unas cuantas oficinas realmente increíbles, aunque hay que reconocer que no son para nada típicas y que de hecho son más de cara a la galería que unas oficinas al uso, pero existir… existen.

Por cierto, la que encabeza esta entrada está en… Madrid.

Fuente: HongKiat

25 logotipos basados en su tipografía


Parece que últimamente están gustando bastante las recopilaciones de logotipos que estamos posteando por aquí, y si algo os mola vamos a seguir poniendo recursos que nos mejoren la inspiración y nos permitan ser más creativos.

Tras el salto quedan 25 logotipos que si se distinguen del resto por algo es porque están basados en su tipografía, ya que marca las directrices del logo y le da un aspecto realmente especial, quitándole la necesidad de basarse en algún objeto o diseño extra.

Por cierto, igualmente son inventados y no son de empresas reales, avisados quedáis. Están tras el salto.

Fuente:
Designm.ag

11 de mayo de 2010

Más de 250 pinceles de líneas para Photoshop


Se que muchos pensaréis que 250 pinceles no son necesarios si las líneas se pueden hacer en Photoshop a mano, y la razón no os la quito… pero con un buen set de pinceles tardas diez veces menos que haciéndolas a mano y puede que el resultado sea incluso hasta mejor.

Tras el salto quedan unos cuantos packs que contienen este tipo de pinceles, algunos realmente interesantes para tener bien guardaditos en nuestra nevera personal del diseño, y es que nunca sabes cuando vas a tener que echar mano de un buen set de pinceles para completar un diseño.

Fuente:
Designm.ag

Plantillas gratis en PSD


Este es un sitio que promete buen material en lo que se refiere a diseños para sitios web. Free PSD Theme es un sitio relativamente nuevo en donde ofrecen gratuitamente la descarga de diseños de sitios web en formato PSD.

La variedad de diseños es amplia y y de buena calidad y, si no nos conformamos solo con el PSD, podemos encontrar a la venta el diseño listo para aplicarlo a Wordpress o simplemente el HTML/CSS.

Enlace: Free PSD Theme
Vía: Creattica

80 tutoriales de efectos de texto para photoshop


De momento los que esperamos con ganas la salida de la suite CS5 de Adobe nos tenemos que seguir aguantando porque hasta mediados de Mayo parece que no saldrán las versiones finales a la luz para su prueba y compra, pero no por ello vamos a dejar de lado la versión actual que tengamos de Photoshop.

En mi caso estos tutoriales me vienen de lujo para practicar un poco y alimentar mi Photoshop CS4, y es que la mayoría están bastante trabajados (aunque en inglés) y nos enseñarán a crear bonitos efectos de texto con menos de lo que imaginas.

Fuente: HongKiat

50 fondos de Twitter para inspirarnos y decidirnos a cambiar el nuestro


Twitter es el servicio de microbloging más utilizado en el mundo actualmente. Ahora mismo más de 100 millones de personas son usuarias de Twitter y 300.000 nuevos usuario se registran diariamente.

Por eso, si tú eres usuari@ de Twitter y quieres que tu perfil destaque y llame la atención para conseguir más seguidores o simplemente estas cansad@ de los fondos que lleva por defecto y quieres diseñar el tuyo propio para hacer la página más personal, te gustará ver lo que te traigo.

El blog ST Webdesigner ha hecho una genial recopilación de 50 fondos de Twitter para que te puedas inspirar si te decides a diseñar el tuyo propio.

Yo cambié el mío hace tiempo, podéis verlo en @gemaberrio, pero estoy pensando en cambiarlo y ya he visto unos cuantos ejemplos de esa lista de 50 fondos para Twitter que seguramente me servirán de inspiración para diseñar mi próximo fondo.

¿Te animas a cambiar el tuyo y dejarnos el enlace en este post para que todos lo veamos?

Fuente:
50 fondos de Twitter para inspirarte antes de diseña el tuyo

Tutorial de Photoshop: Diseño en madera


Los trabajos de ebanistería son diseños realizados sobre madera en los que se obtienen bonitos dibujos sacando relieves de la pieza de madera, pero desgraciadamente pocas personas son capaces de realizar estos trabajos con resultados sorprendentes.

Está claro que lo nuestro no es el trabajo sobre la madera, pero si queréis simular estos trabajos con Photoshop, aquí os dejo un tutorial muy sencillo de seguir ya que está hecho para aquellos que estén empezando a utilizar este programa.

Con este tutorial conseguiréis un diseño de ebanistería muy real con el dibujo que queráis y sin tocar la madera!.

Fuente: Tutorial para hacer diseños en madera con Photoshop

Paisaje estilo Avatar en Photoshop


Sin duda la película Avatar ha marcado a mas de uno con sus personajes y paisajes, y si bien ya hemos visto tiempo atrás como crear una isla flotante con Photoshop, este tutorial merece una mención ya que tiene un resultado excelente en cuanto a color e iluminación.

Este es un claro ejemplo en donde queda demostrado que con un poco de técnica, solo resta contar con paciencia para encontrar las imágenes justas para la composición que deseamos realizar. El tiempo que le dediquemos a la búsqueda de fotografías (en el caso de no ser fotógrafo) harán la diferencia en el resultado final.

Enlace Create a Floating Island Scene Similar to James Cameron´s Avatar
Vía Photoshop Lady

Todo naturaleza: Pinceles y texturas


Por aquí se que los recursos de naturaleza son bastante apreciados, asique este pack que contiene recursos de este tipo (pinceles y texturas) nos va a venir genial para aumentar nuestra colección personal.

Tras el salto quedan pinceles (la mayoría con el clásico tamaño de alta resolución: 2500 píxeles) y unas cuantas texturas también con resolución alta, para que ningún trabajo se quede fuera por limitaciones de resolución.

Fuente: Designzzz

10 de mayo de 2010

30 logos de empresas hechos desde la creatividad


Creatividad:

La creatividad, denominada también inventiva, pensamiento original, imaginación constructiva, pensamiento divergentepensamiento creativo, es la generación de nuevas ideas o conceptos, o de nuevas asociaciones entre ideas y conceptos conocidos, que habitualmente producen soluciones originales.

Si has leído la definición que encabeza esta entrada y la has comprendido, ahora tendrás claro porqué los logos que os he dejado en esta entrada se ajustan perfectamente a la palabra ‘Creatividad’. Cierto es que siguen siendo sobre empresas inventadas para hacer más sencillo todo, pero no olvidemos que estos logos están creados para la inspiración de todos vosotros, para que si llega el momento de crear uno tengamos claro que hay que innovar y tirar hacia el mundo de la imaginación, eso de ser lineales ya no sirve…

Fuente: Designm.ag

Efecto HDR en Photoshop CS5


Puede que el efecto HDR ya este algo trillado… lo reconozco. Pero la atracción que generó con su aparición evidentemente hicieron eco en Adobe, quien incluyó en el menú de ajustes de Photoshop CS5 un “HDR Toning” con el cual abriremos una ventana de parámetros para intentar simular el efecto (mantengo el simular ya que el efecto real se da realiza originalmente con mas de una toma).

En Photoshop Daily podemos ver un breve tutorial sobre esta nueva función de Photoshop y comenzar a saborear las nuevas herramientas de esta versión.

Enlace Create an HDR effect in Photoshop CS5

Adobe Creative Suite CS5 - Descarga version de prueba


Ayer fue presentada la nueva versión de la suite de Adobe para diseño, la Adobe Creative Suite CS5 y desde entonces podemos descargar la versión de prueba en su página oficial para poder ver y probar las nuevas funcionalidades de sus programas y hasta donde llegan las mejoras de esta nueva versión.

Además también hay versiones de prueba de otros programas de Adobe como Acrobat Reader 9, Photoshop LIghtroom 2 y Photoshop Elements 8.

Para descargar las versiones de prueba podéis acceder a la página oficial de Adobe clicando aquí.