GarotasCPBr

Existem muitos iniciantes, principalmente estudantes amadores de design, que ainda tem dúvida em como passar a idéia que tiveram para o código. Muitos aprendem a manipular – e muito bem – ferramentas como Photoshop ou o Gimp. Mas a maioria ainda tem dúvidas em como transformar aquele layout incrível em CSS e html.
Então… eu posso lhes ajudar.
Vamos lá.

Você tem um PSD. Nesse arquivo você organizou o seu site em background, cabeçalho, rodapé, conteúdo, destaques, botões, links, menus, sidebar (aquelas colunas laterais), etc. Antes de tudo, você tem que organizar todos esses elementos em camadas, unidas por pastinhas, cada uma com um nome bem definido.

Aprenda aqui a organizar suas camadas (layers) no Photoshop e no Gimp:
Camadas no Photoshop
Múltiplas camadas no Gimp

Com tudo isso organizadinho, você deve salvar esse arquivo em formato web. Desse jeito, todos esses elementos do seu site serão transformados em imagens. Se você está usando outro tipo de editor de imagem, que  não permita que organize as camadas dessa forma, meu amigo, eu vou ter que lher dar uma notícia: vocÊ vai precisar recortar e salvar uma a uma. É um trabalho chato, mas vale a pena.
Ou você pode passar a usar os sofwtares indicados nesse post.

Aqui você pode ver como salvar um psd em formato web e como utilizá-lo.

Depois disso, você faz o esqueleto do seu html.
No meu caso, depois de um tempo de prática, eu passei a fazer o CSS antes, definindo a centralização do conteúdo principal do site, a largura dos elementos, o estilo dos links, o mouse hover, etc. O bom de se guiar por uma imagem de um arquivo aberto é que você tem acesso ao nome das fontes usadas, e pode inseri-la no css.

Saiba aqui como inserir fontes não-padrão com o atributo @font-face.
Veja aqui um exemplo de css e html simples para baixar e fuçar

Posso garantir que você vai aprender muito ao longo do processo. O negócio é ir experimentando, testando. Você vai gastar um bocado de tempo nisso, com certeza, mas vai valer muito a pena no futuro. Com o tempo vem a agilidade e o know-how, que são ingredientes importantíssimos para o webdesigner de hoje se manter bem no mercado e de acordo com os prazos.

É importante saber que nada cai do céu. A internet está cheia de informações e tutoriais aí para isso, basta correr atrás e ter um pouco de paciência para testar tudo. Testar! Essa é a chave.

Estou planejando mostrar, de um jeito mais prático, como inserir programação – mais especificadamente php – dentro do seu html. É uma lição valiosa para quem pretende produzir temas para os cms mais presentes na web: WordPress, Joomla, Drupal… Só aguardar os próximos posts.
;D

Mais links úteis:

Vocês sabe salvar imagens para a web?

Layout CSS Passo a Passo

960 grid system

Criando layouts no Inkscape

Curso livre de arquitetura da Informação

Tweet