Como posso fazer com que meu texto do Photoshop apareça na Web?


11

Eu realmente tenho que projetar tudo no Photoshop com o anti-aliasing definido como "none"? Tenho certeza de que existe uma maneira melhor.

Gostaria de ter uma configuração para que, ao escolher um cofre básico da Web (como o Tahoma), no Photoshop, eu possa ver como ele ficará na Web.

Por exemplo: A diferença entre o Tahoma com anti-aliasing definido como "nítido" no Photoshop e como ele é renderizado no Firefox é importante. Parece bom e suave no Photoshop e parece uma porcaria na web.

Existe uma opção anti-aliasing que é melhor começar (que tenha o resultado mais semelhante) ao planejar exibir o conteúdo na Web?


1
A aparência de uma fonte 'na Web' depende inteiramente do navegador, das configurações do navegador, do sistema operacional e das configurações do sistema operacional. Em outras palavras, parece diferente para pessoas diferentes.
DA01 13/06/12

Respostas:


10

A maioria dos sistemas operacionais e navegadores são processados ​​com antialiasing ou sub-pixel antialiasing. O antialiasing de sub-pixel é comum em plataformas de desktop, como Windows (com ClearType) e OS X. O antialiasing monocromático padrão é comum em plataformas móveis, onde a ordem de sub-pixel do dispositivo pode mudar com a orientação do dispositivo e onde a renderização de sub-pixel não é '' Isso é crucial, porque geralmente possuem telas com densidade de pixels mais alta.

A renderização de texto com alias é comum no Windows XP, onde o ClearType está desativado por padrão. O Windows Vista e os mais recentes têm o ClearType ativado por padrão.


A renderização no Photoshop x Windows x OS X x iOS x Android x WebKit x ​​Firefox (Gecko) geralmente são diferentes. Portanto, não há absolutamente nenhuma maneira de criar algo no Photoshop e saber que a renderização do texto será a mesma, a menos que você faça uma captura de tela e a adicione ao documento como uma camada de bitmap.


2
Desde que respondeu a essa pergunta, a Adobe adicionou as opções “Mac” e “Mac LCD” ao Photoshop (mais equivalentes no Windows) que usam a renderização de fonte do sistema. Muitas vezes, é muito próximo ou idêntico ao Safari agora.
Marc Edwards

8

Não. A nova linha de pensamento é evitar o Photoshop para o layout e o design da tipografia e iniciar no navegador o mais cedo possível.

Ao passar para o cliente uma URL real em oposição a uma composição do Photoshop, você evita que as expectativas do cliente sejam frustradas quando o produto final é ligeiramente diferente no navegador de sua escolha em comparação com as composições do Photoshop.

Por fim, é nossa responsabilidade educar o cliente e conscientizá-lo das inevitáveis ​​discrepâncias tipográficas que ocorrem entre navegadores e sistemas operacionais.


1
Na minha empresa, crio projetos e os entrego a um desenvolvedor front-end. Eu nunca toco no código. Com isso dito, preciso de uma solução que não envolva a criação da página da Web para ver como é o texto.
jonn_g

2

No Photoshop CC, adicionamos novos modos de alias para suas fontes. Em vez de "nítido" ou "forte", tente o novo "Mac LCD". Você obterá um design 100% seguro para a web.


1
Não existe "design 100% seguro para a web", uma vez que não existe consistência 100% entre navegadores, fontes e sistemas operacionais.
DA01 27/09/13

1

Resposta curta: Você não pode.

O Photoshop nunca é ideal apenas para saber como seus caracteres serão renderizados fora dele, como também não é ideal para trabalhar com fontes em geral. (Quando eu trabalhava em uma empresa de design / loja de impressão, tudo o que era projetado no PS tinha que ser exportado como PDF pelo mesmo motivo). Depois vem a questão da web, são os navegadores e o sistema operacional que executa esses navegadores. Até agora, até onde eu sei, o OS X é o melhor em termos de renderização de fontes de maneira apropriada, enquanto o Linux fica em segundo e o Windows, por último. A realidade é que todos eles usam algoritmos diferentes para renderizar fontes, e você não terá o mesmo resultado em todos os lugares. Se houvesse uma solução, todos nós mudaríamos para Linux, Macs ou esperamos até a Microsoft ter sucesso na próxima vez com o Windows Metro (desculpe, eu odeio chamá-lo de Windows 8) ou explodir totalmente,

Apenas meus 2 centavos,

Fragmento


0

A meu ver, a renderização em um navegador está entre "Sharp" e "Crisp" do Photoshop em um Mac e entre "Crisp" e "Strong" no Windows. Eu sugiro usar "Crisp" como texto ao vivo para os designers gráficos com quem trabalho. O padrão "Forte" sempre os configura para decepção. ;)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.