2007agostodificuldade 4Tudotutorialweb

Tutorial: Barra de Navegação ao estilo do Windows Vista

Preview Descrição: Como criar o layout de uma barra de navegação ao estilo do Windows Vista.

  • [message]
    • ##check##AVISO: Barra de Navegação ao estilo do Windows Vista

      • 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 🙂

tutoriais photoshop

01. Pressione Ctrl+N para criar um novo documento e defina um tamanho de 500×50 pixels, logo após pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e defina os valores abaixo na barra de opções da ferramenta e clique no documento para criar uma seleção.

Barra de Navegação ao estilo do Windows Vista

02. Agora vá em Select> Modify> Smooth e aplique um valor de 2 pixels.

Barra de Navegação ao estilo do Windows Vista

03. Pressione Ctrl+Shift+N para criar uma nova layer ou vá em Layer> New> Layer, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a layer com uma cor qualquer, agora vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo criando um gradiente que vá da cor #313332 para #46474a.

Barra de Navegação ao estilo do Windows Vista

04. Agora vá em Stroke e defina a cor #676767.

Barra de Navegação ao estilo do Windows Vista

05. Crie uma seleção que vá da metade para a parte superior da barra.

Barra de Navegação ao estilo do Windows Vista

06. Pressione Ctrl+Shift+N para criar uma nova layer e depois a letra G do teclado para selecionar a Gradient Tool, na barra de opções da ferramenta escolha um gradiente que vá do branco para o transparente, aplique de cima para baixo e depois pressione Ctrl+D para retirar a seleção, sua barra deve ficar como a da foto abaixo.

Barra de Navegação ao estilo do Windows Vista

07. Mude o modo de blend da layer para Linear Dodge e defina sua opacidade em 35%.

Barra de Navegação ao estilo do Windows Vista

08. Sua barra já deve estar parecida com esta.

Barra de Navegação ao estilo do Windows Vista

09. Pressione Ctrl+Shift+N para criar uma nova layer e logo após pressione a letra M do teclado para selecionar a Single Row Marquee Tool, crie uma seleção como a da foto abaixo.

Barra de Navegação ao estilo do Windows Vista

10. Pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção de branco.

Barra de Navegação ao estilo do Windows Vista

11. Agora clique com o Ctrl pressionado sobre a layer da barra para criar uma seleção como na foto abaixo.

Barra de Navegação ao estilo do Windows Vista

12. Agora vá em Select> Inverse, selecione a layer onde fizemos o traçado branco e pressione Delete.

Barra de Navegação ao estilo do Windows Vista

Barra de Navegação ao estilo do Windows Vista

14. Mude o modo de blend da layer para Soft Light e defina sua opacidade em 60%.

Barra de Navegação ao estilo do Windows Vista

15. Pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e defina um tamanho de 130×24 pixels e deixe a opção Style em Fixed Size na barra de opções da ferramenta, depois de criada a seleção vá em Select> Modify> Smooth e defina um valor de 2 pixels.

Barra de Navegação ao estilo do Windows Vista

16. Pressione Ctrl+Shift+N para criar uma nova layer, pressione a letra G do teclado para selecionar a Paint Bucket Tool e preencha a layer com qualquer cor depois vá em Layer> Layer Style> Gradient Overlay e defina um gradiente que vá da cor #000000 a cor #2f3233.

Barra de Navegação ao estilo do Windows Vista

17. Agora vá na opção Stroke e defina os valores abaixo com um gradiente que vá da cor #0f1011 para a cor #575858.

Barra de Navegação ao estilo do Windows Vista

18. Pressione Ctrl+Shift+N para criar um nova layer, pressione a letra G do teclado para selecionar a Paint Bucket Tool pinte toda a layer de preto e vá em Edit> Stroke e defina os valores abaixo.

Barra de Navegação ao estilo do Windows Vista

19. Defina um valor de 15% para a opacidade da layer.

Barra de Navegação ao estilo do Windows Vista

20. Crie uma seleção da metade para o topo do botão que estamos trabalhando e pressione a tecla G do teclado para selecionar a Gradient Tool, caso apareça a Paint Bucket Tool selecionada pressione Shift+G para mudar para a Gradient Tool, e aplique um gradiente que vá do Branco para o Transparente, mude a opacidade para 80%.

Barra de Navegação ao estilo do Windows Vista

21. Para o texto dos links pressione a letra T do teclado para selecionar a Horizontal Text Type Tool e use a fonte Verdana, tamanho 11 na cor branca.

Barra de Navegação ao estilo do Windows Vista

22. Pressione Ctrl+Shift+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Single Column Marquee Tool e crie uma linha como a da foto abaixo, pressione a letra G do teclado para selecionar a Paint Bucket Tool e preencha a seleção com a cor #1a1b1c, pressione a letra V do teclado para selecionar a Move Tool e mova a seleção 1 pixel para a direita, pressione a letra G do teclado para selecionar a Paint Bucket Tool e pinte a seleção na cor #5d5f60, pressione novamente a letra V do teclado para selecionar a Move Tool e mova mais 1 pixel para a direita, novamente pressione a letra G para selecionar a Paint Bucket Tool e preencha com a cor #232526.

Barra de Navegação ao estilo do Windows Vista

26. Pressione a letra E do teclado para selecionar a Eraser Tool e apague as partes de cima e de baixo do divisor de links usando um brush de 20 pixels de tamanho e pontas suaves, defina um valor de 50 % para a opacidade da layer.

Barra de Navegação ao estilo do Windows Vista

27. Pressione Ctrl+J para duplicar a layer e posicione a cópia entre os outros dois links e sua barra de navegação estará pronta.

Barra de Navegação ao estilo do Windows Vista

Deixe seu voto

Mostrar mais

Artigos relacionados

15 comentários

  1. Adoro os tutorias postados,são exlpicados de uma forma muito legal.
    Num sabia qse nada de photoshop e to aprendendo mto com o blog.

    Queria que vc postasse algum tutorial sobre efeito de pergaminho envelhecido =D

    bjus

  2. SENSACIONAL, SENSACIONAL!! =D

    Esse efeito de “gloss” cortado, igual a esse, e que moda no design da web sempre me fascinava… até eu descobrir, há um tempo atrás, que era a coisa mais simples do mundo de se fazer.
    Aí eu passei olhar esse efeito com outros olhos, tipo: “rá! você não me engana mais, eu também sei fazer isso B)”.

    André, já que isso aí é uma barra de navegação, cê podia complementar esse tutorial ensinando como se faz aquele efeito de transição (um brilho laranja, azul) dos botões do Vista. No caso, é só aplicar um degradê em cima?

    Abraços.

  3. Oi Teles, o efeito a que você se refere é este?

    baboo.com.br/absolutenm/articlefiles/27125-desligarvista.jpg

    Esse efeito em menus cai bem mesmo, e agora uma manha que aprendi no Photoshop que ajuda muito é criar todo o layout, salvar o PSD e depois importar no flash e animar, o flash incorpora todas as layers com efeitos e tudo, uma maravilha 🙂

  4. Muito legal esse tuto! Vcs teriam algum que ensine a fazer aquele efeito “acqua” meio translúcido, brilhante, como os icons da Apple?

    Abração e sucesso pra vcs!

  5. Oi Seiko-Chan, aqui no blog tem este tutorial aqui, espero que goste, obrigado pela visita e desculpe a demora na resposta!! volte sempre!! 🙂

    Criando ícones do iPhone.
    tutoriaisphotoshop.blogspot.com/2007/02/criando-cones-do-iphone.html

  6. andreeeeeeeeeeee eu te amo kra -.-‘ aokpsdokasok
    Que efeito massaaa , era isso que eu tava procurando , andré , uma coisa que vai lotar seu blog mais ja do que e lotado , Coloque mais botoes para site , mais tutos sobre botoes para site , tem muitos tutoriais que os brasileiros estao loucos para achar , achar acha né so que em ingles , ai tem como vc traduzir ae =p =D .
    Abraço

  7. andre , sera que tem como quando passa o mouse por cima aparece a parte mais preta ?
    ali ta tipo imagem … fica sempre , tpw.. qd passa o mouse por cima ai sim fica preto ?

  8. Olá , será que tem como aplicar um efeito que quando passar o mouse por cima ficam mais escuro igual aquele botao ”downloads” , e mais uma duvida qual o codigo do gradiente transparente ?

  9. Não esstou conseguindo fazer o seguinte passo:
    02. Agora vá em Select> Modify> Smooth e aplique um valor de 2 pixels.
    O Smooth não fica disponível para clicar na hora, e eu faço tudo certo desde o começo. ajuda ai porfavor.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

2 × 2 =

Botão Voltar ao topo

Add to Collection

No Collections

Here you'll find all collections you've created before.

Fechar
Fechar

Adblock Detectado

Este site sobrevive com anúncios, desative seu Adblock para acessar nosso conteúdo. Isso garante que possamos continuar com nosso conteúdo de forma gratuita! Obrigado :)