em ,

Criando um menu de navegação simples.

Preview Descrição: Hoje veremos como criar um menu utilizando layer styles, ferramentas e modos de blend.

tutoriaisphotoshop.net

(adsbygoogle = window.adsbygoogle || []).push({});

01. Pressione Ctrl+N para criar um novo documento, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

02. Pressione a letra D do teclado para receptar as cores de Foreground e Background para preto e branco, vá em View> New Guide, claque em Horizontal e defina o valor de 120 px, pressione Ok, vá novamente em View> New Guide, escolha a opção Horizontal e defina o valor de 160 px, pressione Ok novamente, seu documento deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net

03. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Navigation_Back, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção na área delimitada pelas Guides que foram inseridas, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e claque dentro da seleção para preencher com uma cor qualquer, vá em Layer> Layer Style> Drop Shadow, defina o valor de Angle em 90º , Distance em 2 pises e Size em 1 pixel, vá em Layer> Layer Style> Inner Glow, escolha a cor branca, defina o Size em 2 piles, vá em Layer> Layer Style> Gradient Overlay, Style em Linear, defina o gradiente com as cores #cccccc para #ffffff, sua barra de verá ficar como a da foto abaixo.

tutoriaisphotoshop.net

04. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Shine, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e crie uma seleção como a da foto abaixo.

tutoriaisphotoshop.net

05. Escolha a cor branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e claque dentro da seleção, mude o modo de blenda da layer para Soft Light e defina a opacidade em 75%, pressione Ctrl+D para desabilitar a seleção, sua imagem deverá ficar como a da foto abaixo.

tutoriaisphotoshop.net

06. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva os ítens na barra, como na foto abaixo, no caso deste tutorial a fonte usada foi a Verdana, Regular, tamanho 14 pt, Smooth.

tutoriaisphotoshop.net

07. Clique na layer de texto do item Home e pressione Ctrl+J para criar uma cópia da layer, mude a cor do texto para branco, pressione Enter, deixe a layer abaixo da layer original, pressione a letra V do teclado para selecionar a Move Tool, claque uma vez na tecla direcional para baixo no teclado para descer o texto 1 pile, repita o procedimento em todos os outros itens da barra.

tutoriaisphotoshop.net

08. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Separator para a nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção como a da foto abaixo.

tutoriaisphotoshop.net

09. Escolha a cor branca, pressione a letra G do teclado para selecionar a Gradient Tool, escolha um gradiente no modo Reflected do branco para o transparente, aplique dentro da seleção, pressione Ctrl+D para desabilitar a seleção.

tutoriaisphotoshop.net

10. Vá em Layer> Layer Style> Gradient Overlay, escolha a cor preta, pressione Ok, defina a opacidade da layer em 80%.

tutoriaisphotoshop.net

11. Pressione Ctrl+J para duplicar a layer, pressione a letra V do teclado para selecionar a Move Tool, posicione a cópia entre os próximos itens, repita a operação até que sua barra fique como a da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://www.webdesign.org/photoshop/web-layout/photoshop-navigation-bar-tutorial-simply-the-beautiful.20245.html

Escrito por André Sugai

Publicitário, Photoshopista, criador do Tutoriais Photoshop, venceu o prêmio iBest na categoria tecnologia em 2008 e dois prêmios de criatividade da Adobe. Ex-colaborador do Tech Tudo (http://Globo.com), iMasters (UOL) e Revista Photoshop Creative.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

One Comment

Trailer de Year Zero.

Inspiração, Cartazes de Rock: Tune Yards.