photoshop Tutorial - Criando menu com efeito 3D

[Gol D. Tobi 2]

Achei bem interessante o tutorial e vim postar pra vcs ^^

 

Criando Menu com efeito 3D

 

1.A primeira coisa que precisamos fazer é

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

um novo documento.Para este tutorial iremos utilizar as medidas de 400 × 400

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

2. Pinte seu backgound de preto pressionando Alt+Backspace ou use a ferramenta Paint Bucket Tool3. Crie uma nova camada (Shift + Ctrl + N) e em seguida, usando a ferramenta retângulo arredondado para fazer uma seleção semelhante a figura abaixo com raio de 10px

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

4. Agora vamos adicionar alguns estilos, clique com o botão direito na camada que contém o retângulo e selecione “Blending Options”, entre com so valores abaixo em “Collor Overay” e “Stroke”

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

5. Sua imagem deve estar assim:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

6. Utilizando a ferramenta “Rectangle Marquee Tool” faça uma seleção como a imagem abaixo e com o preenchimento em branco.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Iniciando Banner

 

7. Agora vamos adicionar alguns estilos como no passo 4, mas utilizando as opções “Drop Shadow” e “Gradiente Overlay”, como nas imagens a seguir.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Propriedades "Drop Shadow"

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Cores "Gradient Overlay"

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Propriedade "Gradient Overlay"

 

 

8. Devemos ter a seguinte imagem

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Prévia

 

9. Usando a Ferramenta “Polygonal Lasso Tool”, iremos fazer a dobra do banner para dar a perspectiva que precisamos.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Inicando Dobra do Banner

10. Aplique a esta camada também um “Gadiend overlay”, com as mesmas propriedades da etapa 7.11. Repita o processo para o outro lado ficando como na imagem que segue.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Abas Prontas

 

12. A próxima etapa é criarmos o título do menu, utilizando a ferramenta “Horizontal Text Tool”

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Photoshop Tutorial: Iniciando Menu

 

13. Não pretendemos deixar banco, então aplique um “Gradient Overlay”

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Tutorial Photoshop: Propriedades "Gradient Oberlay"

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Cores "Gradient Overlay"

 

 

14. Teremos algo parecido com isso

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Prévia Texto Menu

 

15. Duplique a camada com nosso titulo e remova os estilos clicando com o botão direito na camada e escolhendo a opção “Clear Layer Style”. Em seguida pocisione a camada com o texto em branco abaixo da que contem estilos e voa ela 1px para baixo

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Iniciando Efeito Texto Banner

 

16. Como o banco fica muito forte diminua a opacidade para uns 28% mais ou menos e termos isto

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Tutorial Photoshop: Efeito Texto Banner Finalizado

 

17. Adicione um ícone e o texto dos links e você terá seu menu finalizado e parecido com o que segue

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

PhotoShop Tutorial: Imagem Final

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Creditos : Photoshop Tutoriais!

[Zabuuza 0]

Caraca cara ficou bem criativo parabéns tava proucurando um tuto assim ! obrigado por compartilhar