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

COMPARTILHE:

Como criar o layout de uma 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 500x50 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 130x24 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

COMENTÁRIOS

BLOGGER: 15
  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

    ResponderExcluir
  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.

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

    http://www.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 :)

    ResponderExcluir
  4. Oi Natália, pode deixar que assim que possível irei postar ok? obrigado pela visita, volte sempre!! :)

    ResponderExcluir
  5. Blogão maneiro heim meu chapa!

    ricardo jurça

    ResponderExcluir
  6. Obrigado pela visita Ricardo, fico feliz que tenha gostado, volte mais vezes!! :)

    ResponderExcluir
  7. 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!

    ResponderExcluir
  8. 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.
    http://tutoriaisphotoshop.blogspot.com/2007/02/criando-cones-do-iphone.html

    ResponderExcluir
  9. 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

    ResponderExcluir
  10. 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 ?

    ResponderExcluir
  11. 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 ?

    ResponderExcluir
  12. fala aehh, eu queria sabercomo faz efeito de metal bem realista se vcs puderem postar aeh vlw !

    ResponderExcluir
  13. 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.

    ResponderExcluir
  14. muiito afu.
    siite maravilhoso.
    ta e onde usa essa barra ? (uso o firefox)

    ResponderExcluir

Nome

.ai,71,.asl,1,.eps,24,.indd,1,.jpg,20,.png,40,.psd,594,.sketch,2,.svg,7,2006,90,2007,352,2008,942,2009,1780,2010,1822,2011,1825,2012,1764,2013,240,2014,559,2015,1195,2016,518,2017,748,2018,700,2019,412,2am,1,2axion,1,360,4,abril,378,abstrato,223,acer,1,actions,151,adobe,32,adobe experience house,1,adobe max,1,agosto,532,ajax,1,allan portilho,1,animação,39,aritana,1,arte,27,artistas do photoshop,1079,axis,5,backgrounds,1,basekit,1,básico,68,benq,9,bethesda,4,bgs,123,bmx,1,booombox,2,brasilmegaarena,2,brushes,107,bug,1,bunker,1,campus party,1,capcom,1,cartazes de cinema,117,cartazes de rock,203,cinemark,1,codemasters,1,com2us,3,concurso cultural,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,642,dica ninja,99,dificuldade 1,38,dificuldade 2,389,dificuldade 3,948,dificuldade 4,332,dificuldade 5,56,distortions,4,divulgação,1,diy,32,dji,1,dlink,1,documentário,105,dollarphotoclub,37,download,1780,edição de vídeo,3,efeito,1076,esportes,11,fastcom,3,ferramentas online,1,fevereiro,492,filme,3,flipbook,1,flow motion,1,fontes,569,fotolia,13,fotoshistoricas,39,fotosqueabalaramomundo,75,gamebau,1,games,214,gamevil,1,gastore,1,gifart,27,gomidia,1,goPro,1,gradientes,7,greenk,1,guest post,5,historia da foto,22,hitbox,1,hopi-hari,1,hoplon,19,html5,3,hype,2,hyperlapse,5,hyperx,31,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,15,kinship,2,layer style,43,lbee,1,leitores,1,levelup,15,lightpainting,1,lista,2,live-stream,2,magic the gathering,1,maio,336,março,466,matéria,591,maurício de souza produções,1,melhordasemana,17,mestres da pintura,35,meutimao,1,mob2b,1,mockup,39,música,48,natal,1,novembro,698,off,1,off-topic,517,outubro,745,palestra,7,parkour,1,patern,46,pdf,2,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,png,1,positivo,16,post pago,2,prezi,1,printi,2,project ten,2,psd,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,rawar,2,razer,36,relink,152,responsivo,2,retoque de imagem,111,rixty,3,saga,12,selecaoTP,44,setembro,520,shapes,2,showreel,7,skate,59,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,4,template,4,teste,1,texto,272,textura,137,tilt-shift,3,timelapse,21,tipografia,3,tp,2,tunning virtual,14,tutorial,2210,tutorial builder,2,tutorial player,2,ubisoft,71,udemy,1,ui,16,unboxing,1,vaio,1,vice,64,vídeo,706,vídeo aula,472,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Tutorial: Barra de Navegação ao estilo do Windows Vista
Tutorial: Barra de Navegação ao estilo do Windows Vista
Como criar o layout de uma barra de navegação ao estilo do Windows Vista.
https://www.andresugai.org/Tutoriais/08.2007/T20/imagem24.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2007/08/barra-de-navegao-ao-estilo-do-windows.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2007/08/barra-de-navegao-ao-estilo-do-windows.html
true
34833248
UTF-8
Ver todos os Posts Não encontramos nenhum post VEJA TODOS Leia Mais Responder Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM LABEL ARQUIVO SEARCH TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para a Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copie todo código Selecione todo código Todos os códigos copiados para o clipboard Não foi possível copiar todo código / textos, pro favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar