A barra de navegação do website da Apple é simples e atrativa, dando um toque de luxuria na apresentação dos conteúdos. Muitas são as pessoas que gostariam de ter um menu de navegação idêntico nos seus websites, e a partir de hoje você também poderá ter. Com este tutorial, você irá aprender passo-a-passo Como criar uma barra de navegação semelhante à Apple para os seus trabalhos web ou para uso pessoal em Adobe Photoshop. Não perca mais tempo, meta já mãos à obra!
O primeiro passo é criar um novo documento. Clique em CTRL+SHIFT+N e crie um documento com 500x500px. Clique OK e de seguida clique na tecla M para abrir o Rectangular Marquee Tool. Logo de seguida defina a opção Fixed size com os tamanhos 485x35px na barra de ferramentas, e crie a selecção dentro do documento. Centre a selecção.
De seguida clique em Select -> Modify -> Smooth e insira o valor de 3px para o Radius. De seguida clique CTRL+SHIFT+N para criar uma nova layer, de seguida pressione a tecla G para seleccionar a Paint Bucket Tool e pinte a area criada com uma cor da sua escolha.
De seguida vá ás Blending Options da layer criada
e defina os valores de acordo com a imagem:
Crie um Gradient Overlay da cor #949494 para a cor #d2d2d2
De seguida, ainda dentro do Blending Options, clique em Drop Shadow e defina os valores seguintes:
Côr #b1b1b1, Opacity 80%, Ângulo de 90º, Blend Mode Normal, Distance 1 e Size 3.
De seguida Insira as palavras do seu menu com a côr #383838 com o tipoe de letra Segoe UE tamanho 14 e vá em Blending Options. Depois em Drop Shadow, insira os valores que estão na imagem:
A sua barra de navegação deverá estar semelhante à seguinte (Com outras palavras certamente):
De seguida clique Ctrl+Shift+N para criar uma nova layer, e pressione a letra M do teclado para selecionar a Rectangular Marquee Tool. Crie uma linha com 1 pixel de largura, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção de branco. A Seguir terá de alterar o modo de blend para Soft Light e definir a opacidade para 20%. CLique CTRL+J para duplicar a layer e utilizando as setas do teclado, posicione a layer para alcançar o efeito desejado. Depois de posicionado, clique em CTRL+E para mesclar as 2 layers, e repita o CTRL+J para duplicar a layer finalizada e criar o efeito dos botões.
Para criar o efeito de mouse over, crie uma nova layer com CTRL+SHIFT+N e pressione a tecla M para seleccionar a Rectangular Marquee Tool. Lembre-se de alterar o Fixed Size para Normal, e crie uma seleccção do futuro botão, tal como a imagem abaixo indica.
Clique na tecla G do se teclado e pinte a selecção com uma cor que queira. De seguida vá às Blending Options da layer e vá em Gradient Overlay. Aí defina os valores de acordo com a imagem seguinte, com o gradiente da cor #666666 para a cor #a1a1a1:
Depois crie uma copia do texto existente e altere a cor para branco e os valores do drop shadow para #454545:
E já tem tudo o que é necessário para continuar a desenvolver a sua barra de navegação semelhante à Apple!
Abraços!
Jose
Muito bom agora fazer isso funcional e que é difícil?
Vai haver segunda parte do código explicando como fazer com php ou outra linguagem os links e os submenus?
Diogo Espinha
Olá José, é uma boa sugestão que iremos ter em conta para o futuro.
Abraço
Rick
Excelente tutorial Diogo, não utilizo o photoshop para criação web, mas esse eu tinha que fazer rsrs.
Parabéns!
Diogo Espinha
Olá Rick, obrigado pelas suas amáveis palavras, tentamos sempre trazer os melhores conteúdos para os nossos leitores!
Abraço
Jose Correia
O que quer dizer codigo html dentro do php sem interrupção?
Jose
Olá Diogo. Poderia em breve falar como colocar segurança num site em php?