Banner Tutoriais Photoshop



Tutorial Anterior: Como usar uma foto como background para ela mesma.... | Página Inicial »
Tutorial Anterior: Colagem com varias fotos. | Página Inicial »
Tutorial Anterior: Workshop Photoshop CS3 - DRC - 25/08/07 | Página Inicial »
Tutorial Anterior: Gotas de água em foto | Página Inicial »
Tutorial Anterior: Bordas Simples para foto. | Página Inicial »
Tutorial Anterior: Efeito de texto luminoso. | Página Inicial »
Tutorial Anterior: Efeito de reflexo na água. | Página Inicial »
Tutorial Anterior: Efeito abstrato com formas irregulares. | Página Inicial »
Tutorial Anterior: Tom Mórbido para Foto. | Página Inicial »

terça-feira, 28 de agosto de 2007

Barra de Navegação ao estilo do Windows Vista.


Bem vindo ao Tutoriais Photoshop

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



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.



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



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.



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



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



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.



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



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



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.



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



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



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





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



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.



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.



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



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.



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



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



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.



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.



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.



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.

Related Posts Plugin for WordPress, Blogger... Participe deixando seu comentário, dúvida, sugestão, ideias, exemplos ou simplesmente dizendo um "Olá!" na parte de comentários deste Post, sua participação é extremamente importante para o blog e também para todos os leitores que posteriormente terão acesso aos tutoriais e matérias que oferecemos por aqui.

Caso não queira ficar de fora das atualizações diárias do blog você tem 3 opções bem práticas:

  • Siga-me no Twitter.
  • Cadastre-se e receba por e-mail o resumo diário do que foi postado aqui no blog.
  • Cadastre nosso endereço RSS para receber as atualizações via leitor de Feeds.
  • Obrigado por ter votado no ::Tutoriais Photoshop:: para o iBest e Peixe Grande 2008 e 2009!

    Até a próxima!!


    15 Comentários:

    Às 28 de agosto de 2007 19h35min00s BRT , Anonymous Natália disse...

    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

     
    Às 30 de agosto de 2007 22h22min00s BRT , Anonymous TeLES disse...

    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.

     
    Às 31 de agosto de 2007 15h36min00s BRT , Blogger Andre Sugai disse...

    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 :)

     
    Às 1 de setembro de 2007 23h11min00s BRT , Blogger Andre Sugai disse...

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

     
    Às 4 de setembro de 2007 13h34min00s BRT , Blogger Ricardo Jurça disse...

    Blogão maneiro heim meu chapa!

    ricardo jurça

     
    Às 4 de setembro de 2007 13h40min00s BRT , Blogger Andre Sugai disse...

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

     
    Às 11 de dezembro de 2007 15h33min00s BRST , Anonymous Seiko-chan disse...

    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!

     
    Às 14 de dezembro de 2007 11h04min00s BRST , Blogger Andre Sugai disse...

    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

     
    Às 10 de setembro de 2008 19h48min00s BRT , Anonymous Pedro disse...

    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

     
    Às 10 de setembro de 2008 20h06min00s BRT , Anonymous Anônimo disse...

    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 ?

     
    Às 11 de setembro de 2008 21h46min00s BRT , Anonymous pedro disse...

    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 ?

     
    Às 12 de novembro de 2008 20h34min00s BRST , Blogger MutanÓ_ò disse...

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

     
    Às 25 de outubro de 2009 12h21min00s BRST , Blogger Clif disse...

    Show de bola!!!

     
    Às 5 de janeiro de 2010 19h55min00s BRST , Blogger Mangás disse...

    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.

     
    Às 9 de maio de 2010 01h56min00s BRT , Anonymous Carol disse...

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

     

    Postar um comentário

    Assinar Postar comentários [Atom]

    Links para esta postagem:

    Criar um link

    << Início