Criando um botão em forma de elipse.

COMPARTILHE:

Descrição: Hoje veremos como criar um botão (web) redondo usando ferramentas, filtros e layer styles. 01. Pressione a Ctrl+N para ...

Preview Descrição: Hoje veremos como criar um botão (web) redondo usando ferramentas, filtros e layer styles.

tutoriaisphotoshop.net






01. Pressione a Ctrl+N para criar um novo documento, defina o tamanho de 600x400 pixels, 72 dpi´s e modo de cor em RGB, pressione OK, defina a cor de Foreground em #383838 e a de Background como #161616, pressione a letra U do teclado para selecionar a Elipse Tool, certifique-se de que a opção Shape Layers esteja ativada e com a tecla Shift pressionada clique e arraste para criar uma elipse no documento, vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

02. Vá em Layer> Layer Style> Inner Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

03. Pressione Ctrl+J para duplicar a layer, dê o nome de copy shape para a nova layer, pressione Ctrl+T para abrir a caixa de Free Transform e com as teclas Alt+Shift pressionadas clique e arraste para redimensionar a cópia como na foto abaixo.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

06. Pressione Ctrl+J para duplicar a layer, dê o nome de copy shape 2 para a nova layer, pressione Ctrl+T para abrir a caixa de Free Transform e com as teclas Alt+Shift pressionadas clique e arraste para redimensionar a cópia como na foto abaixo.

tutoriaisphotoshop.net

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

tutoriaisphotoshop.net

08. Vá em Layer> Layer Style> Bevel and Emboss, defina os valores abaixo.

tutoriaisphotoshop.net

09. Vá em Layer> Layer Style> Satin e defina os valores abaixo.

tutoriaisphotoshop.net

10. 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 a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Shape Layers esteja selecionada e crie um shape como o da foto abaixo.

tutoriaisphotoshop.net

11. Mude o modo de blend da layer para Overlay e defina a opacidade em 10%, clique com o botão direito do mouse sobre a layer e escolha a opção Rasterize Layer, com a tecla Ctrl pressionada clique sobre a miniatura da layer Copy Layer 2 para ativar a seleção, clique na layer do Shape criado, pressione Ctrl+Shift+I para inverter a seleção e pressione Delete.

tutoriaisphotoshop.net

12. Pressione a letra U do teclado para selecionar a Custom Shape Tool (ou escolha um logo, figura, desenho etc), certifique-se de que a opção Shape Layers esteja ativada e com a tecla Shift pressionada clique e arraste para inserir o shape no documento, defina a opacidade da layer para 75% e mude o modo de blend da layer para Overlay.

tutoriaisphotoshop.net

13. Pressinone Ctrl+Shift+Alt+N para criar uma nova layer, 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, clique no documento para preencher a layer com preto, mude o modo de blend da layer para Screen, vá em Filter> Render> Lens Flare e defina os valores abaixo.

tutoriaisphotoshop.net

14. Vá em Filter> Render> Lighting Effects e defina os valores abaixo.

tutoriaisphotoshop.net

15. No final sua imagem estará como a da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://psdsymptom.com/2010/08/07/create-modern-glossy-icon-in-photoshop/

COMENTÁRIOS

BLOGGER: 11
  1. Perfeito irmão! Tu é foda, ou pelo menos suas fontes.. Abraços!

    ResponderExcluir
  2. Realmente , o resultado está muito bom e MUITO simples, Obrigado por mas este tutorial Andre (;
    Abraço.

    ResponderExcluir
  3. Bacana o tutorial, porém não consigo passar do passo 13, pois o Lens Flare não é aplicado em uma camada vazia!

    Socoorrro! rs

    No mais, tutorial da hora!
    Valeu André!

    ResponderExcluir
  4. Sugai . Tudo bem ? Olha eu tambem não consegui aplicar o filto Lens flare na camada vazia criada no passo 13. Por favor me ajude.O botão está muito bonito só falta a luz. Um abração .

    ResponderExcluir
  5. Caros Tiago e Mario: Como vocês conseguiram fazer os passos 13 e 14 ? Eu não consegui aplicar os filtros Lens flare e lighting na camada vazia criada neste passo 13. Um grande abraço e muito obrigado pelo que puderem me orientar. Carlos

    ResponderExcluir
  6. Socorro!!! Meus apelos não ecoaram ... Se alguem souber responder às minhas indagações acima; por favor me ajude . Um grande abraço .

    ResponderExcluir
  7. Ó gente !! Procura o Sugai pra mim .
    Carlos Alberto

    ResponderExcluir
  8. DESISTO. !!! Por favor : Se o Sugai perguntar por mim... Diz que fui por aí ; com o meu Notebook debaixo do braço , desgostoso por não concluir este tutorial, depois de muita insistência frustrada. Em qualquer esquina eu pergunto ; em qualquer botequim eu entro tomo muita birita pra esquecer este site. Tenho 68 anos, hoje é dia dos pais, mas mesmo assim , meio triste vou passar o domingo com minha família que é minha alegria maior. Vou beber muita cerveja . Quem sabe; no final deste dia, tenha Eu, a surpresa de ter minhas dúvidas respondidas . Mas , depois de tanta comemoração que vai rolar , hoje não vou conseguir entender nada. Já comecei a tomar umas e outras . VIVA DEUS !!! ,VIVA O SOL MARAVILHOSO QUE ESTÀ NO MEU RIO DE JANEIRO !!!VIVA TODOS VOCÊS !!! VIVA O PHOTOSHOP !!!viva até os Pais dos parlamentares corruptos .... Eu bebo sim... Sugai cadê você ?

    ResponderExcluir
  9. Oi Sh4Dy , Doug e Carlos Alberto, antes de aplicar o Lens Flare você precisa preencher a layer com uma cor qualquer, acabei esquecendo deste detalhe (foi mal), no caso preenchi a layer com a cor preta e mudei o modo de blend da layer para Screen e depois adicionei o filtro Lens Flare, espero que isso ajude a finalizar o projeto de vocês, obrigado pelas visitas!! :D

    ResponderExcluir
  10. Sugai, muito obrigado. Consegui fazer o tutorial até o final; ficou ótimo. Voltei a sorrir !!! Um abração.

    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::: Criando um botão em forma de elipse.
Criando um botão em forma de elipse.
http://www.andresugai.org/Tutoriais/07.2011/T16/imagem15.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2011/07/criando-um-botao-em-forma-de-elipse.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2011/07/criando-um-botao-em-forma-de-elipse.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