Neste artigo iremos aprender a criar um Layout ( Design do site ) usando o photoshop, também solicitando links de outros programas freeware.

Para começarmos, crie um documento em branco de medidas 799x600 (é importante usar essas configurações neste tutorial para tentar reproduzi-lo, depois você pode fazer um novo com suas próprias alterações).

Neste Artigo eu Usarei o Photoshop CS2, mas para quem não é acostumado, não possui o Photoshop CS2 Ou é usuário Vista, Existem Programas que podem surtir o mesmo efeito de criação de layout!

"THE GIMP 2.4.5" ( Clique Aqui para download )

Além do GIMP Ser Freeware, Ele também pode ser executado em Windows XP e Vista.

Para começarmos o nosso layout, crie um documento em branco de medidas 799x600 (é importante usar essas configurações neste tutorial para tentar reproduzi-lo, depois você pode fazer um novo com suas próprias alterações).

Clique na imagem para Ampliar

O layout deve ter as seguintes medidas:
Topo: cerca de 20% de todo o layout.
Barra do menu: cerca de 4% de todo o layout.
corpo: cerca de 72% de todo o layout.
Rodapé: cerca de 4% de todo o layout.
No nosso caso, basta seguir a imagem.

(menu e rodapé: 799x22)

Clique na imagem para Ampliar

Começaremos pelo topo de nosso Layout, usando um Degradê (Gradient) suave.

Faça Igual (ou parecido com) a imagem abaixo:

Clique na imagem para Ampliar

O gradient deve ser suave para transmitirmos uma idéia de seriedade e tranqüilidade para o nosso visitante.  Lembre-se: tudo que for feito em um layout deve ser voltado ao público pois dele depende o sucesso ou o desastre de seu site.

O Topo do site deve ser como abaixo, no nosso caso eu usei o exemplo de uma loja de computadores, como podem ver, coloquei a marca da empresa no lado oposto ao do logotipo escrito, isso da a imagem um certo equilíbrio, e para deixar o topo mais sofisticado coloquei atrás do logotipo uma imagem de uma memória RAM com pouca opacidade para que apenas complementasse.

Clique na imagem para ampliar.

Agora, vamos ao menu, a barra feita entre o corpo e o logotipo do nosso site é especialmente separada para isso, abaixo temos um exemplo básico de menu.

Clique na imagem para Ampliar

Um bom menu deve ter tudo que o usuário pode querer de seu site, assim sendo também não deve ter coisas demais, pois isso acaba poluindo o site e confundindo nossos usuários. No menu, os links devem ter um espaço considerável entre si, para, alem de facilitar os cliques dos usuários, facilitar nosso trabalho na hora de dividir os links de nosso site.


O Corpo de nosso site, por enquanto deve ser básico, apenas cores neutras e pouco trabalhadas para nunca perder o ar de seriedade que queremos transmitir, um fundo limpo e com cores sóbrias também transmite a sensação de organização e segurança. A seguir, veremos como trabalharmos nosso corpo do site sem perder a qualidade.

Clique na imagem para Ampliar

O corpo do site é de fundamental importância, pois é com ele que o usuário vai dar de cara ao entrar no site. O mais importante é levar em conta o peso do corpo no site, assim como todos os outros componentes do layout, o corpo deve preservar a velocidade do site que é tão importante, por isso, evite usar gifs muito pesados e longos, prefira imagens pequenas e sóbrias.

Abaixo, temos uma divisão provisória de como será o nosso corpo do texto, essas subdivisões devem ser feitas para se ter uma idéia do que e quanto cada imagem e texto irá ocupar.

Clique na imagem para Ampliar

1 - Espaço para banners e/ou publicidade.
2 - Destaques do site
3 - Destaque ou alguma notócia de importância menor.
4 - Notícia de grande importância, ou nova.
5 - produtos recém lançado.
6 - Produtos recem lançado mas de menor importância.
7 - Notícias diversas ou mais visitadas ou mais procuradas.
8 - Este espaço é relativamente desprezível, pode ou não existir, preencha-o com mais banners de públicidade ou alguma notícia curta, ou propaganda de algum de seus produtos.

Seguindo o esquema pré-definido, teremos mais ou menos esse resultado:

Clique na imagem para Ampliar

Bom, feito o corpo de nosso site, o rodapé, e bem mais simples, apenas use-o para colocar coisas como direitos autorais, etc, caso você não tenha nada disso ou não pretende colocá-los em seu site, simplesmente não use o rodapé, mas mantenha um espaço entre o corpo do texto e o final da página para ficar mais agradável a vizualização.


Usando a Ferramenta Fatia ( Slice Tool ):

Faça divisões como abaixo, dividindo blocos de texto, links, banners de propagandas, menus, logos e rodapé. Nunca sobreponha divisões, pois senão, quando você for criar os links irão estar com problemas.

Clique na imagem para Ampliar

Poucas pessoas sabem, mas, a Ferramenta Fatia ( Slice Tool ), tem uma utilidade fundamental na criação WEB dentro do photoshop, sem ela, isso com certeza não seria possível e se fosse, provavelmente seria muitas vezes mais complicado, a seguir, veremos do que a Ferramenta fatia ( slice tool ) é capaz.

Selecionando a Ferramenta fatia ( slice tool ), clique com o botão direito sobre um dos envelopinhos nos cantos de nossas divisões e clique em: "Opções de editar fatia" ( "Slice Options" ), uma janela como abaixo irá aparecer, eis o significado de cada coisa:

Então temos:

Clique na imagem para Ampliar

Tipo de fatia (Slice type) - Tipo de recorte.
Nome (Name) - Nome de sua página.
URL (URL) - Destino do link desejado.
Destino (Target) - Destino da pagina. ex: _blank.
Texto da mensagem (Message Text) - Ao passar o mouse sobre o link o que você digitar aqui aparecerá em sua barra de status.
Alt Marca (Alt tag) - Quando você passar o mouse sobre alguns links na internet, aparece uma pequena janelinha com um texto, é isso que essa opção faz, o que você digitar aqui, aparecerá desta forma.

Bom, Depois de tudo pronto, vamos ao fim, a hora de salvar. Vá em: Arquivo> Salvar para a web, Quem usa o photoshop em inglês ( File > Salve for web ) e siga o esquema abaixo.

Clique na imagem para ampliar