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.
Al igual que muchos de ustedes, siempre he usado Photoshop para crear composiciones 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. Pasé semanas diseñando diseños perfectos en píxeles, agrupando elementos en carpetas jerárquicas y etiquetando todas mis capas para hacer la transición de la hermosa maqueta al código de la manera más suave posible.
Estaría lleno de entusiasmo, energía y emoción explicando mis diseños a un desarrollador, alternando entre estados de capas para intentar e ilustrar mi visión a través de Photoshop, pero siempre estaría un poco decepcionado ya que 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í las tipografías, pero carecía de la nitidez que recordaba de mis composiciones. No es que los desarrolladores no lo hayan codificado bien, más que la tipografía que había creado en Photoshop no se había traducido en código.
Al elegir fuentes hay algunas cosas más importantes que si una fuente es fácilmente legible o no. En Photoshop, no es un gran problema porque todo se ve muy bien. No importa qué tipo de letra use, en qué tamaño o peso (dentro de lo razonable) ya que se procesará perfectamente en la pantalla.
Lamentablemente, 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 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 sobre el 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 sobre el tamaño del margen, algo que no sucedería en Photoshop. Entonces tendría que comenzar el largo y tedioso proceso de los temidos "ajustes de diseño".
Créanme, no es solo el desarrollador que elude la idea de un diseñador sentado junto a ellos pidiéndoles 'aumentar la altura de la línea de copia del cuerpo en dos píxeles' y luego hacer que el desarrollador haga el cambio y compromiso del CSS ... Entrar. 'En realidad, 1 píxel más pequeño' ... Enter. 'Tal vez fue mejor cómo fue'. Este tipo de ajuste del CSS poco a poco para ver los resultados en tiempo real a través del navegador consume mucho tiempo y no favorece la creatividad. Los desarrolladores se cansan rápidamente de pasar el día cambiando repetidamente lo que ven como el detalle más pequeño que no cambiará nada, y los diseñadores no pueden experimentar al cambiar rápida y fácilmente los tipos de letra y los estilos para obtener mejores resultados en el navegador.
Para los diseñadores que tienen una comprensión de CSS, puede usar 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 implementar. Esto es lo mismo que sentarse con un desarrollador y hacer cambios CSS, pero es mucho menos tedioso para el desarrollador y también le permitirá al diseñador experimentar aún 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á los cambios que realice tan pronto como el navegador se actualice, lo que puede ser muy molesto si ha cambiado muchos elementos y no anotado todos sus ajustes.
Puedes usar el Complemento de Firediff para guardar un registro de todos los cambios que realice en Firebug, que 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 comienzas a introducir fuentes web en la ecuación, ya que las fuentes elegidas deben estar instaladas en tu kit de texto o no aparecerán en el navegador. Esto hace que las cosas sean mucho más difíciles y menos libres para experimentar fácilmente con diferentes tipos de letra, ya que no puede simplemente probar las fuentes rápidamente.
Servicios como Encasillar hacer 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. Te permite crear maquetas tipográficas (como lo harías en Photoshop) usando su interfaz visual para asignar fuentes, estilos, pesos, colores, altura de línea, margen, relleno y más a tu tipografía. Lo mejor de usar Typecast es que todo está funcionando dentro del navegador, por lo que está tomando decisiones sobre el tipo de letra exactamente como se representará para el usuario. ¿Una fuente determinada no se ve demasiado caliente a 19 píxeles? Aumente el tamaño hasta 20 con un clic en un botón, baje hasta 19 antes de establecerse finalmente en 18 píxeles de tamaño, todo en segundos en lugar de horas sentado con un desarrollador.
Puede usar cualquier fuente web de sus colecciones de 23,000 fuentes, incluyendo fuentes de Google, Typekit y más en sus composiciones, lo que hace que la experimentación sea rápida y fácil (han sido comprados recientemente por Monotype quien posee Fonts.com y Myfonts así que espere muchas más fuentes) en el camino pronto). En mi opinión, Typecast introduce una noción de alegría en la tipografía, ya que te anima a probar las variaciones de fuente, que quizás nunca hayas descubierto si no estuvieran tan fácilmente disponibles y fácilmente intercambiables.
Otra característica muy útil de typecast es la capacidad de ver y editar el CSS de tu tipo. Puede agregar colores e imágenes de fondo, estados de desplazamiento o incluso transiciones simplemente editando el panel de 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 dado que todo ha sido diseñado en el navegador, aparecerá exactamente como lo desea.
Photoshop no es el estándar de la industria en vano, y habrá algunos de ustedes que estarán hiperventilados ante la idea de dejarlo caer en el diseño en el navegador, después de todo, somos creativos, no codificadores. Bueno, deja la bolsa de papel, ya que todavía hay una forma de crear bellas tipografías utilizando fuentes web en Photoshop. Extensis han creado un complemento que se puede instalar en las versiones CS5 y posteriores de Photoshop que le dará acceso a todas las fuentes WebINK y Google Web 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 tipo de letra que esté instalada en su sistema y que se mostrarán aproximadamente igual a como debería verse en el navegador. El complemento solo le dará acceso a WebINK y a las fuentes web de Google en este momento, pero en el lado positivo, actualizará automáticamente las fuentes nuevas a medida que se agreguen a WebINK y a la biblioteca de fuentes de Google.
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 usted 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 con experiencia tienen dificultades para replicar exactamente en el navegador. Para ellos, este complemento es perfecto, ya que te permite crear tus composiciones de la forma que mejor sepas, pero luego puedes convertir fácilmente los estilos de tu 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.
Tal vez todavía exista un papel para Photoshop como herramienta para diseñar diseños web, pero en cuanto al diseño de tipografía para la web, aplicaciones como Firebug y Typecast lo han superado. El tiempo que se tarda en actualizar las composiciones estáticas no se puede comparar con la velocidad y la facilidad con la que puede realizar cambios en el navegador. Para aquellos de ustedes que simplemente no pueden ni siquiera 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áganos saber en los comentarios.
Imagen / miniatura destacada, usos imagen muerta a través de Shutterstock.