Criando um menu de navegação simples.

COMPARTILHE:

Descrição: Hoje veremos como criar um menu utilizando layer styles, ferramentas e modos de blend. 01. Pressione Ctrl+N para criar ...

Preview Descrição: Hoje veremos como criar um menu utilizando layer styles, ferramentas e modos de blend.

tutoriaisphotoshop.net






01. Pressione Ctrl+N para criar um novo documento, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

02. Pressione a letra D do teclado para receptar as cores de Foreground e Background para preto e branco, vá em View> New Guide, claque em Horizontal e defina o valor de 120 px, pressione Ok, vá novamente em View> New Guide, escolha a opção Horizontal e defina o valor de 160 px, pressione Ok novamente, seu documento deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net


03. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Navigation_Back, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção na área delimitada pelas Guides que foram inseridas, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e claque dentro da seleção para preencher com uma cor qualquer, vá em Layer> Layer Style> Drop Shadow, defina o valor de Angle em 90º , Distance em 2 pises e Size em 1 pixel, vá em Layer> Layer Style> Inner Glow, escolha a cor branca, defina o Size em 2 piles, vá em Layer> Layer Style> Gradient Overlay, Style em Linear, defina o gradiente com as cores #cccccc para #ffffff, sua barra de verá ficar como a da foto abaixo.

tutoriaisphotoshop.net


04. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Shine, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e crie uma seleção como a da foto abaixo.

tutoriaisphotoshop.net


05. Escolha a cor branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e claque dentro da seleção, mude o modo de blenda da layer para Soft Light e defina a opacidade em 75%, pressione Ctrl+D para desabilitar a seleção, sua imagem deverá ficar como a da foto abaixo.

tutoriaisphotoshop.net


06. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva os ítens na barra, como na foto abaixo, no caso deste tutorial a fonte usada foi a Verdana, Regular, tamanho 14 pt, Smooth.

tutoriaisphotoshop.net


07. Clique na layer de texto do item Home e pressione Ctrl+J para criar uma cópia da layer, mude a cor do texto para branco, pressione Enter, deixe a layer abaixo da layer original, pressione a letra V do teclado para selecionar a Move Tool, claque uma vez na tecla direcional para baixo no teclado para descer o texto 1 pile, repita o procedimento em todos os outros itens da barra.

tutoriaisphotoshop.net


08. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, dê o nome de Separator para a nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, crie uma seleção como a da foto abaixo.

tutoriaisphotoshop.net


09. Escolha a cor branca, pressione a letra G do teclado para selecionar a Gradient Tool, escolha um gradiente no modo Reflected do branco para o transparente, aplique dentro da seleção, pressione Ctrl+D para desabilitar a seleção.

tutoriaisphotoshop.net


10. Vá em Layer> Layer Style> Gradient Overlay, escolha a cor preta, pressione Ok, defina a opacidade da layer em 80%.

tutoriaisphotoshop.net


11. Pressione Ctrl+J para duplicar a layer, pressione a letra V do teclado para selecionar a Move Tool, posicione a cópia entre os próximos itens, repita a operação até que sua barra fique como a da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://www.webdesign.org/photoshop/web-layout/photoshop-navigation-bar-tutorial-simply-the-beautiful.20245.html



COMENTÁRIOS

BLOGGER: 1

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,473,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Criando um menu de navegação simples.
Criando um menu de navegação simples.
http://www.andresugai.org/Tutoriais/08.2011/T23/imagem11.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2011/08/criando-um-menu-de-navegacao-simples.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2011/08/criando-um-menu-de-navegacao-simples.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