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

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

Me gustaría tener una configuración para que al elegir una web segura básica (como Tahoma) en Photoshop pueda ver cómo se verá realmente cuando esté en la web.

Por ejemplo: la diferencia entre Tahoma con anti-aliasing configurado en "nítido" en Photoshop y cómo se procesa en Firefox es importante. Se ve bien y suave en Photoshop y parece una mierda en la web.

¿Hay alguna opción de anti-aliasing que sea mejor para comenzar (que tenga el resultado más similar) cuando planee tener el contenido en vivo en la web?

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.

Respuestas (5)

La mayoría de los sistemas operativos y navegadores se renderizan con antialiasing o antialiasing de subpíxeles. El suavizado de subpíxeles es común en las plataformas de escritorio, como Windows (con ClearType) y OS X. El suavizado monocromático estándar es común en las plataformas móviles, donde el orden de los subpíxeles del dispositivo puede cambiar con la orientación del dispositivo y donde la representación de los subpíxeles no lo es. Es 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 manera predeterminada. Windows Vista y versiones posteriores tienen ClearType activado de forma predeterminada.


La renderización en Photoshop, Windows, OS X, iOS, Android, WebKit y Firefox (Gecko) suelen ser todas diferentes. Por lo tanto, no hay absolutamente ninguna forma de que pueda crear 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.

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

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

Al pasarle 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 muestra ligeramente diferente en su navegador de elección en comparación con las composiciones de Photoshop.

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

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

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

No existe el "diseño 100 % seguro para la web" dado que no existe el 100 % de consistencia entre navegadores, fuentes y sistemas operativos.

Respuesta corta: no puedes.

Photoshop no solo nunca es ideal para saber cómo se representará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/taller de impresión, todo lo que se diseñaba en PS tenía que exportarse como PDF por este mismo motivo). Luego viene el tema de la web, sus navegadores y el sistema operativo que ejecuta esos navegadores. Hasta ahora, que yo sepa, OS X es el mejor en términos de representación de fuentes de manera adecuada, mientras que Linux ocupa el segundo lugar y, por supuesto, Windows 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áramos a Linux, Mac, o que esperáramos hasta que Microsoft tenga éxito la próxima vez con Windows Metro (lo siento, odio llamarlo Windows 8) o lo arruine por completo.

Solo mis 2 centavos,

Parche

En mi opinión, renderizar 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 a los diseñadores gráficos con los que trabajo. El "Fuerte" predeterminado siempre los prepara para la decepción. ;)