Eu acho que um título mais adequado poderia ser 'o Photoshop ainda é uma ferramenta apropriada para projetar tipografia na web?' Mas isso não tem o apelo dramático do acima.
Como muitos de vocês, sempre usei o Photoshop para criar composições de modelos dos meus designs. Por tanto tempo quanto me lembro, tem sido o padrão da indústria e o software de escolha para a maioria dos designers com quem trabalhei. Eu passei semanas projetando layouts de pixels perfeitos, agrupando elementos em pastas hierárquicas e rotulando todas as minhas camadas para fazer a transição do belo mock up para o código o mais suave possível.
Eu estaria cheio de entusiasmo, energia e entusiasmo explicando meus projetos para um desenvolvedor, ligando e desligando estados de camadas para tentar ilustrar minha visão através do Photoshop, mas sempre ficaria um pouco desapontado, pois meu design brilhante e polido foi transformado no que eu veria no navegador. Claro, seria parecido com o meu design ... E eu meio que reconheci os tipos de letra, mas faltava aquela nitidez que eu me lembrava das minhas composições. Não era que os desenvolvedores não o tivessem codificado bem, mais que a tipografia que eu criara no Photoshop não havia sido traduzida em código.
Ao escolher fontes Há poucas coisas mais importantes do que se uma fonte é facilmente legível ou não. No Photoshop, isso não é um problema, porque tudo parece ótimo. Não importa qual fonte você usa, em que tamanho ou peso (dentro da razão), pois irá renderizar perfeitamente na tela.
Infelizmente, isso não se estende ao navegador. Muitas vezes, ao visualizar meu design no navegador, os relacionamentos entre os elementos e o tipo estavam errados. Os tamanhos de fonte e alturas de linha que eu atribuí aos estilos na composição do meu photoshop não seriam os mesmos do navegador. Se eu tivesse designado uma margem de 20 pixels acima do título em meus designs, essa distância pode ter mudado, já que a altura da linha do cabeçalho teria um efeito no tamanho da margem, algo que não aconteceria no Photoshop. Eu teria então que começar o processo longo e tedioso dos 'ajustes de design' temidos.
Confie em mim, não é apenas o desenvolvedor que se esquiva da ideia de um designer sentado ao lado deles pedindo-lhes para "aumentar a altura da linha de cópia do corpo em dois pixels", fazendo com que o desenvolvedor faça o CSS mudar e se comprometer…. Entrar. 'Na verdade, 1 pixel menor'… Digite. 'Talvez tenha sido melhor como foi'. Este tipo de ajustes do CSS pouco a pouco para ver os resultados em tempo real através do navegador é demorado e não é propício para a criatividade. Os desenvolvedores rapidamente se cansam de passar o dia repetidamente mudando o que eles veem como o menor dos detalhes que não farão diferença, e os designers não são capazes de experimentar mudando rapidamente tipos de letra e estilos para aqueles que renderizam melhor no navegador.
Para designers que entendem de CSS, você pode usar ferramentas como Firebug para efetivamente fazer seus próprios ajustes de design no navegador, anotando todas as alterações de CSS em um documento que você pode passar para um desenvolvedor implementar. Isso é efetivamente o mesmo que sentar com um desenvolvedor e fazer alterações no CSS, mas muito menos tedioso para o desenvolvedor e também permitir que o designer experimente mais com tamanhos e estilos antes de tomar uma decisão. Embora seja uma boa ferramenta para inspecionar e alterar partes do HTML e do CSS, você perderá todas as alterações feitas assim que o navegador for atualizado, o que pode ser muito irritante se você tiver alterado vários elementos e não anotado todos os seus ajustes.
Você pode usar o Plug-in do Firediff para salvar um registro de todas as alterações feitas no Firebug, o que é excelente, pois evita que você tenha que anotar cada alteração em uma planilha separada para mais tarde. O maior problema com esse método é quando você começa a introduzir fontes da Web na equação, pois todas as fontes escolhidas devem ser instaladas no kit de tipo ou elas não aparecerão no navegador. Isso torna as coisas muito mais difíceis e menos livres para experimentar facilmente com fontes diferentes, já que você não pode testar fontes rapidamente.
Serviços como Typecast É muito mais fácil para os designers trabalharem com fontes da web e eu faço toda a minha tipografia para a web usando-a. Ele permite que você crie mock-ups tipográficos (como você faria no Photoshop) usando sua interface visual para atribuir fontes, estilos, pesos, cores, altura da linha, margem, preenchimento e muito mais para sua tipografia. A melhor coisa sobre o uso do Typecast é que tudo está funcionando no navegador, portanto, você está tomando decisões sobre o tipo exatamente como ele será processado para o usuário. Uma determinada fonte não parece muito quente em 19 pixels? Bata até 20 com um clique de um botão, de volta para 19 antes de finalmente chegar a 18 pixels de tamanho, tudo feito em segundos, em vez de horas sentado com um desenvolvedor.
Você pode usar quaisquer fontes da Web de suas coleções de 23.000 fontes, incluindo fontes do Google, Typekit e muito mais em suas composições, o que torna a experimentação rápida e fácil (elas foram compradas recentemente pela Monotype, que possui Fonts.com e Myfonts, então espere muito mais fontes no caminho em breve). Tipecast, na minha opinião, introduz uma noção de brincadeira de volta à tipografia, pois encoraja você a experimentar variações de fontes, que você pode nunca ter descoberto se elas não estivessem prontamente disponíveis e fossem facilmente intercambiáveis como são.
Outro recurso muito útil do typecast é a capacidade de visualizar e editar o CSS do seu tipo. Você pode adicionar cores e imagens em segundo plano, passar o mouse em estados ou até mesmo transições simplesmente editando o painel CSS. Quando estiver satisfeito com sua criação, você poderá facilmente exportar e salvar o código CSS, que pode ser carregado em seu site ou enviado para um desenvolvedor e, como tudo foi criado no navegador, ele aparecerá exatamente como você pretende.
Photoshop não é o padrão da indústria para nada, e haverá alguns de vocês por aí hiperventilando com o pensamento de largá-lo para projetar no navegador, afinal somos criativos e não codificadores. Bem, abaixe o saco de papel, pois ainda há uma maneira de criar uma bela tipografia usando fontes da Web no Photoshop. Extensis criamos um plug-in que pode ser instalado nas versões CS5 e posteriores do Photoshop que lhe dará acesso a todos os WebINK e Google Web Fonts para usar gratuitamente, diretamente no Photoshop.
Isso significa que você pode usar qualquer uma das fontes da web do WebINK ou do Google em suas composições de design, assim como faria com quaisquer fontes instaladas em seu sistema e elas exibirão aproximadamente o mesmo que devem aparecer no navegador. O plug-in só lhe dará acesso às fontes Web do Google e do Google no momento, mas no lado positivo ele atualizará automaticamente novas fontes à medida que forem adicionadas ao WebINK e à biblioteca de fontes do Google.
Outro plug-in valioso que ajuda a facilitar a transição entre as composições do Photoshop e o CSS compatível com navegador é o plug-in gratuito baseado na nuvem da css3ps.com . Um dos principais motivos que muitos designers trabalham com o Photoshop é o controle que você tem sobre camadas e elementos de forma. Ser capaz de experimentar fácil e rapidamente sombras, brilhos, cores, texturas, cantos arredondados e muito mais é quase uma segunda natureza para a maioria e algo que até designers experientes lutam para replicar exatamente no navegador. Para aqueles, este plug-in é perfeito, pois permite que você crie suas composições da maneira que você conhece melhor, mas, em seguida, permite converter facilmente os estilos da sua forma em CSS3 compatível com o navegador. Esse método é ideal para projetar botões, navegação ou qualquer outra coisa para a qual você tenha estilizado uma forma.
Talvez ainda haja um papel para o Photoshop como uma ferramenta para projetar layouts da Web, mas, no que se refere ao design de tipografia para a Web, aplicativos como o Firebug e o Typecast o superaram. O tempo que leva para atualizar composições estáticas simplesmente não pode ser comparado com a velocidade e a facilidade com que você pode fazer alterações no navegador. Para aqueles de vocês que simplesmente não podem sequer ter a idéia de projetar no navegador, os plug-ins acima devem, pelo menos, dar ao Photoshop o impulso necessário para se manter relevante e ajudar a facilitar a transição.
Você usa o Photoshop para criar sites? O Photoshop está seguindo o caminho do Flash? Deixe-nos saber nos comentários.
Imagem / miniatura em destaque, usa imagem morta via Shutterstock.