Categorias: Tutoriais

PSD para WordPress, para Designers

Vez ou outra recebemos emails de Designers que estão começando a trabalhar com design para web e não sabem o certo como deve ser feito um PSD. Então esse post é para ajudar em relação a alguns detalhes sobre como deve ser feito, seja para WordPress, Blogger ou apenas para um HTML e CSS.

O design pode ser feito como quiser. Não dizemos que isso ou aquilo não deve ser feito para não limitar a criatividade do designer. Mas existe algumas coisas que podem ajudar o trabalho ser concluído mais rápido, sem perder tempo.

Organização

Essa parte é a que considero principal. Um PSD organizado facilita muito a vida de todos envolvidos no projeto.

Quando você cria um PSD, várias camadas vão se acumulando no Photoshop, chega uma hora que nem você que está criando sabe qual daquelas camadas é o ícone do Facebook ou onde está aquela divisória de post.

O ideal é você renomear as camadas, e se possível, crie pastas para algumas. Fica mais fácil encontrar cada item dessa forma do que quando tem Layer 1, Layer 2, Layer 3Layer 200.
Por exemplo, para um blog, você pode montar o design no Photoshop separando as camadas do topo, em uma pasta chamada “topo” ou “cabeçalho”. Para as camadas de um post, você cria uma pasta “post”, para a lateral do blog você cria uma com “lateral” ou “sidebar”.
Não é necessário renomear exatamente todas as camadas, se você tiver uma pasta com apenas 3 camadas, por exemplo, não precisa necessariamente renomeá-las, mas dê nome à pasta.

Outro detalhe, evite deixar camadas ocultas que não fazem parte do design. Quando você estava criando pode ter feito algumas coisas e depois mudado de ideia, mas esqueceu de excluir aquela camada. Isso pode confundir quem está fazendo o código, alguns casos é óbvio que aquilo não faz parte do design, mas em outros, pode haver dúvidas se aquilo é pra ser usado no mouse hover, por exemplo.

E isso não é frescura. Pra fazer um PSD para WordPress (ou outra plataforma), é necessário desmontar todo o arquivo para só depois começar a criar o código. Se não sabe qual daquelas 200 camadas é a logo, complica a vida e o trabalho vai levar mais tempo pra ficar pronto que você imaginava.

Além disso, se você está ainda na fase de criação pra cliente aprovar, o cliente pode mudar de ideia em relação a cor ou algum outro detalhe e você precisará editar, se o PSD está organizado, você vai direto na camada que precisa e faz a alteração necessária. Sem perda de tempo.

Exemplo

psd-to-wp-01

A imagem acima é referente ao PSD do Pequenina Vanilla, design do xCake, um dos nossos parceiros que recomendo muito para quem procura um design totalmente personalizado, e programado por nós.

O PSD tem as camadas organizadas por pastas, e algumas pastas dentro de pastas, nomeadas. O xCake também costuma usar cores em algumas camadas, pra facilitar por exemplo saber que aquela camada é referente ao mouse hover, ajuda bastante, as vezes a camada oculta pode passar despercebida e só sabemos dela quando terminamos todo o projeto.

Também nos enviaram um PSD separado com todos os os efeitos de mouse hover, já que eram vários detalhes.
Se o PSD não tiver muitos detalhes, não precisa criar um PSD só pra isso, pode fazer pastas/camadas ocultas (e nomeadas).

Além disso, foi feito um PSD para as páginas diferentes. Um para a página de uma categoria que mostra os posts diferente da página inicial, um para a página do post com os comentários mostrando como deveria ser feito os comentários e o formulário, e foi feito um PSD para cada página interna que tivesse algo diferente, como a página de arquivo.

E como era pra fazer as flores do topo se movimentar de acordo com o scroll do navegador, foi colocado cores nas camadas pra dar ordem nas flores. Assim nos passaram “flores na cor x movimentam primeiro”, “flores na cor y movimentam em segundo”…
Se não tivessem feito isso, teríamos feito apenas as flores como uma imagem simples no topo sem movimento nenhum.

PSD to WP

Um outro detalhe importante, se você quiser algo diferente como o blockquote (caixa de citação em um post) ou imagem com legenda diferenciado, precisa ter no PSD. Quando vamos criar o código fazemos da forma mais simples se não tiver no PSD.

Tamanhos

Essa é a maior dúvida que a maioria tem.
Na verdade o tamanho do PSD é o tamanho que você quiser. Só precisa saber que não é a mesma coisa que design para impressão.

Por exemplo, para web não precisa ser 300dpi. É recomendado 72dpi.

O tamanho, se considerar em pixels é mais fácil e você pode usar como base a resolução do seu monitor, ou pode por exemplo usar o Google Analytics pra saber qual resolução de tela é mais usada pelos visitantes daquele site e fazer o design para aquela resolução.

Recomendo considerar uns 24 pixels a barra de rolagem vertical. Por exemplo, se fizer para resolução de 1024×768, o design deverá ter no máximo 1000 pixels de largura. A altura pode ser qualquer uma.

Note que, essa largura é referente apenas a parte central do site ou blog.
No caso de um blog, você considera a largura dos posts + largura da lateral + largura do espaço entre o post e a lateral.
O fundo pode ter qualquer largura. Se quiser imagem no topo ocupando 100% da tela, ou um menu com fundo 100%… independente da resolução, pode fazer sem problemas.

Quando nós criamos um PSD, se for para 1024×768, fazemos com uns 1300 pixels de largura para que o cliente possa ver como será o fundo da página, mas a parte central deixamos dentro dos 1000 pixels. Para determinar isso, usamos a régua no Photoshop.

Caso você esteja fazendo o design responsivo, recomendo uns 300 a 320 pixels de largura para smartphones, e uns 720 a 768 pixels de largura para tablets.
Se quiser ter uma ideia melhor dos tamanhos para os dispositivos, esse site tem uma tabela (considere os valores em CSS width e CSS height).*
*O site que comentei que tem a tabela com os tamanhos dos dispositivos, está com problemas para acessar. Quando encontrar outro para referência, volto aqui para compartilhar.

Patterns

Se seu design possui um pattern diferenciado no fundo (aquelas imagens de fundo que se repete toda vida formando uma só), o ideal é que seja enviado esse pattern já cortado em png transparente (se for o caso) ou jpg. Tem alguns patterns que são muito complicados de fazer esse corte. Você que está criando, possivelmente tem o pattern pronto ou o criou, então fica mais fácil que o programador fazer isso.

Porque não usa a imagem como uma só? Porque em muitos casos essas imagens de fundo, grandes, ficam muito pesadas para carregar quando está abrindo a página. Então se é uma imagem que fica repetindo, fica muito mais leve o carregamento da página ter ela apenas naquele tamanho e fazer repetir com o CSS.

Uma outra coisa que pode ajudar, é enviar o favicon (aquele ícone referente a página que aparece ao lado do endereço dela no navegador), se tiver. Assim já é inserido no código quando for criado.

Fontes

Hoje é bastante comum fontes diferentes no design. Se é o seu caso, é necessário enviar a fonte junto com o PSD, pois existem várias fontes, é difícil o programador ter todas elas, e é necessário a fonte para convertê-la para os formatos que cada navegador aceita, e chamar o arquivo no código.

Recomendamos Google Fonts e Font Squirrel para fazer download de fontes. Eles possuem fontes free e o Font Squirrel ainda tem opção pra download webfont kit pra quase todas as fontes.

Verifique sempre os direitos autorais das fontes para não ter problemas depois.
Fizemos um post falando de fontes para sites e blogs.

Enviando o PSD

Para enviar o PSD recomendamos que compacte o arquivo em zip e salve ele no Dropbox ou Box por exemplo, e depois compartilhe o link com quem vai programar. Assim o arquivo fica menos pesado e não tem problemas com email que não suporta arquivo grande.

Concluindo

É basicamente organização o ideal para fazer um PSD para a programação. E tudo o que você quiser precisa estar no PSD. O que não tem no PSD é usado o básico ou não é feito.

O tamanho você escolhe de acordo com cada projeto, pois cada caso é um caso.

E enviar as fontes e os patterns agiliza o trabalho e o programador não precisa ficar lotando a caixa de entrada do seu email pedindo coisas.

Agora é só criar e depois entre em contato conosco para um orçamento.