Tutorial: Criando layout no Photoshop

Aprenda a criar um layout com efeitos usando o photoshop. O layout criado tem bastante detalhes e requer um bom conhecimento na ferramenta.

Aprenda a criar um layout com efeitos usando o photoshop. O layout criado tem bastante detalhes e requer um bom conhecimento na ferramenta.

Resultado final:

Abra um novo documento com as seguintes características.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/01.gif

Veja que a camada esta com um cadeado… clique duas vezes sobre a camada para tirar este cadeado deixando assim a camada livre para trabalhar-mos.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/02.gif
https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/03.gif

Só por uma questão de organização, renomei a camada para fundo.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/04.gif

Vá em add a layer style e adicione a opção gradient overlay. Aparecerá a seguinte opção.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/05.gif

Clique na parte que está marcada com vermelho. Teremos a seguinte opção já alterada para nosso fundo. ( mude as cores para a 2020e1)

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/06.gif

até aqui teremos o seguinte resultado.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/07.gif

Selecione a ferramenta Rectangle tool (U) e faça um retangulo como mostra a imagem abaixo.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/08.gif

ainda com a ferramenta rectangle tool selecione a opção subctract shape area (subtrair shape)

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/09.gif

e divida o retângulo como mostra a imagem

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/10.gif

tereremos o seguint resultado.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/11.gif

o próximo passo é adicionar uma imagem no retângulo branco que criamos. Selecione uma foto e adicione ao documento…

Foto Download 

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/12.gif

Para deixar a imagem com a mesma forma do retangulo acima, você deve fazer o seguinte. Coloque sua atenção sobre a camada da foto, segure alt e na transição de uma foto para outra de um clique( simplesmente selecione a camada da foto e aperte Ctrl + AZlt + G). Isso vai fazer uma clip layer mask.

camada sem a clip mask

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/13.gif

camada com a clip mask

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/14.gif

Vamos aplicar um tom de laranja na imagem. para isso vá em adjustments > color filter e configure como mostra a imagem abaixo.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/15.gif

resultado

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/17.gif

Baixe o seguinte brush pack 1 e download (rosas) faça mais ou menos como mostra a imagem abaixo ( vou deixar para a ultima etapa)

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/18.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/19.gif

Baixe a Fonte Bahaus. Digite como mostra a imagem. Você pode alterar é claro.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/20.gif

[PG1]
Selecione a palavra pessoal e adicione alguns efeitos em add layer style

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/21.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/22.gif

Configure seu gradient com as seguintes cores…

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/23.gif

Teremos o seguinte resultado.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/24.gif

Tá cansado? Salva e volta depois cara… hehehe vai beber uma água, relaxar no orkut, ou mesmo dar uam volta de bicicleta, faz bem…

Com os brushes que temos ficaremos mais ou menos assim.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/25.gif

Selecione novamente a ferramenta rectangle tool e faça uns pequenos retangulos abaixo da foto. veja a imagem abaixo. O objetivo desta parte é criar o menu.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/26.gif

Adicione mais uma camada de efeitos e vá em gradient overlay.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/27.gif

configure nosso gradiente como mostra a imagem abaixo.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/28.gif

Teremos logo em seguida o seguinte resultado.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/29.gif

Agora faça uma cópia desse retângulo que criamos.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/30.gif

Vá em add alayer style e use os seguintes parametros na cópia do retângulo que criamos

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/31.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/32.gif

Configure seu gradiente como mostra abaixo

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/33.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/34.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/35.gif

Ficaremos com o seguinte resultado.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/36.gif

Faça algumas cópias do nosso retangulo.

Veja na imagem abaixo que todos os retangulos estão alinhados ao retangulo maior que contem a foto o outro alinharemos mais objetos posteriormente.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/37.gif

Dica: Renomei as camada para melhor localizá-las durante o trabalho.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/38.gif

Para dar um estilo maior a página, crie uma linha branca sobre o botão 1 ( cor laranja) veja a imagem. Para ajudar a desenhar a linha você pode colocar linhas guias ( para exibir uma linha guia você clica na régua e arrasta a linha guia até o ponto desejado.)

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/39.gif

Use a ferramenta rectangle tool.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/40.gif

[PG2]
Após desenhar a linha branco criaremos os links do menu.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/41.gif

Para o retângulo que tem a cor laranja use as seguintes configurações para o texto.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/42.gif

Nos retângulo da cor cinza

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/43.gif

Até agora temos o seguinte resultado.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/44.gif

Pensa que acabou? heheh respira aí. Vamos agora dar um charme a mais nos links, vamos desenhar uma pequena seta em cada link. Bem eu não desenhei cada seta, apenas usei o caractere “>” e coloquei em um tamanho reduzido. Repare nas cores das setas elas obedecem as cores de cada palavra.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/45.gif

Bem nessa parte estamos perto do fim. Para finalizar a parte de links, desenhe agora um retangulo alinhado com com retângulo menor o da direita.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/46.gif

Selecione a ferrameta custom shape(U) e utilize alguns dos shapes que o photoshop já trás

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/47.gif

Use os seguintes

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/48.gif

temos o seguinte

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/49.gif

Bem agora vamos trabalhar o local do conteúdo. Façamos o seguinte, vá até a camada da foto. Lembra que ela tem uma forma (shape) faça uma cópia da forma que delimita a foto. e arraste para cima da imagem – lembre-se que a foto esta com uma clip mask então você vai ter que aplicar a clique mask novamente (nada de dificil.)

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/50.gif

Teremos o seguinte resultado (já mudei a cor da forma) a cor que usei foi a 2A251F

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/51.gif

Limpe a camada de estilo que tem no retângulo.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/52.gif

Adicione esses novos parâmetros.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/53.gif

Resultado

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/54.gif

Selecione a ferramenta rectangle tool e faça três retângulos. Olhe para a imagem para ter maior detalhe.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/55.gif

Adicione pequenos textos nas caixas que criamos

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/56.gif

Adicione o mesmo estilo que criamos para a palavra página

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/57.gif

Adicione um texto no centro da página

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/58.gif

Agora com a ferramenta rectangle tool adicione pequenos quadrados na página, veja exemplo.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/59.gif

Agora insira os seguinte parâmetros de estilo nos quadrados que você criou.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/60.gif

[PG3]
Teremos o seguinte resultado. Observer que adicionei mais dois quadrados na parte de trabalhos.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/61.gif

Se você quiser usar as fotos utilizadas neste tutorial clique nos links abaixo
1 2 3 4 5

Adicione as fotos que desejar no layout. Dica para ser mais fácil encaixar as fotos nos quadrados use a clipmask ( posicione a foto sobre o retangulo e aperte Ctrl + alt + G e a foto ficará delimitada ao quadrado.) Abaixo exemplo de uma foto com uma clipmsk

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/62.gif

nosso trabalho… puxa estamos terminado.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/63.gif

Só para melhorar a aparência use novamente o filtro de foto na cor laranja. Para quem não lembra é só ir em adjustments> Photo filter

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/64.gif

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/65.gif

Com a ferramenta line tool crie uma linha entre as fotos.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/66.gif

Agora vamos adicionar este estilo a linha que criamos.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/67.gif

Para isso você necessita criar um pattern. Para isso vamos fazer o seguinte. Abra um novo documento 10×10 px com 72 dpi. Após isso selecione a ferramente brush com um valor pequeno e pinte a metade do quadrado que criamos.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/68.gif

Veja que o fundo deve ser transparente. Selecione a ferramenta crop e configure com as seguintes dimensões.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/69.gif

E corte a imagem por completo. Vá em edit> define pattern

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/70.gif

Volte para o projeto do layout na camada que criamos a linha. Adicione mais uma nova camada de estilo a ela e vá até strok.( lembre- que a camada de estilo é aquela que tem os parâmetros para o strok são os seguintes.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/71.gif

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/72.gif

Selecione a ferramenta rectlangle tool e crie uma pequena barra sobre a linha que acabos de criar.

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/73.gif

Após isso é só colocar os textos e pronto.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/td_74.gif

Segura ai as configurações dos textos. Para o começo do texto.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/75.gif

Para o restante do texto.

https://i2.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/76.gif

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/77.gif

para os links em geral.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/78.gif

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/79.gif

Depois é só colocar o copyright e pronto.

https://i0.wp.com/www.oficinadanet.com.br//imagens/coluna/2803/80.gif

pronto. terminamos…

Resultado final:

https://i1.wp.com/www.oficinadanet.com.br//imagens/coluna/2803//td_final.gif

Deixe uma resposta

Faça o login usando um destes métodos para comentar:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s