Botão web com linhas transversais.

COMPARTILHE:

Descrição: Neste tutorial veremos como criar um botão web com layer styles e um pattern que criaremos. 01. Pressione Ctrl+N para c...

Preview Descrição: Neste tutorial veremos como criar um botão web com layer styles e um pattern que criaremos.

tutoriaisphotoshop.net






01. Pressione Ctrl+N para criar um novo documento, defina o tamanho de 200x100 pixels, 72 dpi´s e modo de cor em RGB, pressione Ok, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool, clique no documento para preencher a layer com branco, pressione Ctrl+Shift+Alt+N para criar uma nova layer, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool e crie uma seleção como a da foto abaixo.

tutoriaisphotoshop.net

02. Vá em Select> Modify> Smooth, defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

03. Sua seleção deverá ficar como a da foto abaixo.

tutoriaisphotoshop.net

04. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, 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 uma cor qualquer.

tutoriaisphotoshop.net

05. Vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

06. Defina a opacidade da layer em 70%.

tutoriaisphotoshop.net

07. Vá em Layer> Layer Style> Stroke e defina os valores abaixo.

tutoriaisphotoshop.net

08. Seu botão deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net

09. Agora bá em Layer> Layer Style> Inner Shadow, Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

tutoriaisphotoshop.net

10. Seu botão deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net

11. Pressione Ctrl+N para criar um novo documento, defina o tamanho em 6x6 pixels, 72 dpi's e modo de cor em RGB, pressione Ok, pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool, clique no documento para preencher a layer com branco.

tutoriaisphotoshop.net

12. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra B do teclado para selecionar a Pencil Tool, crie uma linha como a da foto abaixo.

tutoriaisphotoshop.net

13. Vá em Edit> Define Pattern, dê um nome para seu novo pattern e pressione Ok.

tutoriaisphotoshop.net

14. Volte ao botão que estamos criando e vá em Layer> Layer Style> Pattern Overlay, clique no ítem de Pattern e escolha o pattern que criamos.

tutoriaisphotoshop.net

15. Defina os valores abaixo e pressione Ok.

tutoriaisphotoshop.net

16. Seu botão deverá ficar como o da foto abaixo.

tutoriaisphotoshop.net

17. Pressione Ctrl+J para duplicar a layer, vá em Edit> Transform> Flip Vertical.

tutoriaisphotoshop.net

18. Defina a opacidade da layer em 19%.

tutoriaisphotoshop.net

19. Clique sobre as layer styles da layer duplicada e desmarque as layer styles de Inner Shadow e Drop Shadow.

tutoriaisphotoshop.net

20. Pressione a letra E do teclado para selecionar a Eraser Tool, escolha um brush como o da foto abaixo.

tutoriaisphotoshop.net

21. Passe o brush na parte inferior do documento, no final seu botão ficará como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://www.webdesign.org/photoshop/drawing-techniques/web-2-0-button.15158.html

COMENTÁRIOS

BLOGGER: 2
  1. Que mania fdp de por música em site!

    ResponderExcluir
  2. Oi Luciano, não coloquei música no blog, o problema é um dos vídeos que fiz o embed, o autor colocou para que ele desse play automaticamente... também assustei quando entrei no blog.

    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,153,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,474,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Botão web com linhas transversais.
Botão web com linhas transversais.
http://www.andresugai.org/Tutoriais/11.2011/T01/imagem22.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2011/11/botao-web-com-linhas-transversais.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2011/11/botao-web-com-linhas-transversais.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