Alias ​​de fuente (anti) en Photoshop

Estoy usando Photoshop para diseñar sitios web y cada vez que comparo un diseño de Photoshop con la vista previa del navegador en vivo, las fuentes parecen representarse de manera diferente.

Básicamente cualquier método anti-alias que elijo en Photoshop, el texto siempre da la impresión de texto en negrita . Por lo tanto, siempre me veo obligado a desactivar el suavizado (para texto normal de 12 px / 14 px).

¿Hay algún método que pueda lograr el mismo tipo de representación de fuentes en Photoshop como el que usa Windows con cleartype?

Si no, ¿hay alguna fuente que se vea mejor que Arial cuando el suavizado está desactivado?

Hay dos razones por las que el texto ClearType es tan nítido.

1. Utiliza la representación de subpíxeles . No creo que Photoshop lo admita.
2. utiliza sugerencias agresivas para ajustar las líneas en la cuadrícula de píxeles

Puede escribir su texto en el Bloc de notas, capturarlo con alguna herramienta conveniente y agradable, y pegarlo en Photoshop con el modo de fusión Multiplicar (porque es texto negro sobre un fondo blanco). Pero eso no es conveniente. Editar: también puede ser casi imposible hacerlo con cualquier color de primer plano que no sea negro.

Este tipo ha descrito un método para hacer renderizado manual de subpíxeles y, a mis ojos, mejora la nitidez de la fuente, acercándola a ClearType. Pero aún utiliza las sugerencias de Photoshop, por lo que no es tan nítido como ClearType.

¿Realmente necesitas renderizado al estilo ClearType en Photoshop? Si exporta cualquier gráfico que contenga texto para usar en su diseño web, no debe contener representación de subpíxeles porque no es apropiado para algunas pantallas (CRT, teléfono girado). Y si no está exportando texto sino solo mirándolo, la representación de Photoshop parece estar bien.

Photoshop no es un programa de diseño web. Para obtener un texto que se vea igual en un navegador que en un gráfico (jpg, gif, etc.), debe usar la misma fuente en ambos programas. Algunas fuentes no son utilizadas por todos los navegadores.

Dependiendo del tamaño de su texto, una buena fuente de tamaño mediano podría ser Tahoma, Helvetica, Trebuchet o Georgia. Consulte este sitio web para obtener algunas buenas ideas: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

Las fuentes más grandes son donde comienza a importar el suavizado.

Si está tratando de fusionar texto con texto en una página, le sugiero que use el posicionamiento CSS para lograr sus objetivos. CSS le permite colocar texto de su página web sobre imágenes, y utiliza un posicionamiento relativo y absoluto para representar la página exactamente como lo desea. Aquí hay un ejemplo y tutorial: http://css-tricks.com/text-blocks-over-image/

Lamentablemente, Photoshop no admite ningún tipo de representación de subpíxeles. Tampoco ningún otro software de Adobe, con la excepción de Dreamweaver . (Bueno, no es exactamente la tecnología de Dreamweaver, ya que solo representa el HTML y luego pasa el texto para que se represente el sistema operativo).

El flujo de trabajo sugerido puede ser que cree y corte su diseño en Photoshop y luego lo abra en Dreamweaver. Si el diseño necesita más correcciones, puede abrir el archivo simultáneamente en Photoshop, hacer los cambios, guardar y actualizar la vista en Dreamweaver. Agregue la copia final real en Dreamweaver. También puede reemplazar Photoshop con Fireworks; o incluso comenzar a enmarcar en Fireworks → continuar en Photoshop → publicar a través de Dreamweaver. (Queda claro por qué las ediciones Creative Suite generalmente se compran en paquetes, ¿no es así?)

Si el diseño se ve diferente en la vista previa de Dreamweaver que en los navegadores, ese es otro asunto desafortunado (y no estoy hablando solo de la tipografía sino del renderizado en su conjunto). Cuanto antes pueda pasar de Photoshop a la demostración en vivo, ya sea a través de Dreamweaver o no, mejor. Me hacer deseo Photoshop tendría poderes de representación de subpíxeles (pero al mismo tiempo la esperanza de que no será introducido en CS6, o al menos la esperanza que va a ser rico para entonces)!

Solo una nota al margen: ClearType está protegido con aproximadamente 10 patentes, por lo que no es probable el mismo renderizado. También vale la pena señalar que OS X usa una representación diferente (Quartz) de forma predeterminada y también lo hacen las interfaces gráficas en las distribuciones de Linux.

Diseño en HTML y CSS. Si DEBE recuperarlo en una maqueta de PhotoShop, saque la pantalla del navegador y luego vuelva a colocarlo en su documento de PhotoShop.

Establecer el tipo en PhotoShop es un dolor, en general.

Una posible solución podría ser utilizar el método de suavizado "nítido" y establecer un brillo interno de profundidad 0 en la capa de texto:

Para esta muestra utilicé color blanco, 85% de opacidad, modo de mezcla "pantalla", 0 estrangulador, tamaño 0. No es tan bueno como el tipo claro de Ms, pero parece menos atrevido ...

(primera línea = sin suavizado, última línea = suavizado agudo sin brillo interno)