Criando um box de preços para sites.

COMPARTILHE:

Descrição: Hoje veremos como criar o layout de um box de ítens para websites usando Layer Styles, Filtros e diversas ferramentas. ...

Preview Descrição: Hoje veremos como criar o layout de um box de ítens para websites usando Layer Styles, Filtros e diversas ferramentas.

tutoriaisphotoshop.net






01. Pressione Ctrl+N para criar um novo documento, defina o tamanho de 500x600 pixels, 72 dpi´s e modo de cor em RGB, pressione Ok, pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, certifique-se de que a opção Shape Layers esteja selecionada, crie um shape como o da foto abaixo, vá me Layer> Layer Style> Stroke, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Inner Glow e defina os valores abaixo.

tutoriaisphotoshop.net

02. Ainda com a Rounded Rectangle Tool selecionada crie um novo retângulo como o da foto abaixo, vá em Layer> Layer Style> Outer Glow, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Stroke e defina os valores abaixo.

tutoriaisphotoshop.net

03. Agora pressione Shift+U até que a Custom Shape Tool esteja selecionada, clique na opção Shape na barra de opções da ferramenta no alto da tela e escolha o shape indicado na imagem abaixo, crie um triângulo no canto direto do último shape que criamos, utilize a mesma cor usada no retângulo de background, pressione Ctrl+T para abrir a caixa de Free Transform, ajuste o triângulo para que ele fique como na foto abaixo, pressione Enter para finalizar a transformação, com a tecla Ctrl pressionada clique sobre a miniatura da layer do shape (triângulo) para ativar a seleção ao redor, pressione 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 e clique no documento para preencher a seleção com a cor preta, pressione Ctrl+D para desabilitar a seleção, vá em Filter> Blur> Gaussian Blur e defina os valores abaixo, repita o procedimento no canto direito.

tutoriaisphotoshop.net

04. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva uma palavra qualquer no centro do shape que estamos trabalhando, caso queira utilizar a mesma fonte usada neste tutorial clique aqui para fazer o download, vá em Layer> Layer Style> Inner Shadow, Layer> Layer Style> Outer Glow e defina os valores abaixo.

tutoriaisphotoshop.net

05. Pressione Shift+U até que a Line Tool seja selecionada, com a tecla Shift pressionada, escolha a cor indicada abaixo e crie as divisões do box que estamos criando.

tutoriaisphotoshop.net

06. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva os ítens do seu box, caso queira utilizar a fonte usada neste tutorial clique aqui para fazer o download, vá em Layer> Layer Style> Drop Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

07. Pressione a letra M do teclado para selecionar a Elliptical Marquee Tool, crie uma seleção oval como na foto abaixo, pressione Ctrl+Shift+Alt+N para criar uma nova layer, deixe essa layer abaixo da layer do shape superior, escolha um cinza escuro e 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, pressione Ctrl+D para desabilitar a seleção, vá em Filter> blur> Gaussian Blur e defina os valores abaixo.

tutoriaisphotoshop.net

08. Pressione a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Shape Layers esteja ativada, na borda do box criado faça um triângulo como o da foto abaixo, vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

tutoriaisphotoshop.net

09. Ainda com a Pen Tool selecionada crie dois pequenos detalhes na cor indicada na foto 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 T do teclado para selecionar a Horizontal Type Tool, escreva um preço qualquer, pressione Ctrl+T para abrir a caixa de Free Transform, rotacione e redimensione o valor, pressione Enter para finalizar a transformação, vá em Layer> Layer Style> Outer Glow e defina os valores abaixo.

tutoriaisphotoshop.net

11. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool novamente, crie um novo retângulo como na foto abaixo, vá em Layer> Layer Style> Outer Glow, Layer> Layer Style> Stroke e defina os valores abaixo.

tutoriaisphotoshop.net

12. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva a palavra Sign Up, neste tutorial a cor usada foi a #2790bc, vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow e defina os valores abaixo.

tutoriaisphotoshop.net

13. No final seu box estará como o da foto abaixo.

tutoriaisphotoshop.net

Site de origem: http://bloomwebdesign.net/myblog/2011/04/03/design-pricing-plan-boxes-for-a-hosting-company/

COMENTÁRIOS

BLOGGER: 3
  1. Gostei pacas do tutorial, porém estou com uma dúvida: na parte do tutorial de nº 01 você diz: 01. certifique-se de que a opção Shape Layers esteja selecionada, crie um shape como o da foto abaixo, vá me Layer> Layer Style> Stroke, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Inner Glow e defina os valores abaixo.
    Fiz o procedimento porém a cor não fica igual conforme a imagem um cinza bem claro. Pode me ajudar?

    ResponderExcluir
  2. nem coloco a fonte pra download --'

    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,374,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,513,video mapping,3,wallpaper,1,warspear,1,wbgames,1,web,25,webfont,1,wix,3,xma,5,
ltr
item
::Tutoriais Photoshop::: Criando um box de preços para sites.
Criando um box de preços para sites.
http://www.andresugai.org/Tutoriais/04.2011/T10/imagem13.jpg
::Tutoriais Photoshop::
https://www.tutoriaisphotoshop.net/2011/04/criando-um-box-de-precos-para-sites.html
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/
https://www.tutoriaisphotoshop.net/2011/04/criando-um-box-de-precos-para-sites.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