Fuente (anti)aliasing en Photoshop

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 admita eso.
2. utiliza sugerencias agresivas para encajar líneas en la cuadrícula de píxeles

Puede escribir su texto en el Bloc de notas, capturarlo con alguna herramienta agradable y conveniente 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 realizar la representación manual de subpíxeles y, en mi opinión, mejora la nitidez de la fuente, acercándola a ClearType. Pero aún usa las sugerencias de Photoshop, por lo que no es tan nítido como ClearType.

¿Realmente necesita una representación de estilo ClearType en Photoshop? Si exporta cualquier gráfico que contenga texto para usarlo 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 texto que tenga el mismo aspecto en un navegador que en un gráfico (jpg, gif, etc.), debe utilizar 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. Visite 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á intentando que el texto se fusione con el texto de una página, le sugiero que utilice el posicionamiento CSS para lograr sus objetivos. CSS le permite colocar texto de su página web sobre las imágenes y utiliza el posicionamiento relativo y absoluto para representar la página exactamente como lo desea. Aquí hay un ejemplo y un tutorial: http://css-tricks.com/text-blocks-over-image/

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

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 real final en Dreamweaver. También puede reemplazar Photoshop con Fireworks; o incluso comience a hacer wireframes en Fireworks → continúe en Photoshop → publique a través de Dreamweaver. (Queda claro por qué las ediciones de 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 de la representación en general). Cuanto antes pueda pasar de Photoshop a la demostración en vivo, ya sea a través de Dreamweaver o no, mejor. ¡ Desearía que Photoshop tuviera poderes de representación de subpíxeles (pero al mismo tiempo espero que no se introduzca en CS6, o al menos espero ser rico para entonces)!

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

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

Configurar el tipo en PhotoShop es un fastidio, en general.

Una posible solución podría ser usar 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 fusión "pantalla", 0 estrangulamiento, 0 tamaño. No es tan bueno como Ms clear-type, pero se ve menos audaz...

(primera línea = sin suavizado, última línea = suavizado nítido sin brillo interior)