Publicado em 12 de set.

Fazendo Layouts no PS

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img338.imageshack.us/img338/2040/38209167.png&key=52578885aeb99495f69d9793f1bcf76e2f343b0b47b4e2c99931d112e8cae407" alt="Imagem Postada" />

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:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img16.imageshack.us/img16/1653/84232547.png&key=0d5c68ae50c29ba10a9c838871e759138e2a4024eb041de368b68c787d8cac15" alt="Imagem Postada" />

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

ex: Topo >> Banner >> Logo.

Meu topo ficou assim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img17.imageshack.us/img17/7097/33136474.png&key=953190455c9f4a1eb5e85a9d2cb91e0e612663cb4cb99b6058afd3575f4d01f0" alt="Imagem Postada" />

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...

/applications/core/interface/imageproxy/imageproxy.php?img=http://img170.imageshack.us/img170/451/18460418.png&key=22daa12478ef2282087ccf416d50b746878d914d11320cc21959de8e8444333b" alt="Imagem Postada" />

Meu fim:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img186.imageshack.us/img186/6065/43629807.png&key=0c2dde19dd878c7087cfd851ff400ca4157b920950029aa3477560a0220b9f44" alt="Imagem Postada" />

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

/applications/core/interface/imageproxy/imageproxy.php?img=http://img182.imageshack.us/img182/6113/31768019.png&key=31f36087996e5f386a8307e08e36a10337fcd3cde1b4ade18b1295d6a0ee4ac3" alt="Imagem Postada" />

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...

/applications/core/interface/imageproxy/imageproxy.php?img=http://img171.imageshack.us/img171/4136/47634589.png&key=ca8491889ee3e0d92034561296177fe8015d1b747f33efc0a7990cdcea40ddfa" alt="Imagem Postada" />

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

/applications/core/interface/imageproxy/imageproxy.php?img=http://img10.imageshack.us/img10/9123/97222517.png&key=4771c7693434e106bdd427c66b1565b9552f100f7acd9ceaaa183e3ce1619be6" alt="Imagem Postada" />

Vocês vão ver esta tela:

/applications/core/interface/imageproxy/imageproxy.php?img=http://img186.imageshack.us/img186/9192/54297795.png&key=5d3c5add2085985eff4f772288196070dd3775a27bec57447240a185c773958b" alt="Imagem Postada" />

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.

/applications/core/interface/imageproxy/imageproxy.php?img=http://img186.imageshack.us/img186/3463/84648917.png&key=6305bbacdf04c96356957d18617edf0c8421dcbb4ae179c8bf101ed154a2f193" alt="Imagem Postada" />

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..