Criando um menu de site com campo de busca no Photoshop.

COMPARTILHE:

Descrição: Hoje veremos como criar uma barra de menu para sites usando layer styles e ferramentas. 01. Pressione Ctrl+N para criar...

Preview Descrição: Hoje veremos como criar uma barra de menu para sites usando layer styles e ferramentas.

tutoriaisphotoshop.net






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

tutoriaisphotoshop.net

02. Escolha a cor #313131, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro do documento para preencher a layer com a cor escolhida, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, defina os valores de 30 pixels para Height e 960 pixels para Width na barra de opções da ferramenta, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, clique no documento,pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro da seleção para preencher com a cor escolhida.

tutoriaisphotoshop.net

03. Vá em Layer> Layer Style> Gradient Overlay e depois em Layer> Layer Style> Stroke, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

04. Escolha a cor #757575, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escolha a fonte Tahoma no tamanho 4, escreva os links como na foto abaixo, para o link em hover a cor usada foi a #ff7200.

tutoriaisphotoshop.net

05. Vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

06. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, certifique-se de que a opção Shape Layers esteja ativada, escolha a cor cinza escuro e defina o Radius da ferramenta em 2 pixels, aplique a ferramenta e crie o campo de busca como na foto abaixo.

tutoriaisphotoshop.net

07. Vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow, Layer> Layer Style> Outer Glow, Layer> Layer Style> Color Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

tutoriaisphotoshop.net

08. No final seu menu estará como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://tutsdir.com/2011/11/26/create-a-clean-dark-navigation-bar/

COMENTÁRIOS

BLOGGER: 4
  1. O tutorial ficou bem legal, mas... como conseguiram a lupinha?

    ResponderExcluir
  2. Olá André, tenho aprendido muito aki com seus tutorias postados, criei essa barra de menu com o campo de busca, mas surgiu uma dúvida, como faço para ativar o campo de busca no meu site, preciso de algum código html? Obrigado.

    ResponderExcluir
  3. Sim você precisa utilizar um codigo html para ativar o campo texto.

    ResponderExcluir
  4. A lupa vc encontra onde fica o retangulo (Rectangle Tool) ou a tecla U, nesse menu tem a opção Custom Shape Tool, com ela selecionada lá em cima vai ter uma barra onde vai estar escrito shape lá vc encontra várias formas, e uma delas e a forma lupa.

    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,415,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,33,ícones,96,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,480,julho,494,junho,393,kingston,16,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,520,outubro,748,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,214,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,485,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 site com campo de busca no Photoshop.
Criando um menu de site com campo de busca no Photoshop.
http://www.andresugai.org/Tutoriais/11.2011/T19/imagem13.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2011/11/criando-um-menu-de-site-com-campo-de.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2011/11/criando-um-menu-de-site-com-campo-de.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