O texto na minha imagem do Photoshop parece "embaçado"

9

Estou criando um cabeçalho de site no Photoshop CS5, no entanto, quando olho para ele, o texto parece muito desfocado e não faço ideia do porquê.

Eu uso a predefinição da Web. O que você recomenda para obter os melhores e mais nítidos resultados?

Aqui está a maquete atual:

Cabeçalho

adobe-photoshop website-design cs5 Jeff
fonte
você tentou ampliar uma imagem rasterizada? Isso geralmente leva a embaçamento. Em uma nota lateral, para varredura versus vetor, consulte por exemplo: graphicdesign.stackexchange.com/questions/260/…
Jari Keinänen
@koiyu - As camadas Estou mais preocupado são as camadas de texto, e eu não rasterizar aqueles
Jeff
(oh, eu estava olhando a curva em torno de "xSky") O Photoshop aplica anti-aliasing ao texto por padrão e a configuração pode não atender às suas necessidades atuais. Há exemplos em graphicdesign.stackexchange.com/questions/1177/... (embora este não responder diretamente sua pergunta)
Jari Keinänen
Obrigado por este post, exatamente o que eu precisava para me ajudar com o meu texto embaçada, impressionante ajuda claro :)

Respostas:

14

Por padrão, o Photoshop aplica anti-aliasing nas camadas de texto. Alex forneceu uma boa comparação em outra pergunta :

comparação

As opções de anti-aliasing estão disponíveis na barra de ferramentas e na Characterjanela:

opções de anti-aliasing

Nota: se você planeja usar as camadas de texto como texto normal (HTML) no produto final, os navegadores provavelmente renderizarão o texto de maneira diferente do Photoshop. Mais informações sobre esse assunto podem ser encontradas na mesma pergunta "Fonte (anti) aliasing no Photoshop" mencionada.

Jari Keinänen
fonte
Então eu acho que é o Anti Aliasing que está fazendo isso? De que outra forma posso obter texto em negrito? :)
Jeff
Você pode usar uma versão mais ousada da fonte (se disponível), que pode ser escolhida no menu suspenso ao lado da família de fontes. OU você pode usar o falso do Photoshop em negrito, que é ativado pressionando o botão T (próximo ao botão T ). OU você pode adicionar um efeito de camada, por exemplo, um traçado, para tornar o texto mais ousado.
Jari Keinänen
2
Além disso, devo acrescentar, esse é um dos motivos pelos quais Imagens de texto não é uma boa ideia. O texto real pode ser renderizado da maneira mais desejável pelo cliente.
mattdm
4

Verifique se os atributos heighte width(ou CSS) da sua imgtag correspondem ao tamanho real da imagem. Caso contrário, ele será redimensionado pelo navegador da web, e muitos navegadores farão isso de maneira feia. Mesmo aqueles que o fazem relativamente bem podem tornar a imagem um pouco embaçada.

Se você quiser ter certeza de que está correto, mantenha os pixels 1: 1.

mattdm
fonte
O problema é que, no próprio Photoshop, parece impreciso. Como faço para "os pixels 1: 1"?
25411 Jeff
@ Jeff "manter os pixels 1: 1" é equivalente a olhar para a imagem com 100% de zoom.
Jari Keinänen
@koiyu - Ok, eu já tenho isso. :) #
25411 Jeff
1

Eu não exibia texto como uma imagem, pois isso leva a problemas de acessibilidade e mecanismo de pesquisa.

No entanto, se você deseja exibir um texto como imagem, as imagens png ou gif oferecem melhores resultados do que as imagens jpg devido à compactação jpeg. Mesmo que você não comprima sua imagem, um navegador como o Opera mobile ou um 'acelerador' da Internet podem.

jeroen
fonte
Sempre use PNG, se afastou do JPEG há muito tempo: P
Jeff
1

Eu faria o texto como um arquivo PNG transparente para uma melhor resolução. Outra alternativa é usar o sIFR para o estilo e o SEO. O sIFR basicamente incorpora a fonte como Flash, mas é 100% amigável aos mecanismos de pesquisa. Veja alguns exemplos em, por exemplo, 3d-photomontage.com .

Tony Tan
fonte
1

Devo dizer que não há absolutamente nenhuma necessidade de usar texto de imagem em seu design. Evite usar fontes que não sejam da Web para a cópia do corpo. -Eu sei que eles ficam ótimos no design, mas você tem mais problemas em HTML do que vale a pena -

Basta selecionar 'Nenhum' nas opções de anti-aliasing no PS, se você não quiser desfocar o texto. A versão HTML sempre renderiza o texto de maneira diferente, dependendo do sistema operacional ou do navegador, portanto, não há muito o que você possa fazer.

Dê uma olhada nisso também, ele deve ajudá-lo mais a resolver problemas de renderização de texto em seu HTML, em vez de PS

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Eu sempre desenho com a opção antialiasing 'Crisp' selecionada e ciente do fato de que o texto em HTML ficará diferente de qualquer maneira!

Sahbas Has
fonte