André Sugai
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 :)
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.
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 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.
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.
muiito afu.
siite maravilhoso.
ta e onde usa essa barra ? (uso o firefox)
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.
Show de bola!!!
fala aehh, eu queria sabercomo faz efeito de metal bem realista se vcs puderem postar aeh vlw !
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 ?
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 ?
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
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
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!
Obrigado pela visita Ricardo, fico feliz que tenha gostado, volte mais vezes!! :)
Blogão maneiro heim meu chapa!
ricardo jurça
Oi Natália, pode deixar que assim que possível irei postar ok? obrigado pela visita, volte sempre!! :)
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 :)
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.
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