Layout Elegante

Olá, nesse tutorial, que tirei do site Monster Tuts, eu traduzi (livrementente) é ensinado a fazer um bonito Layout de página que pode ser usado em várias páginas com estilos diferentes, fique a vontade para testar as cores e estilos que você quiser, o resultado é ótimo e bem amplo.

Passo 1.

Crie no photoshop um arquivo com o fundo transparente nas seguintes medidas: 1024 x 768 px

Passo 2.

Crie um novo Grupo (Layer>New>Group) Nomeie o Grupo como Background e crie uma layer no grupo com o nome Background.

Passo 3.

Preencha o fundo com a cor Preta e vá para o Modo de Mesclagem e use as configuraões a seguir (Layer>Layer Style>Blending Options)

A Pattern é chamada de Washed WaterColour Paper e será encontrada na seção Artistic Surfaces.

Não se esqueça de mudar a opacidade para 5%

Passo 4.

Agora selecione o Retângulo arredondado com o Radius configurado para 10px e com a cor #3a3a3a crie um grande retangulo no meio mas tenha certeza que você esteja fazendo isso em uma nova layer chamada content_area_bg.

Passo 5.

Agora faremos o cabeçalho, eu usarei uma imagem de natureza (fique a vontade para escolher o que você quiser), mas antes crie um novo grupo e chame-o de Header e se usar uma imagem nomeie a layer como header_image

Passo 6.

Adicione o nome do site e o logo ou mensage que quiser.

Passo 7.

Crie um novo grupo chamado Navigation, Aqui é onde iremos colocar todos os botões e dentro desse gurpo crie um novo chamado Home.

Passo 8.

Dentro do grupo Home crie uma nova layer e usando a ferramenta retangulo, crie um retangulo que vá entre a imagem do topo e a área de conteúdo, então vá em Opções de mesclagem e use as configurações a seguir. (Layer>Layer Style>Blending Options)

Passo 9.

Adicione um titulo para um botão na cor (#ffffff) e um subtítulo na cor (#444444)

Passo 10.

Agora duplique e crie todos os outros botões.

Passp 11.

Se você quiser adicionar um efeito aos botões simplesmente use na ferramenta gradiente a opção reverse (Layer>Layer Style>Blending options> gradient overlay)

Passo 12.

Agora é a vez da área do conteúdo, crie um novo grupo nomeando Left e então um novo grupo dentro, nomeando area_1. Agora você podera alterar o tamanho das áreas pois tudo depende do conteudo que você irá adicionar aqui, eu irei adicionar 3 áreas pequenas.

Passo 13.

Para fazer um pequeno conteúdo selecione a ferramente Retângulo arredondado e faça um retângulo estreito então vá para as opções de mesclagem e siga as configurações abaixo. (Layer>Layer Style>Blending options)

Passo 14.

Agora você pode adicionar qualquer conteúdo que quiser.

Passo 15.

Agora faremos uma nova area abaixo do cabeçalho, crie um novo grupo chamado area_2. Usando a ferramenta de retangulo, fala um retangulo um pouco mais estreito que o anterior e nomeie como area_1 então vá para as opções de mesclagem e use as configurações abaixo. (Layer>Layer Style>Blending options)

Passo 16.

Agora você pode adicionar algo que você queira dizer, ou uma imagem, sei lá, aqui faça o que você quiser.

Passo 17.

Agora criaremos a área de inicio selecione o retângulo arredondado e faça um retângulo branco que cubra a maioria da área do conteúdo.

Então vá para as opções de mesclagem e use as configurações abaixo:

Passo 18.

Agora no cabeçalho fala um longo retângulo arredondado e use as configurações abaixo no Modo de Mesclagem, (Layer>Layer Style>Blending options)

Passo 19.

É isso :

Se vocês gostaram por favor comentem, e se pedirem colocarei muito mais tutoriais de Web Design.

o/