(Anti) alias de fonte no Photoshop

Estou usando o Photoshop para criar sites e sempre que comparo um design de photoshop com a visualização ao vivo do navegador, as fontes parecem ser renderizadas de maneira diferente.

Basicamente, qualquer método anti-aliasing que eu escolher no photoshop, o texto sempre dá a impressão de texto em negrito . Por isso, sou sempre forçado a desativar o antialiasing (para texto normal de 12px / 14px).

Existe um método para obter o mesmo tipo de renderização de fonte no Photoshop como o que o Windows usa com cleartype?

Caso contrário, existem fontes que parecem melhores que Arial quando o anti-aliasing está desativado?

Há duas razões pelas quais o texto do ClearType é tão nítido.

1. ele usa renderização de subpixel . Eu não acho que o Photoshop suporta isso.
2. usa dicas agressivas para ajustar linhas na grade de pixels

Você pode digitar seu texto no bloco de notas, capturá-lo com uma ferramenta conveniente e colá-lo no Photoshop com o modo de mesclagem Multiplicar (porque é texto em preto sobre fundo branco). Mas isso não é conveniente. Editar: também pode ser quase impossível fazer com qualquer cor de primeiro plano que não seja o preto.

Esse cara descreveu um método para fazer a renderização manual de subpixel e, aos meus olhos, melhora a nitidez da fonte, tornando-a mais próxima do ClearType. Mas ele ainda usa as dicas do Photoshop, por isso não é tão nítido quanto o ClearType.

Você realmente precisa da renderização no estilo ClearType no Photoshop? Se você exportar quaisquer gráficos que contenham texto para uso em seu design da web, eles não deverão conter renderização de subpixel, porque não é apropriado para alguns monitores (CRT, telefone girado). E se você não está exportando texto, mas apenas olhando para ele, a renderização do Photoshop parece boa.

O Photoshop não é um programa de web design. Para obter texto com a mesma aparência em um navegador e em um gráfico (jpg, gif etc.), você deve usar a mesma fonte nos dois programas. Algumas fontes não são usadas por todos os navegadores.

Dependendo do tamanho do seu texto, uma boa fonte de tamanho médio pode ser Tahoma, Helvetica, Trebuchet ou Georgia. Confira este site para algumas boas idéias: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

As fontes maiores são onde começa a importar o anti-aliasing.

Se você estiver tentando mesclar o texto com o texto de uma página, sugiro usar o posicionamento CSS para atingir seus objetivos. O CSS permite que você coloque texto da sua página da web sobre as imagens e usa o posicionamento relativo e absoluto para renderizar a página exatamente como você deseja. Aqui está um exemplo e tutorial: http://css-tricks.com/text-blocks-over-image/

Infelizmente, o Photoshop não suporta nenhum tipo de renderização de subpixel. Nem qualquer outro software da Adobe, com exceção do Dreamweaver . (Bem, não é exatamente a tecnologia do Dreamweaver, pois apenas renderiza o HTML e passa o texto para o sistema operacional ser renderizado.)

O fluxo de trabalho sugerido pode ser que você crie e corte seu design no Photoshop e abra-o no Dreamweaver. Se o design precisar de correções adicionais, você poderá abrir o arquivo simultaneamente no Photoshop, faça as alterações, salve e atualize a exibição no Dreamweaver. Adicione a cópia final real no Dreamweaver. Você também pode substituir o Photoshop pelo Fireworks; ou até comece a wireframing no Fireworks → continue no Photoshop → publique no Dreamweaver. (Fica claro por que as edições do Creative Suite geralmente são compradas em pacotes, não é?)

Se o design parecer diferente na visualização do Dreamweaver e nos navegadores, isso é outra questão infeliz (e não estou falando apenas da tipografia, mas da renderização como um todo). Quanto mais cedo você puder subir do Photoshop para uma demonstração ao vivo - seja através do Dreamweaver ou não -, melhor. I fazer desejo Photoshop teria poderes de renderização subpixel (mas ao mesmo tempo esperança não será introduzido em CS6, ou pelo menos esperança eu vou ser rico até então)!

Apenas uma observação: o ClearType está protegido com 10 ou mais patentes, portanto, exatamente a mesma renderização não é provável. Também é importante notar que o OS X usa renderização diferente (Quartz) por padrão e as interfaces gráficas nas distribuições Linux.

Design em HTML e CSS. Se você DEVE devolvê-lo ao modelo do PhotoShop, faça uma captura de tela do navegador e traga-o de volta ao documento do PhotoShop.

Definir o tipo no PhotoShop é uma dor, em geral.

Uma possível solução alternativa pode ser usar o método de suavização de borda "nítido" e definir um brilho interno com profundidade 0 na camada de texto:

Para esta amostra, usei cor branca, 85% de opacidade, modo de mesclagem "tela", 0 estrangulamento, 0 tamanho. Não é tão bom quanto o Ms clear-type, mas parece menos ousado ...

(primeira linha = sem suavização de borda, última linha = suavização de borda acentuada sem o brilho interno)