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!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jose
    11 de novembro de 2011

    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
      17 de novembro de 2011

      Olá José, é uma boa sugestão que iremos ter em conta para o futuro.

      Abraço



  2. Rick
    11 de novembro de 2011

    Excelente tutorial Diogo, não utilizo o photoshop para criação web, mas esse eu tinha que fazer rsrs.

    Parabéns!



    • Diogo Espinha
      17 de novembro de 2011

      Olá Rick, obrigado pelas suas amáveis palavras, tentamos sempre trazer os melhores conteúdos para os nossos leitores!

      Abraço



  3. Jose Correia
    11 de novembro de 2011

    O que quer dizer codigo html dentro do php sem interrupção?



  4. Jose
    15 de novembro de 2011

    Olá Diogo. Poderia em breve falar como colocar segurança num site em php?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz