• RSS
  • Facebook
  • Twitter
Comments


A simplicidade é a chave para a web layouts bonitos. Aprenda a desenhar uma barra de navegação bonita no Photoshop.

Visualização dos resultados finais

Limpeza barra de navegação branco

Limpeza Branco Navigation Bar Photoshop Tutorial

Passo 1

Para começar, crie um novo documento, com a finalidade deste tutorial eu escolhi 500 por 200 pixels. Preencha o fundo com um gradiente radial de um meio-cinza escuro para um cinza escuro.Você pode fazer isso selecionando a ferramenta de gradiente na caixa de ferramenta e defini-lo como radial. Defina a sua cor de primeiro plano para # 45443f e sua cor de fundo para # 31302c.Esquerda clique no meio do documento, arraste para a direita e solte.
Tela em branco

Passo 2

Criar uma nova camada (Layer> New> Layer) e selecione a ferramenta Marquee retangular. Faça uma seleção de tamanho fixo de 440 por 50 pixels no meio do seu documento.
Long marquee retângulo

Passo 3

Preencha a seleção com um gradiente linear de # f4f4f4 na parte superior a # D9D9D9 na parte inferior.
Gradiente linear acrescentado

Passo 4

Estamos indo agora para a aplicação de um par de estilos de camada para essa camada.
Layer> Layer Styles> Drop Shadow
Drop estilo de camada de sombra
Layer> Layer Styles> Outer Glow
Outer estilo de camada brilho
Resultado:
Barra de navegação com estilos de camada

Passo 5

Agora usando a ferramenta de texto adicionar em alguns links de texto. As configurações de fonte que usei são Verdana, Regular, 13 pt, Sharp, # 686868 (e # ac0000 para um efeito hover).
Texto adicionado à barra de navegação

Passo 6

Por último, vamos estar adicionando algumas divisórias entre as ligações. Em primeiro lugar, crie uma nova camada e selecione a ferramenta Marquee retangular novamente. Faça uma seleção de 1 por 50 pixels entre os dois primeiros links. Preencher (Edit> Fill) a seleção com a cor # b4b4b4.
Divider adicionado à barra de navegação

Passo 7

Agora mova a seleção em toda para a direita por um pixel (seta esquerda do teclado). Preencha esta seleção com a cor # D9D9D9.
Barra divisória reforçada

Passo 8

Duplicar esta camada e mova a camada duplicada ao longo para a direita, é entre os próximos dois links (mantenha pressionada a tecla Shift enquanto move o divisor para o direito de mantê-lo na linha. Repita esse processo para o resto dos links e você está acabado. eu também reduziu a opacidade das camadas de 50% para que não se destacam tanto -, mas que depende de você ;-)
Barra divisória repetido ao longo da barra de navegação

Categories:

Leave a Reply