Krypton Solid

¿Photoshop está muerto?

¿Photoshop está muerto?

Supongo que un título más adecuado podría ser «¿Photoshop sigue siendo una herramienta adecuada para diseñar tipografías en la web?» Pero eso carece del atractivo dramático de lo anterior.

Como muchos de ustedes, siempre he usado Photoshop para crear maquetas de mis diseños. Desde que tengo memoria, ha sido el estándar de la industria y el software elegido por la mayoría de los diseñadores con los que he trabajado. He pasado semanas diseñando diseños de píxeles perfectos, agrupando elementos en carpetas jerárquicas y etiquetando todas mis capas para hacer la transición de una hermosa maqueta a un código lo más suave posible.

Estaría lleno de entusiasmo, energía y entusiasmo explicando mis diseños a un desarrollador, activando y desactivando estados de capa para intentar ilustrar mi visión a través de Photoshop, pero siempre me decepcionaría un poco cuando mi diseño brillante y pulido se transformó en lo que vería. en el navegador. Claro, se vería como mi diseño … Y reconocí los tipos de letra, pero le faltaba esa nitidez que recordaba de mis composiciones. No era que los desarrolladores no lo hubieran codificado bien, más bien que la tipografía que había creado en Photoshop no se había traducido en código.

Lo que ves no siempre es lo que obtienes

Al elegir fuentes Hay pocas cosas más importantes que si una fuente es fácilmente legible o no. En Photoshop, eso no es un gran problema porque todo se ve muy bien. No importa qué fuente use, en qué tamaño o peso (dentro de lo razonable), ya que se representará perfectamente en la pantalla.

Desafortunadamente, esto no se extiende al navegador. A menudo, al ver mi diseño en el navegador, las relaciones entre los elementos y el tipo eran todas incorrectas. Los tamaños de fuente y las alturas de línea que había atribuido a los estilos en mi composición de Photoshop no se verían igual que en el navegador. Si hubiera designado un margen de 20 píxeles por encima del título en mis diseños, esa distancia puede haber cambiado ya que la altura de la línea del encabezado tendría un efecto en el tamaño del margen, algo que no sucedería en Photoshop. Entonces tendría que iniciar el largo y tedioso proceso de los temidos ‘retoques de diseño’.

Todo el mundo odia los ajustes de diseño

Créame, no es solo el desarrollador el que elude la idea de un diseñador sentado junto a ellos pidiéndoles que ‘aumenten la altura de la línea de la copia del cuerpo en dos píxeles’ y luego que el desarrollador haga el cambio de CSS y confirme… Ingresar. ‘En realidad, 1 píxel más pequeño’… Entrar. ‘Quizás era mejor como estaba’. Este tipo de ajustes del CSS poco a poco para ver los resultados en tiempo real a través del navegador lleva mucho tiempo y no favorece la creatividad. Los desarrolladores se cansan rápidamente de pasar el día cambiando repetidamente lo que ven como los detalles más pequeños que no harán ninguna diferencia, y los diseñadores no pueden experimentar cambiando rápida y fácilmente los tipos de letra y los estilos por otros que se renderizarán mejor en el navegador.

¿Y ahora qué?

Para los diseñadores que tienen conocimientos de CSS, puede utilizar herramientas como Firebug para realizar de manera efectiva sus propios ajustes de diseño en el navegador, anotando todos los cambios de CSS en un documento que luego puede pasar a un desarrollador para que los implemente. Esto es efectivamente lo mismo que sentarse con un desarrollador y hacer cambios de CSS, pero mucho menos tedioso para el desarrollador y también le permitirá al diseñador experimentar más con tamaños y estilos antes de tomar una decisión. Aunque esta es una buena herramienta para inspeccionar y cambiar partes del HTML y CSS, perderá cualquier cambio que realice tan pronto como se actualice el navegador, lo que puede ser muy molesto si ha cambiado muchos elementos y no ha anotado todos sus elementos. ajustes.

Puedes usar el Complemento de Firediff para guardar un registro de todos los cambios que realiza dentro de Firebug, lo cual es genial ya que le ahorra tener que anotar cada cambio en una hoja de cálculo separada para más adelante. El mayor problema con este método es cuando comienza a introducir fuentes web en la ecuación, ya que las fuentes elegidas deben instalarse en su kit de tipografía o no aparecerán en el navegador. Esto hace que las cosas sean mucho más difíciles y menos libre para experimentar fácilmente con diferentes fuentes, ya que no puede simplemente probar las fuentes rápidamente.

Diseñando en el navegador

Servicios como Encasillar hago que sea mucho más fácil para los diseñadores trabajar con fuentes web y prácticamente hago toda mi tipografía para la web usándola. Le permite crear maquetas tipográficas (como lo haría en Photoshop) utilizando su interfaz visual para asignar fuentes, estilos, pesos, colores, altura de línea, margen, relleno y más a su tipografía. Lo mejor de usar Typecast es que todo funciona dentro del navegador, por lo que está tomando decisiones sobre el tipo exactamente como se representará para el usuario. ¿Una determinada fuente no se ve demasiado caliente con 19 píxeles? Aumente a 20 con un clic de un botón, vuelva a bajar a 19 antes de finalmente establecerse en 18 píxeles de tamaño, todo hecho en segundos en lugar de horas sentado con un desarrollador.

Puede usar cualquier fuente web de sus colecciones de 23,000 fuentes, incluidas las fuentes de Google, Typekit y más en sus composiciones, lo que hace que la experimentación sea rápida y fácil (Monotype, que posee Fonts.com y Myfonts, las compró recientemente, así que espere muchas más fuentes. en camino pronto). En mi opinión, Typecast introduce una noción de alegría en la tipografía, ya que te anima a probar variaciones de fuentes, que es posible que nunca hayas descubierto si no estuvieran tan fácilmente disponibles y fácilmente intercambiables como son.

Otra característica muy útil de typecast es la capacidad de ver y editar el CSS de su tipo. Puede agregar colores e imágenes de fondo, estados de desplazamiento o incluso transiciones simplemente editando el panel CSS. Una vez que esté satisfecho con su creación, puede exportar y guardar fácilmente el código CSS, que luego puede cargarse en su sitio o enviarse a un desarrollador y, debido a que todo ha sido diseñado en el navegador, aparecerá exactamente como lo desea.

Me perdiste en CSS

Photoshop no es el estándar de la industria en vano, y habrá algunos de ustedes hiperventilando ante la idea de soltarlo para diseñar en el navegador, después de todo, somos creativos, no codificadores. Bueno, deje la bolsa de papel, ya que todavía hay una manera de crear una hermosa tipografía utilizando fuentes web en Photoshop. Extensis han creado un complemento que se puede instalar en las versiones CS5 de Photoshop y superiores que le dará acceso a todas las fuentes WebINK y Google Web Fonts para usar de forma gratuita, directamente dentro de Photoshop.

Esto significa que puede usar cualquiera de WebINK o las fuentes web de Google en sus composiciones de diseño como lo haría con cualquier fuente que esté instalada en su sistema y se mostrarán aproximadamente de la misma forma que debería verse en el navegador. El complemento solo le dará acceso a WebINK y las fuentes web de Google en este momento, pero en el lado positivo, actualizará automáticamente las nuevas fuentes a medida que se agreguen a WebINK y a la biblioteca de fuentes de Google.

Encendido de Photoshop

Otro complemento valioso que ayuda a facilitar la transición entre las composiciones de Photoshop y el CSS compatible con el navegador es el complemento gratuito basado en la nube de css3ps.com. Una de las principales razones por las que muchos diseñadores trabajan con Photoshop es el control que tiene sobre las capas y los elementos de forma. Ser capaz de experimentar fácil y rápidamente con sombras, resplandores, colores, texturas, esquinas redondeadas y más es casi una segunda naturaleza para la mayoría y algo que incluso los diseñadores experimentados luchan por replicar exactamente en el navegador. Para aquellos, este complemento es perfecto, ya que le permite crear sus composiciones de la manera que mejor conoce, pero luego le permite convertir fácilmente los estilos de su forma en CSS3 compatible con el navegador. Este método es ideal para diseñar botones, navegación o cualquier otra cosa para la que haya diseñado una forma.

Quizás todavía haya un papel para Photoshop como herramienta para diseñar diseños web, pero en lo que respecta al diseño de tipografía para la web, aplicaciones como Firebug y Typecast lo han superado. El tiempo que lleva actualizar las composiciones estáticas simplemente no se puede comparar con la velocidad y la facilidad con las que puede realizar cambios en el navegador. Para aquellos de ustedes que ni siquiera pueden considerar la idea de diseñar en el navegador, los complementos anteriores deberían al menos darle a Photoshop el impulso que necesita para mantenerse relevante y ayudar a facilitar la transición.

¿Utiliza Photoshop para diseñar sitios web? ¿Photoshop sigue el camino de Flash? Háznoslo saber en los comentarios.

Imagen destacada / miniatura, usos imagen muerta a través de Shutterstock.

Deja un comentario