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 :)

14

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

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