Criando layouts no Photoshop Parte 1

Pré-Requisitos

Photoshop CS2

Conteúdo

Tudo bem pessoal? Apesar da falta de tempo para escrever devido a administração do Portal, estou de volta para tentar passar para vocês dicas para criação de layouts de site pelo Photoshop. Iremos durante as próximas semanas criar um layout completo e exporta-lo para html trabalhando somente com DIVS e CSS.
Espero que curtam o trabalho.

Bom para começar iremos criar um novo documento com 778px x 600px. Após iremos criar um quadrado com cantos arredondados. Este quadrado deverá ter 23px por 23px conforme a imagem abaixo. Escolha uma cor de preferência para fazer o preenchimento.

Após iremos duplicar a layer do quadrado acima e deixaremos um espaço duplo entre um quadrado e outro, faça isto até ter 16 quadrados conforme a figura abaixo:

Agora iremos utilizar algumas imagens para criar um efeito legal no nosso layout.

Utilize as imagens abaixo:

Agora voltaremos ao arquivo. Vamos selecionar os quatro primeiros objetos e agruparemos em um só conforme a figura abaixo:

Repita a operação para os outros grupos de quadrados, sempre de 4 em 4.

Agora, iremos inserir a primeira imagem no nosso layout. Após colocaremos ela em cima da layer onde se encontra o nosso primeiro grupo de objetos conforme a figura abaixo.

Vamos colocar a imagem em cima dos quatro primeiros quadrados para criar uma máscara e assim termos um efeito bem legal. Para criar uma máscara clique com o botão direito na layer da imagem e clique em criate clipping mask:

A imagem ficará assim:

Repita a operação para todas as figuras até chegar ao resultado abaixo:

Agora vamos para o passo final desta primeira parte que é a criação de um menu lateral.
Para começar crie um retângulo conforme a figura abaixo (com os cantos arredondados) após vamos preencher ele com a cor #CACACA.

Vamos então colocar uns efeitos nele, para não ficar este cinza chapado.
Para começar vamos colocar um pequeno gradiente.

Trabalhei neste gradiente com um angulo de 51º para dar um efeito mais interessante.
A primeira cor é #A3A0A0, a segunda e a terceira são #CACACA:

Agora vamos inserir o logotipo, no caso deste layout eu inseri o logotipo do MXSTUDIO, mas vocês podem inserir qualquer um.

Vamos criar o menu, escrevam o seguinte texto conforme a imagem abaixo

HOME
SERVIÇOS
CLIENTES
DICAS
LINKS
CONTATO

A cor escolhida foi #143C8F, a fonte SWISS721CNBT e um espaçamento de 24pt entre as palavras.

Para terminar vamos criar um efeito para separar as linhas. Crie um retângulo branco conforme a figura abaixo:

Após vamos colocar uma transparência de 15% no retângulo, copie a operação para todos os itens do menu até chegar ao resultado abaixo:

Segue o PDS para download, espero que vocês tenham gostado. Na próxima etapa estaremos fazendo o corpo do site e a exportação para montagem do arquivo em HTML no Dreamweaver.

Link para o PDS

Abraços e até a próxima.

Autor: Juliano Haussen- Administrador do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.