Barra de Navegação 02

tuto16.gif
Tutorial PhotoShop: Fazendo uma Barra de Navegação

1. Abra um novo arquivo. Nesse tutorial utilizei a cor #2D2D2D como fundo. Criei uma nova camada e nomei-a como “barra“. Com a ferramenta de Seleção Retangular (Tecla “M”), faça a seleção de um retângulo.

tuto16a.gif

2. Pinte a parte que foi selecionada com a cor desejada. Neste tutorial, utilizei #4D86B7. Após pintar a área selecionada, você não irá precisar mais da seleção. Aperte CTRL + D para retirá-la.

tuto16b.gif

3. Crie uma nova camada e nomei-a como “seções“. Com a ferramenta Rounded Rectangle (Tecla “U”), faça as abas das seções.

tuto16bb.gif

4. Duplique a camada “seções” para criar as outras seções. Faça isso o número de vezes necessário para a quantidade de seções que irá ter a barra. Nesse tutorial, utilizarei 4 abas e um pequeno pedaço da 5 aba. Ao duplicar a camada, utilizando as setas do teclado, movimente para a direita até que uma aba esteja completamente ao lado de outra. No meio das abas, deixei apenas uma linha central no topo.

tuto16bbb.giftuto16c1.gif

5. Agora iremos unir a camada “barra” com as camadas duplicadas das seções. Selecione a última camada duplicada da camada “seções” e aperte CTRL + E. Faça isso até as camadas das seções se unirem com a camada “barra”.
tuto16c2.gif

6. Como a ferramenta Dodge (Tecla “O”), faça uma linha em cima da barra. Quanto mais vezes passar, mais brilho irá dar. (DICA: para manter uma linha reta, mantenha pressionado a tecla SHIFT). Configurações da ferramenta conforme a figura abaixo:
tuto16d.gif

tuto16e.gif

7. Agora aplique os seguintes efeito para a camada “barra“:

tuto16f.gif

tuto16g.gif
tuto16h.gif

8. Crie uma nova camada e nomei-a como “linha“. Com a ferramenta Pencil (lápis, Tecla “B”), faça uma linha nas junções das seções. Repita o passo para as outras junções de seções.

tuto16i.gif

tuto16j.gif

9. Aplique o seguinte efeito para a camada “linha“:

tuto16l.gif

10. Escreva o nome das seções que você deseja. Utilize seu logotipo, slogan e pronto!
tuto16m.gif

Até o próximo tutorial!

~ por Julio Cesar Milanes em janeiro 15, 2008.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

 
%d blogueiros gostam disto: