Tutorial: Botão estilo Glossy

COMPARTILHE:

Como criar um botão de RSS com estilo Glossy.

Preview Descrição: Como criar um botão de RSS com estilo Glossy.

  • [message]
    • ##check##AVISO: Botão estilo Glossy

      • 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 :)

tutoriais photoshop

01. Pressione Ctrl+N para criar um novo arquivo, defina um tamanho qualquer com 72 dpi´s e modo de cor em RGB, pressione Ok, pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, marque a opção Shape Layers na barra de opções da ferramenta e desenhe o formato de seu botão como na foto abaixo, caso queira aumentar ou diminuir o arredondamento nas bordas antes de criar a forma do botão defina o valor da modificação no campo Radius na barra de opções da ferramenta.

Botão estilo Glossy

02. Agora vá em Layer> Layer Style> Gradient Overlay e defina o valor do gradiente usado como 434343 no primeiro e segundo indicador e 000000 no terceiro indicador.

Botão estilo Glossy

03. Agora vá em Layer> Layer Style> Stroke e defina os valores usados abaixo, neste tutorial a cor usada foi 363636.

Botão estilo Glossy

04. Vá em Layer> Layer Style> Inner Glow e defina os valores abaixo.

Botão estilo Glossy

05. Seu botão deve ficar parecido com o da imagem abaixo.

Botão estilo Glossy

06. 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, pressione a letra U do teclado para selecionar a Rounded Rectangle Tool novamente e crie outro retângulo, desta vez um pouco menor que o anterior e na parte superior do reângulo criado anteriormente como na foto abaixo, caso seu novo Shape já apareça com layer styles aplicados clique com o botão direito do mouse sobre a layer escolha a opção Clear Layer Styles.

Botão estilo Glossy

07. Clique com o botão direito do mouse sobre a nova layer na paleta de layers e escolha a opção Rasterize Layer, pressione a letra Q do teclado para ativar o Quick Mask Mode, pressione a letra G do teclado para selecionar a Gradient Tool, escolha um gradiente que vá do preto para o branco, clique na parte de cima da imagem e arraste até a parte de baixo, sua imagem deverá ficar como a da foto abaixo, pressione Ctrl+D para retirar a seleção.

Botão estilo Glossy

08. Pressione a letra Q novamente para sair do Quick Mask Mode, você terá uma seleção ativa, pressione Delete e sua imagem deverá ficar como a da foto abaixo.

Botão estilo Glossy

09. Agora pressione a letra T do teclado para selecionar a Horizontal Type Tool e escreva algo no seu botão, no botão usado no tutorial foi escrito a palavra Entries RSS, vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

Botão estilo Glossy

10. Seu botão deve ficar como o da foto abaixo.

Botão estilo Glossy

11. Abaixo seguem outras variações do mesmo botão criado.

Botão estilo Glossy

Botão estilo Glossy

Botão estilo Glossy

Botão estilo Glossy

site de origem: http://iris-design.info/photoshop/web-20-style-buttons/

COMENTÁRIOS

BLOGGER: 9
  1. olá amigos! quero saber que esta aconteciendo que estam demorando em colocar los tutoriales no dia. Sin contar que estam muito simples.
    De todas maneras, los felicito por seu uno de los mejores tutoriales, mais no descuiden esos detalhes,

    um abraço

    ResponderExcluir
  2. Eu juro q já vi esse tuto no blog
    =/

    ResponderExcluir
  3. Tavinho Hola, lo siento por el retraso de tutoriales, puede estar seguro de que todos los días tenemos un nuevo tutorial (con la excepción de los fines de semana y festivos (de Sao Paulo, Brasil), muchas gracias por visitarnos! De qué país eres?

    Oi Jeremy, são muitos tutoriais mas esse eu não lembro de ter postado não... dei uma pesquisada no arquivo de tutoriais e não achei nada, se estiver repetido mesmo eu substituirei ok? obrigado pela visita!! :)

    ResponderExcluir
  4. Excelente para quem ainda não sabia dessa técnica, se tiver repetido, uma recapitulada nunca é de mais. ;)

    Abraço,
    Fabiano Shark

    ResponderExcluir
  5. no modo quick mask nao consigo usar a gradient pq?

    ResponderExcluir
  6. Acho q fiz algo errado pois o meu botão não ficou igual. Vou tentar de novo depois. Rasterize Layer

    ResponderExcluir
  7. Kramba! Apesar do meu não ter ficado igual ao do tuto, achei q o meu ficou até melhor! Muito bom! Estou aprendendo a mexer no Photoshop aqui! Flws!

    ResponderExcluir
  8. Show de bola o tuto. Parabéns.

    Abraço,
    Claudeci Goularte.

    ResponderExcluir
  9. qul o tipo de letra utilizado?

    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,207,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,484,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Tutorial: Botão estilo Glossy
Tutorial: Botão estilo Glossy
Como criar um botão de RSS com estilo Glossy.
https://www.andresugai.org/Tutoriais/05.2008/T07/imagem14.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2008/05/boto-estilo-glossy.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2008/05/boto-estilo-glossy.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