Sebastián Thüer Blog » Photoshop

5 recursos de diseño que ya pasaron de moda y cómo suplantarlos

Sebastián Thüer — Thu, 19 Jan 2012 10:00:03 +0000

El diseño -ya sea web, gráfico, de modas o industrial- está alcanzado por tendencias o modas que marcan una cierta pauta de los recursos que se están utilizando. De algún modo, los usuarios o consumidores esperan manejarse en un contexto previsible que las aporte seguridad y, a la vez, reconocer rasgos distintivos que doten de personalidad al objeto.

En este sentido, es interesante el aporte que hace DesignShack a través de 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them) donde recoge algunos de los principales clichés del diseño que han sido exprimidos hasta el hartazgo y ya no provocan ese toque sofisticado y moderno que tenían antaño.

1. Bevel & Emboss (biseles y relieve)

En algún momento pudo ser original, pero ahora parece un recurso de principiante con el Photoshop. Una imagen así hace que tu diseño automáticamente retroceda 10 años.

Hoy en día se tiende a minimizar el uso de estos recursos y darle a los objetos un aspecto más real sin sombras y brillos artificiosos. En lo personal creo que no hay que obsesionarse con estos efectos iluminación y mejor trabajar con sombras más situales. De todas formas, si la intención es dar sensación de relieve mejor trabajar con sombras y brillo más tenúes y progresivos. Un buen ejemplo es este trabajo de Matt Gentile.

2. Brillos “a la” Web 2.0

Sí, en un momento la web 2.0 se puso de moda y surgieron los colores brillantes y efectos de plástico brillante. Era un lindo momento donde decir redes sociales era estar a la vanguardia y todo el mundo ponía el rótulo de “beta” al lado de su logo.

Esa época ya pasó. Los degradados con efecto vidriado ya tuvieron su hora estelar y si bien son un recurso válido su abuso terminó por homogeneizar muchos sitios web. Hoy en día es preferible apostar por degradados más suaves, bordes ligeramente marcados para despegar el botón del fondo. Como lo hacen en la web de Firefox.

3. Textos en manuscrito

Por alguna razón la utilización de la tipografía manuscrita cada tanto resurge en el diseño. Se trata de un recurso que bien utilizado aporta un toque fresco y casual para quebrar la sucesión de tipografías formales. Pero normalmente se termina recurriendo a fuentes gratuitas que aparecen por todo el sitio con lo cual se pierde su intencionalidad original y el sitio en lugar de lucir “fresco” parece desorganizado y con problemas de legibilidad.

En su lugar, mejor apostar por tipos claros y simples para presentar el texto. Hoy en día, existe muchísimas tipografías con estilo y buena legibilidad. Mejor reservar el estilo manuscrito para lugares donde realmente tenga valor.

4. Promociones estrelladas

Ofertas, descuentos, 2×1 y demás reclamos promocionales solían estar siempre dentro una estrella de colores vibrantes. Un golpe de efecto al que ya le pasó su cuarto de hora y que actualmente se puede reemplazar por una gama mucho más amplia de recursos gráficos para destacar argumentos de venta.

En su lugar, podemos optar por lazos colocados en esquinas, vértices o centrados en la misma página. Otra alternativa son los distintivos o divisas que ayudan a destacar la información pero de un modo mucho más armónica e integrado con el resto de los elementos gráficos de la página

5. Sombras exageradas sobre el texto

Hubo un tiempo en que el descubrimiento de las sombras causó furor y se aplicaba a casi cualquier elementos. Como suele ocurrir con las cosas nuevas, se utilizó de una forma abundante y exagerada donde pasada la sorpresa inicial la sombra se convertía en un elementos distractivo. Como ocurre con el efecto “bevel & emboss”, utilizar este recursos de la misma manera significa gritar a los 4 vientos que nuestro criterios estético se ha detenido en el tiempo.

¿Hay que dejar de usar sombras? Seguro que no, pero si emplearlas de un modo diferente. Apostar por la sutileza, los matices y degradados suaves que ayuden a reforzar la comprensión del texto. O líneas definidas que ayuden a marcar el relieve sin utilizar excesivos nivels de degradado.

Conclusión

Un sitio con aspecto anticuado y donde adentrarse en sus página implique un salto en el tiempo es algo que nadie quiere. Una cosa es utilizar la estética retro o vintage como recurso y con cierto sentido y otra cosa es abrir en el navegador un diseño al que simplemente le pasó el tiempo.

Las técnicas y recursos descriptos son propias de un modo dediseñar sitios web que ya está superado. No quiere decir que lo que se utiliza hoy sea mejor -aunque es cierto que ahora hay una mucho mayor preocupación por los pequeños detalles- pero sí que al menos aporta un toque actual al diseño. En definitiva, aggiornare a los tiempos que corren.

Vuelve BundleHunt con un pack de recursos para diseñadores

Sebastián Thüer — Sat, 03 Dec 2011 13:00:09 +0000

BundleHunt, el un paquete de recursos para diseñadores, está de vuelta. Si en el comercio generalista reinan los sitios con cupones de descuento, en el ámbito del diseño estos packs llenos de programas, pantillas, libros, iconos y otros recursos se están consolidando como un modo de ofrecer productos a precio promocional.

Por casi 50 dólares tenés programas de diseño, libros de Smashing Magazine, varios themes para WordPress, colecciones de vectores e iconos. Como en la anterior oferta, la mayoría del software corre sólo sobre Mac. La oferta termina el 16 de diciembre.

LayerStyle: Crear efectos con CSS3 como si fuesen capas de Photoshop

Sebastián Thüer — Fri, 03 Jun 2011 15:00:00 +0000

Si el HTML dio un salto con HTML5, CSS hace lo mismo con CSS3 ¿Qué hay de nuevo en esta versión del archivo de estilo? Básicamente, muchos cosas que antes requería de ciertos trucos ahora se pueden hacer directamente desde CSS sin la necesidad de utilizar imágenes.

Bordes redondeados, sombras y fondos degradados ahora se pueden trabajar de manera directa en CSS. Eso sí, la sintaxis también se ha hecho algo más compleja porque -como toda novedad en la industria- los desarrolladores de navegadores no se ponen de acuerdo y hay que utilizar propiedas específicas.

Seguramente que para el trabajo detallado es necesario aprender la sintaxis, pero como un primer acercamiento no está demás mirar algunas herramietnas como LayerStyles que se encargan de generar el código automáticamente utilizando una interfaz mucho más amigable para un diseñador: la ventana de capas de Photoshop.

Aunque ciertamente no es 100% igual, se acerca bastante el código generado sirve para los diferentes motores de navegadores que soporten CSS3 como WebKit (Chrome, Safari) , Gecko (Firefox, Camino) y el nuevo Internet Explorer 9.

El resulta es bastante bueno, aunque a veces puede que la pantalla del navegador se congele si agregamos demasiados efectos. Igualmente el proyecto de Felix Nicklas es de código abierto con lo cual es esperable que se vaya mejorando.

Obviamente, esta herramienta utiliza HTML5.

Una herramienta para manejar las resoluciones de pantalla en diseño web

Sebastián Thüer — Mon, 02 May 2011 13:00:00 +0000

Uno de los dolores de cabeza más frecuentes en el diseño web es lidiar con las resoluciones de pantalla. Mientras en la gráfica optimizamos la composición para un tamaño determinado, los diseños que salen por pantalla pueden ser reproducidos en infinidad de condiciones: desde la pantalla de un smartphone hasta un LCD de 42 pulgadas.

No es solamente una cuestión de tamaño. El problema también afecta al ratio, es decir, la relación entre el alto y el ancho de la pantalla. Podemos tener ratios que van del 3:5 al 16:9 con lo cual las proporciones y distribución de los elementos varía considerablemente.

Punchcut es una empresa de diseño especializada en experiencias móviles y convergencia de dispositivos que ha puesto a disposición de los diseñadores un interesante set de recursos para contemplar el diseño con múltiples dispositivos. En un ZIP ofrecen una serie de PSD de base con el diseño en los dispositivos más frecuentes, un archivo con los ratios y resoluciones más habituales un archivo TPL para Photoshop con los preseteos para cada caso.

Ir Punchcut

Interfaz gráfica en PSD para el diseño en móviles

Sebastián Thüer — Tue, 25 Jan 2011 13:27:48 +0000

La creación de interfaz para aplicaciones de smartphones o teléfonos móviles inteligentes es un interesante campo de trabajo que se abre a muchos diseñadores de interacción o UX. Una vez realizado el wireframe llega la hora de componer el diseño de pantalla para que los desarrolladores puedan ver con claridad como lucirá la aplicación en marcha. Es en estos casos que resulta intesante contar con los cada vez más populares kits que reúnen todo los elementos de la interfaz gráfica de un dispositivo.

¿Encontraste un kit para algún otro modelo? ¿Tenés un aporte propio? Dejá en enlace en los comentarios.

La evolución del Photoshop [infografía]

Sebastián Thüer — Sat, 09 Oct 2010 13:00:09 +0000

Photoshop es prácticamente insustituible para cualquier diseñador. Esta aplicación de retoque fotográfico se usa en el campo del diseño, la fotografía y cualquier otra disciplina que requiera la edición digital de imágenes. Sin embargo, en sus orígenes fue una aplicación bastante diferente de cómo la conocemos hoy.

Esta infografía nos muestra visualmente cómo Photoshop ha evolucionado y lo hace con la clásica estética de la evolución darwiniana con línea de tiempo y los avances más significativos de cada versión.

La evolución del Photoshop

Vía Inspired Mag

Acciones de Photoshop para las fotos de tus diseños

Sebastián Thüer — Wed, 16 Jun 2010 22:30:00 +0000

PanosFX acaba de lanzar dos nuevos conjuntos gratuitos de acciones para Photoshop que permiten ahorrar tiempo en tus proyectos: sticker y discrete. La primera sirve justamente para simular stickers circulares a partir de cualquier fotografía y es especialmente útil para projectos de scrapbooking y otros donde te interesa simular esas calcomanías circulares que habitualmente se colocan sobre fotos o álbums. Discrete es un conjunto de acciones pensandos para agregar bordes y sombras a las imágenes para darles un look 3D.

Las acciones requieren Photoshop CS2 o superior. También funcionan con Photoshop Elements en versiones 6,7 y 8.

Ejemplos de fotos trabajadas con ‘sticker’

Descargar set de acciones para Photoshop ‘Stickers’

Ejemplos de fotos trabajadas con ‘discrete’

Descargar set de acciones para Photoshop ‘Discrete’

Adobe CS5, la nueva suite para el diseño web

Sebastián Thüer — Wed, 14 Apr 2010 21:40:07 +0000

Como ocurre cada dos años Adobe lanzó su suite de diseño Adobe CS5 con nuevas versiones de sus principales programas. El lanzamiento mundial fue el 12 de abril y estuvo a cargo de John Loiacono, Vicepresidente Senior y Manager General de Adobe.

“Estamos tremendamente emocionados de presentar la nueva versión de Creative Suite, no porque está llena de nuevas herramientas de gran y características, sino porque estas características son complementadas por la capacidad para resolver problemas reales de flujo de trabajo de extremo a extremo”, dijo Loiacono.

El flujo de trabajo, entendido como una línea que recorre al contenido desde su creación, entrega, visualización, testeo y optimización, es precisamente el gran protagonista en las novedades de Adobe CS5 que apunta a reducir el tiempo empleado para tareas que hasta ahora se hacían paso a paso.

Veamos un rápido repaso por las principales aplicaciones de la suite para el diseño web.

Photoshop CS5

Photoshop es una de los programas más antiguos de Adobe y uno de los que presenta las novedades más impactantes al permitir realizar tareas que llevaban bastante tiempo de forma muy rápida. La opción content aware es la estrella y permite eliminar objeto de un escenario sustituyéndolos por el fondo, como se ve en este video:

Puppet Warp es otra función muy interesante que descompone una figura en celdas donde se pueden insertar puntos de anclaje, al estilo de los programas vectoriales y algunos de 3D. De esta forma, es posible, mover y articular un objeto dentro de una fotografía con relativa facilidad.

Más novedades en Photoshop: selección de contornos mejorada para las máscaras, corrección de lentes para corregir distorsiones ópticas, edición avanzada de alto rango dinámico (HDR), corrección automática de la línea del horizonte y más. En quesabesde.com hay una buena síntesis de las principales novedades de Photoshop CS5.

Dreamweaver CS5

El programa de diseño web por excelencia finalmente ofrece soporte para los principales CMS como WordPress, Joomla! o Drupal. Una tarea cada vez más frecuentes para los diseñadores es desarrollar plantillas para alguno de estos sistemas que hasta ahora se debía hacer en la vista de código y sin poder obtener una previsualización de los resultados.

Otro paso hacia donde avanza Dreamweaver es permitirnos ver cómo queda nuestras creaciones cuando son accedidas con diferentes navegadores. La comprobación de código puede funcionar bien, pero no hay nada mejor que ver en la realidad cómo luce la web cargada en un navegador con un sistema operativo concreto. Por eso Dreamweaver CS5 se integra con Adobe BroweserLab que permite generar capturas de pantalla de una web como si se viera con distintos navegadores y sistemas.

Otra novedad interesante es la inspección de CSS al estilo Firebug: al seleccionar un elementos se puede ver todas las clases que tiene aplicadas. Algo muy útil cuando hay que hacer ajustes finos o trabajar con muchos estilos y clases anidadas.

Este video muestra otra función interesante: el “pegado inteligente” de vectores y otros archivos directamente en Dreamweaver.

Flash CS5

La guerra entre Flash y HTML5 destapada a raíz de la falta de soporte de Flash en el iPad tiene un nuevo capítulo en Flash CS5 que convertirá las animaciones generadas con este programa en HTML5. Se trata de una jugada arriesgada pero brillante ya que permitirá a los diseñadores recuperar sus trabajos anteriores y hacerlos compatibles en aquellos dispositivos que no admitan el plugin de Flash.

Otra mejora de Flash tiene que ver con aquellos que escriben código ya que tiene un editor mejorado con la posibilidad de autocompletar clases personalizadas. Para los diseñadores, Flash CS 5 trae Text Layout Framework con lo cual la inserción de elementos gráficos dentro de un texto (emoticons, gráficos, dibujos, etc.) se hace mucho más sencilla. Eso sí, requiere tener el plugin Flash 10 instalado.

Debajo está el video de una presentación de Flash CS5 en Flash On The Beach:

El resto de Adobe CS5

Recorriendo brevemente los programas que componen la suite está claro que refuerzan su apuesta por la integración de los productos para poder llevar elementos de un lado a otro de manera rápida, clara y organizada. El pegado inteligente de Dreamweaver es un ejemplo de ello.

Para Illustrator CS5 hay novedades interesantes como la facilidad para trabajar el dibujo en perspsectiva, la capacidad de modificar el grosor de un trazo en puntos independientes y crear objetos con precisión de pixeles, algo que se agradece para el diseño web.

En el caso de Fireworks Cs5 ahora el programa se integra con Adobe Device Central con lo cual es posible producir diseños para varios dispositivos móviles. También agrega plantillas de diseño y ofrece un mejor flujo de trabajo con Flash.

¿Hay algo que te guste especialmente de la nueva suite? ¿Esperás que cambie realmente tu modo de trabajo? ¿Qué cosas importantes se han dejado de lado? Me gustaría conocer la opinión de los lectores.

Más información

Sitio oficial de Creative Suite
Cs5.org: Mucha información sobre los productos de la suite
Análisis de Illustrator CS5 en GenBeta
Análisis de Flash CS5 en Cristalab
Análisis de Photoshop CS5 en QueSabesDe.com
Análisis de Dreamweaver CS5 en PC Magazine (inglés)

Lanzamiento y precio

Se espera que la suite Adobe CS5 esté disponible el público en mayo pero podés inscribirte para que te avisen cuando se lance al mercado. El precio de Adobe Creative Suite 5 Design Premium es de 599 dólares para las actualizaciones y 1800 dólares por la versión completa. Si hacés tu reserva hasta el 29 de abril el envío de la versión box es gratuito.

Photoshop: 20 años que cambiaron el diseño y la imagen

Sebastián Thüer — Fri, 19 Feb 2010 13:49:05 +0000

Hace 20 años los hermanos Thomas y John Knoll unieron su pasión por el arte y la tecnología para crear Photoshop. Con una Apple Mac Plus Tom decidió resolver por sí mismo un problema para el que no encontraba solución: mostrar una imágenes en escala de grises en un monitor monocromático. Así nació el programa que revolucionó el diseño y la producción de imágenes.

Un poco de historia

Thomas Knoll (izquierda) y John Knoll (derecha), los hermanos creadores de Photoshop

En 1987 John trababaja para los legendarios estudios ILM de Lucas Film y Tom estudiaba procesamiento de imágenes en la Universidad de Michigan. Cuando hacía su trabajo de tesis Tom se dio cuenta que no podía mostrar imágenes en escala de gris en un monitor monocromático. Tenía un Apple Mac Plus y decidió escribir su propio código para convertir la imagen.

Su hermano vio los progresos y convenció a Tom de participar un proyecto mayor: Display. Tom comenzó a reescribir el código para que este programa pudiera trabajar con imágenes en colores pero pronto comenzó a agregarle más funciones: corrección del factor gama, abrir y guardar archivos en varios formatos y otras cosas más.

Uno de los avances más interesantes era un método innovador para seleccionar y modificar solamente una parte de la imagen y establecer un conjunto de rutinas que afectaran solamente esta selección. Esteconjunto de rutinas dieron lugar a lo que posteriormente fueron los plugins.

Los avances se fueron sucediendo. Agregaron funciones para ajustar los niveles de la imagen, controles para ajustar el balance, el tono y la saturación: Display se transformó en ImagePro. A pesar de la resistencia de Tom, su hermano comenzó a ver la posibilidad de vender el programa como una aplicación comercial para usuarios de Mac. Buscaron en el mercado un producto similar y no lo encontraron, por lo cual se convencieron de que el programa podría tener suerte.

El salto a Photoshop

Para poder dar un salto de escala con su proyecto necesitaban a inversores. En una de estas reuniones les sugirieron que cambiaran el nombre y así comenzaron a referirse al programa como Photoshop. Varias empresas estaban trabajando en desarrollos similares pero sólo una estaba abierta para la innovación de los hermanos Knoll: Adobe.

Russell Brown, director de arte de Adobe, quedó maravillado con la creación y convenció a su empresa que hiciera lugar a los hermanos para que siguieran desarrollando la aplicación. Los Knoll siguieron trabajando en Adobe para tener listo la primera versión oficial de Photoshop que finalmente salió a la luz en Febrero de 1990.

Thomas se encargó de desarrollar el código general de la aplicación, mientras que John se enfocaba en el desarrollo de los plugins de forma separada. Esta metodología sería luego replicada por múltiples programas y sigue vigente hoy en día.

Un dato interesante: Los hermanos Knoll nunca vendieron su programa a Adobe sino que lo licenciaron y distribuyeron a través de la empresa, con lo cual siguen recibiendo las regalías que produce el software.

El futuro de Photoshop

Los capítulos más recientes de las historia son más conocidos. Las sucesivas versiones de Photoshop fueron incorporando cada vez más funcionalidades. Si querés saber más sobre la historia de Photoshop en Computer Arts hay un muy buen artículo escrito hace 5 años que sigue vigente.

Yo comencé a trabajar con la versión 4 y creo que las horas que pasé aprendiendo Photoshop de forma autodidacta fueron divertidas y fundamentales para luego pasar al diseño web.

¿Que hay para el futuro? Photoshop CS5 probablemente llegue a mitad de este año con nuevas herramientas que permitirán pintar sobre una imagen de un modo mucho más realista, como se puede ver en este video:

Tutorial para pasar un diseño de Photoshop a HTML

Sebastián Thüer — Mon, 28 Sep 2009 19:06:02 +0000

Pasar un diseño de Phothop a HTML

Transformar una imagen en Photoshop o Illustrator en HTML y CSS es uno de los pasos claves en el diseño web. Para mí representa un verdadero desafío analizar una imagen y descomponer sus elementos de una manera armónica y natural para que el código generado sea comprensible.

En Nettuts++ publican un muy buen tutorial de los pasos a seguir para que tu boceto en Photoshop se transforme en HTML. Curiosamente no ha sido escrito por un diseñador experimentado sino por una estudiante de filosofía que se dedica al diseño web como hobby.

Design and Code Your First Website in Easy to Understand Steps

Diseñar web con elementos 3D usando Photoshop

Sebastián Thüer — Thu, 03 Sep 2009 21:15:01 +0000

Si te gusta el sitio web de la imagen que está más arriba estás con suerte: La gente de SixApart tiene un excelente tutorial donde explican paso a paso como crear el boceto utilizando Photoshop.

(...)
Leer más de Diseñar web con elementos 3D usando Photoshop (80 words)

Adobe CS4 Suite para descarga de prueba

Sebastián Thüer — Fri, 14 Nov 2008 22:39:45 +0000

Ya se pueden probar las versiones CS4 de Adobe. La compañía ha puesto sus programas de la suite para diseño a disposición para que los usuarios puedan descargar y evaluar los productos. Casi dos meses después de su presentación oficial Phothosp, Dreamweaver, Flash, Illustrator y el resto de los programas de la suite están accesibles en la web oficial de Adobe.

Por el momento estoy probando las nuevas versiones Dreamweaver y Photoshop. La impresión inicial es muy buena: una interfaz resideñada con más espacio para los documentos abiertos, nuevas funcionalidades (efectos 3D para Photoshop e integración de Subversion para Dreamweaver, entre otras) y mayor integración entre ambos programas.

(...)
Leer más de Adobe CS4 Suite para descarga de prueba (139 words)

Adobe CS4, un salto que vale la pena

Sebastián Thüer — Wed, 24 Sep 2008 18:21:20 +0000

Adobe presentó oficialmente la nueva suite de herramientas Adobe CS4 con importantes mejoras para Dreamweaver, Flash, Photshop, Illustrator y los demás programas que forman el paquete. El evento fue transmitido en vivo y sirvió para que desarrolladores e ingenieros de cada proyecto contaran las novedades.

¿Hay novedades realmente interesantes en los productos de la suite? Sí, y muchas. Por empezar, Photoshop y Flash agregan capacidades para manejar objetos en 3D. Si bien no son herramientas específicamente diseñadas para ello, se pueden pintar y rotar, respectivamente, figuras en tres dimensiones. Un acierto porque estas tareas eran un algo complejas.

En el caso de Dreamweaver lo mejor que han hecho -desde mi punto de vista- es integrarlo con Subversion, un software que permite hacer un control de versiones de un mismo archivo para saber quién lo modificó y que cambios hizo. Usar un control de versiones es fundamental para el trabajo de desarrollo en grupo cuando muchas personas trabajan sobre una mismo archivo. (...)
Leer más de Adobe CS4, un salto que vale la pena (318 words)

Plugin para crear íconos con Photoshop

Sebastián Thüer — Tue, 26 Sep 2006 23:52:15 +0000

De la multitud de formatos de imagen en la que Photoshop puede guardar los trabajos hay uno importante que está ausente: ICO, que es formato en el cual se guardan los íconos, tanto para ser usados en aplicaciones como para colocar en un sitio web.

Por ello, si hacemos todo el proceso de diseño de un ícono en Photoshop tenemos que recurrir a terceras aplicaciones para poder guardar en este formato. Una opción mucho más razonable es emplear ICO file format plugin for Photoshop que, como su nombre lo sugiere, se encarga de generar el archivo ICO en cuestión.

(...)
Leer más de Plugin para crear íconos con Photoshop (182 words)

Excelentes filtros gratuitos para Photoshop

Sebastián Thüer — Fri, 11 Aug 2006 21:58:45 +0000

Filtros para Photoshop hay muchos y de calidad diversa. En este caso, OptikVerbe Labs nos trae Virtual Photographer, un conjunto de filtros que en menos de 300kb nos permiten realizar los ajustes y manipulaciones más habituales en una fotografía. Y lo mejor de todo: ¡Son gratis!

Al bajar el archivo ejecutable y abrirlo nos crea una carpeta que deberemos copiar al directorio de plugins de Photoshop, aunque también trabaja con Photoshop Elements, Paint Shop Pro, Photo-Paint y otras aplicaciones que tengan soporte para plugins del programa de Adobe. Al abrir el editor de fotos nos vamos encontrar con más de 50 ajustes preconfigurados listos para aplicar: ajustes de colores, transparencia, grano, brillo y más. Y si nos quedamos con las ganas se pueden descargar más.

(...)
Leer más de Excelentes filtros gratuitos para Photoshop (111 words)