¿Cómo puedo hacer que mi texto de Photoshop aparezca como en la web?

11

¿Realmente tengo que diseñar todo en Photoshop con el suavizado configurado en "ninguno"? Estoy seguro de que hay una mejor manera.

Me gustaría tener una configuración para que cuando elija una caja fuerte básica para la web (como Tahoma) en Photoshop, pueda ver cómo se verá realmente en la web.

Por ejemplo: la diferencia entre Tahoma con el suavizado establecido en "nítido" en Photoshop y cómo se procesa en Firefox es importante. Se ve bien y suave en Photoshop y se ve como basura en la web.

¿Existe una opción anti-aliasing con la que es mejor comenzar (que tiene el resultado más similar) cuando se planea tener el contenido en vivo en la web?

jonn_g
fuente
1
El aspecto de una fuente 'en la web' depende completamente del navegador, la configuración del navegador, el sistema operativo y la configuración del sistema operativo. En otras palabras, se ve diferente para diferentes personas.
DA01

Respuestas:

10

La mayoría de los sistemas operativos y navegadores se procesan con antialiasing o sub-pixel antialiasing. El antialiasing subpíxel es común en plataformas de escritorio, como Windows (con ClearType) y OS X. El antialiasing monocromático estándar es común en plataformas móviles, donde el orden de subpíxeles del dispositivo puede cambiar con la orientación del dispositivo, y donde la representación de subpíxeles no es t como crucial, porque a menudo tienen pantallas de mayor densidad de píxeles.

La representación de texto con alias es común en Windows XP, donde ClearType está deshabilitado de forma predeterminada. Windows Vista y las versiones posteriores tienen ClearType activado de forma predeterminada.


El renderizado en Photoshop vs Windows vs OS X vs iOS vs Android vs WebKit vs Firefox (Gecko) son típicamente todos diferentes. Por lo tanto, no hay forma de que pueda construir algo en Photoshop y saber que la representación del texto será la misma, a menos que tome una captura de pantalla y la agregue a su documento como una capa de mapa de bits.

Marc Edwards
fuente
2
Desde que respondió a esta pregunta, Adobe agregó las opciones "Mac" y "Mac LCD" a Photoshop (más equivalentes en Windows) que utilizan la representación de fuentes del sistema. A menudo es muy cercano o idéntico a Safari ahora.
Marc Edwards
8

No. La nueva línea de pensamiento es evitar Photoshop para el diseño y el diseño de la tipografía y comenzar en el navegador lo antes posible.

Al pasar al cliente una URL real en lugar de una composición de Photoshop, evita que las expectativas del cliente se vean frustradas cuando el producto final se vuelve ligeramente diferente en su navegador de elección frente a las composiciones de Photoshop.

En última instancia, es nuestra responsabilidad educar al cliente y hacerle saber las inevitables discrepancias tipográficas que ocurren entre los navegadores y los sistemas operativos.

El conductor
fuente
1
En mi empresa, creo diseños y los entrego a un desarrollador front-end. Nunca toco el código. Dicho esto, necesito una solución que no implique realmente construir la página web para ver cómo se ve el texto.
jonn_g
2

En Photoshop CC, agregamos nuevos modos de alias para sus fuentes. En lugar de "crujiente" o "fuerte", pruebe la nueva "Mac LCD". Obtendrá un diseño 100% seguro para la web.

Michael Chaize
fuente
1
No existe el "diseño 100% seguro para la web" dado que no existe una consistencia del 100% en los navegadores, fuentes y sistemas operativos.
DA01
1

Respuesta corta: no puedes.

Photoshop no solo nunca es ideal para saber cómo se procesarán sus tipos de letra fuera de él, sino que tampoco es ideal para trabajar con fuentes en general. (Cuando trabajaba en una empresa de diseño / imprenta, todo lo diseñado en PS tenía que exportarse como PDF por este mismo motivo). Luego viene el problema de la web, son los navegadores y el sistema operativo que ejecuta esos navegadores. Hasta ahora, hasta donde yo sé, OS X es el mejor en términos de representación de fuentes de manera adecuada, mientras que Linux ocupa el segundo lugar y Windows, por supuesto, el último. La realidad es que todos usan diferentes algoritmos para renderizar fuentes, y no obtendrás el mismo resultado en todas partes. Si hubiera una solución, sería que todos nos cambiémos a Linux, Mac o esperemos hasta que Microsoft tenga éxito la próxima vez con Windows Metro (lo siento, odio llamarlo Windows 8) o lo arruina por completo,

Solo mis 2 centavos,

Parche

Parche
fuente
0

En mi opinión, el renderizado en un navegador está en algún lugar entre "Sharp" y "Crisp" de Photoshop en una Mac, y entre "Crisp" y "Strong" en Windows. Sugiero usar "Crisp" para texto en vivo para los diseñadores gráficos con los que trabajo. El valor predeterminado "Fuerte" siempre los prepara para la decepción. ;)

Greg Perham
fuente