Fazendo Layouts no PS

[lcsaO 0]

Bom pessoal, meu nome é Lucas, e vi que tem muitas pessoas que tem duvidas de como fazer um layout no PS, e como é bem simples, resolvi postar um método aqui...e leiam com atenção para não cometer erros...

 

1º - Faça um novo documento em 700x500px, ou o que você achar melhor...

 

2º - Bom pessoal, no começo é demorado, e eu não tenho o que falar, usem a criatividade, leia um bom livro sobre cores...simplesmente faça um layout...

OBS: Não faça o background nesse arquivo!

 

Eu fiz um bem simples e ficou assim:

 

 

3º - Agora vem a parte mais complicada e muita gente se atrapalha, primeiro selecione a ferramenta Slice Tool (letra K).

Agora olhe pro seu layout e se pergunte, onde é o topo (banner, etc), o meio (conteúdo, etc), e o fim (rodapé, direitos, etc). Divida ele nessas 3 partes..

 

No meu não tem fim (rodapé), mas dividi como se tivesse:

 

 

 

4º - Agora, nessas 3 partes divididas, você vai continuar cortando..

 

ex: Topo >> Banner >> Logo.

 

 

Meu topo ficou assim:

 

 

Meu meio:

Olhem o que seria o menu, e o conteudo, tem 2 divisões, isto é para o texto não ficar no cantinho da imagem, ficar mais no meio dela...e também mudei as cores para preto, porque azul não estava dando para enxergar as linhas do slice...

 

 

Meu fim:

 

 

 

5º - Ok, agora para tornar seu layout mais organizado, selecione a ferramenta Slice Select Tool:

 

 

Isto é opcional, mas se quiserem fazer, é só clicar em cima do slide 2x, e trocar seu nome, que pode estar assim por exemplo: meudocumento_01.jpg...no slice 2 será: meudocumento_02.jpg, e assim por diante...

 

 

 

6º - Agora, vamos finalizar...Depois de ter feito toda a repartição do seu layout..vá em File >> Save for Web.

 

 

 

Vocês vão ver esta tela:

 

 

 

Agora, pressione CTRL + A, para selecionar todos os slices, e escolha um formato de imagem, eu prefiro PNG-24, e manter selecionado Transparency, e Interlaced.

 

 

 

Depois procure por uma setinha e vá em Edit Output Settings (veja imagem abaixo)...

 

http://img34.imageshack.us/img34/7211/33980985.png

 

 

Na primeira tela, configure como na imagem abaixo, e depois clique em next:

 

http://img182.imageshack.us/img182/5461/58076978.png

 

Na segunda tela, configure assim, e clique em next:

 

http://img406.imageshack.us/img406/1907/33779641.png

 

Na terceira tela, selecione a imagem de fundo, e a cor, e dê next:

 

http://img182.imageshack.us/img182/9969/40677071.png

 

Na ultima tela configure como a imagem abaixo, e clique em OK:

 

http://img186.imageshack.us/img186/332/14746458.png

 

 

6º - Agora só clicar em Save, escolher o lugar onde queira salvar..

Não esqueça de selecionar HTML and Images (*.html)

 

http://img156.imageshack.us/img156/8659/29314401.png

 

 

7º - Agora só editar no dreamweaver, etc...se quiserem centralizar o layout, segue o link do tutorial:

http://maujor.com/dicas/pg_centrada.php

http://aprendacss.wordpress.com/2008/06/28/centralizar-layout-na-horizontal-e-na-vertical/

http://www.oficinadanet.com.br/artigo/444/centralizar_layout

http://www.pinceladasdaweb.com.br/blog/2006/06/05/layout-centralizado-com-css/

http://www.tableless.com.br/video-tutorial-7-centralizando-o-layout-horizontalmente

 

 

Bom é isso ai pessoal, espero ter ajudado, o meu layout, finalizado, sem centralizar, etc...ficou assim:

 

http://img253.imageshack.us/img253/8343/84596295.png

 

 

Fonte: lcsaO

[JohwMatos 4]

Valeu!

[Jackson Dias 68]

Simples mais legal.

Uma ótima base para pegar o "jeito" da técnica.

[Pantoja 5]

Legal o tuto, ajudará aos iniciantes na área.

 

Abração