Tutorial: Criando a barra de navegação do site da Apple.com

Descrição: Como criar o layout de barra de navegação ao estilo do site da Apple.com.

• [message]

• ##check##AVISO: Criando a barra de navegação do site da Apple.com

• Caso você esteja usando o Photoshop em Português coloque o mouse sobre o nome do recurso que está sendo utilizado e veja a tradução em Português. Os recursos que possuem tradução estão marcados em vermelho no texto.
  Se você tiver dúvidas sobre o uso de alguma ferramenta visite o PS Help! para saber como utilizar a ferramenta desejada.
  Alguns tutoriais não possuem a opção de download das imagens, caso queira utilizar uma imagem em alta resolução para acompanhar o tutorial visite o PS Downloads e escolha um dos sites indicados para download de imagens em alta resolução.
  Em caso de dúvidas e sugestões utilize a área de comentários logo abaixo. Obrigado :)

01. Pressione Ctrl+N para criar um novo documento e defina o tamanho de 500×50 pixels, pressione Ok e logo após a letra M do teclado para selecionar a Rectangular Marquee Tool, na barra de opções da ferramenta que fica no alto da tela defina a opção Fixed Size e coloque os valores de 480 pixels para width e 35 pixels para height, agora crie a seleção dentro do documento.

02. Agora vá em Select> Modify> Smooth e defina um valor de 3 pixels para o Radius. Pressione Ctrl+Shift+N para criar uma nova layer e depois pressione a letra G do teclado para selecionar a Paint Bucket Tool, preencha a seleção com uma cor qualquer.

03. Clique com o botão direito do mouse sobre a layer e escolha a opção Blending Options, vá na opção Gradient Overlay e defina os seguintes valores (as cores usadas no gradiente são #949494 para #d2d2d2).

04. Ainda na caixa de Blending Options vá em Drop Shadow e defina a cor #b1b1b1.

05. Pressione a letra T do teclado para selecionar a Horizontal Type Tool e escolha a cor #383838 com a fonte Segoe UI de tamanho 14 (mas nada impede que se use outra fonte) e escreva os ítens que serão os links.

06. Clique com o botão direito do mouse sobre a layer dos links e escolha a opção Blending Options, vá em Drop Shadow e defina os seguintes valores.

07. Sua barra de navegação deve estar parecida com a imagem abaixo.

08. Pressione Ctrl+Shift+N para criar uma nova layer, agora pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e crie uma linha de mais ou menos 1 pixels de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção de branco, mude o modo de blend da layer para Soft Light e defina a opacidade em 20%, pressione Ctrl+J para duplicar a layer e vá pressionando a seta direita do teclado para posicionar a cópia como na foto abaixo, depois de posicionada pressione Ctrl+E para mesclar as layers.

09. Pressione Ctrl+Shift+N para criar uma nova layer, logo após pressione a letra M do teclado e desenhe outra linha de 1 pixel de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool, e pinte na cor #808080, posicione esta linha entre as duas linhas feitas no passo anterior usando as setas do teclado, deixe a opacidade da layer em 35%, depois de posicionada pressione Ctrl+E para mesclar as layers.

10. Pressione Ctrl+J para ir duplicando a layer e com as setas do teclado vá posicionando as cópias entre os links.

11. Para criar o efeito rollover ou seja, do mouse sobre o link pressione Ctrl+Shift+N para criar uma nova layer e depois pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção como a da foto abaixo.

12. Pressione a letra G do teclado para selecionar a Paint Bucket Tool e preencha a seleção com qualquer cor, depois clique com o botão direito do mouse sobre a layer e escolha a opção Blending Options, vá em Gradient Overlay, clique sobre a barra de gradiente e defina um gradiente que vá do #666666 para o #a1a1a1 como na foto abaixo.

13. Pressione a letra T do teclado para selecionar a Horizontal Type Tool e selecione a palavra que estiver no efeito rollover, mude a cor da fonte para Branca, clique com o botão direito sobre a layer da palavra e defina os seguintes valores para o Drop Shadow, com a cor #454545 para a sombra.

Ao final a barra estará assim.