Como criar uma barra de loading no Photoshop.

COMPARTILHAR:

Descrição: Hoje veremos como criar o design de um carregador (loading) para sites utilizando ferramentas, layer styles e alguns modos de bl...

Preview Descrição: Hoje veremos como criar o design de um carregador (loading) para sites utilizando ferramentas, layer styles e alguns modos de blend.

tutoriaisphotoshop.net






01. Pressione Ctrl+N para criar um novo documento, defina o tamanho em 450x200 pixels, 72 dpi's e modo de cor em RGB, pressione Ok, escolha a cor #22262b e 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 layer com a cor escolhida.

tutoriais photoshop



02. Pressione Ctrl+J para duplicar a layer, vá em Filter> Noise> Add Noise e defina os valores abaixo.

tutoriais photoshop

03. Diminua a opacidade da layer para 5%.

tutoriais photoshop

04. Defina a cor de Foreground como #ffffff, pressione a letra B do teclado para selecionar a Brush Tool, escolha um brush de pontas suaves e tamanho em cerca de 285 pixels, hardness em 0% e opacidade em 100%, pressione Ctrl+Shift+Alt+N para criar uma nova layer e dê apenas um clique no meio do documento como na foto abaixo.

tutoriais photoshop

05. Reduza a opacidade da layer para 30%.

tutoriais photoshop

06. Defina a cor de Foreground como #ffffff, pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, certifique-se de que a opção Shape esteja selecionada e crie um shape como o da foto abaixo.

tutoriais photoshop

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

tutoriais photoshop

tutoriais photoshop

tutoriais photoshop

tutoriais photoshop

08. Sua imagem deverá ficar como a da foto abaixo.

tutoriais photoshop






09. Com a tecla Ctrl pressionada clique sobre a miniatura da Shape Layer para ativar a seleção ao redor do shape.

tutoriais photoshop

10. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, vá em Select> Modify> Contract.

tutoriais photoshop

11. Defina o valor de 1 pixel e pressione Ok, defina cor de Foreground como #27b9dd e a de Background como #1494b4, pressione a letra G do teclado para selecionar a Paint Bucket Tool, escolha o modo Linear e aplique o gradiente de cima para baixo.

tutoriais photoshop

12. Defina a opacidade da layer em 60%, pressione Ctrl+J para duplicar a layer e defina o modo de blend da nova layer em Overlay.

tutoriais photoshop

13. Pressione Ctrl+Shift+Alt+N para criar uma nova layer, defina sua cor de Foreground como #ffffff, pressione a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Path esteja selecioada e crie um traço diagonal como o da foto abaixo.

tutoriais photoshop






14. Com a tecla Ctrl pressionada clique sobre a miniatura do shape da barra para ativar a seleção ao redor do shape, pressione Ctrl+Shift+I para inverter a seleção, clique na layer do traço que criamos e pressione Delete para retira o excesso de traço.

tutoriais photoshop

15. Mude o modo de blend da layer para Overlay e defina a opacidade em 15%, pressione Ctrl+J para duplicar a layer, pressione a letra V do teclado para selecionar a Move Tool, mova a cópia da layer alguns pixels para o lado direito, repita a operação até que sua imagem fique como a da foto abaixo.

tutoriais photoshop

site de origem: http://existtocreate.com/tutorial-create-a-progress-bar/

COMENTÁRIOS

BLOGGER: 2
Loading...
Nome

.ai,18,.eps,8,.jpg,5,.png,12,.psd,288,.svg,2,2006,90,2007,380,2008,943,2009,1780,2010,1823,2011,1825,2012,1765,2013,240,2014,559,2015,1197,2016,511,360,4,abril,211,abstrato,56,actions,60,adobe,4,adobe max,1,agosto,347,ajax,1,allan portilho,1,animação,39,arte,27,artistas do photoshop,990,axis,5,backgrounds,1,basekit,1,básico,52,benq,9,bethesda,4,bgs,13,bmx,1,booombox,2,brasilmegaarena,2,brushes,93,bug,1,capcom,1,cartazes de cinema,7,cartazes de rock,114,codemasters,1,com2us,1,css3,1,curta,6,de(ath)sign,236,designbunkertp,1,dezembro,447,dica ninja,99,dificuldade 1,19,dificuldade 2,214,dificuldade 3,648,dificuldade 4,190,dificuldade 5,24,divulgação,1,diy,32,documentário,20,dollarphotoclub,37,download,1134,edição de vídeo,1,efeito,733,esportes,11,fastcom,3,ferramentas online,1,fevereiro,280,filme,1,flipbook,1,flow motion,1,fontes,409,fotolia,13,fotoshistoricas,40,fotosqueabalaramomundo,75,gamebau,1,gifart,2,goPro,1,gradientes,7,guest post,5,hitbox,1,hopi-hari,1,html5,3,hyperlapse,5,hyperx,9,ícones,91,idc,2,imagem,1,infográfico,1,inspiração,34,janeiro,275,julho,254,junho,228,kingston,6,layer style,22,leitores,1,lightpainting,1,live-stream,2,maio,153,março,264,matéria,468,maurício de souza produções,1,melhordasemana,17,mob2b,1,mockup,30,música,48,natal,1,novembro,527,off-topic,208,outubro,508,palestra,7,parkour,1,patern,35,pdf,1,pérolas do instagram,1,photoshop básico,1,Photoshop CC,2,photoshop express,1,photoshop week,1,pixel show,1,plugin,4,positivo,10,post pago,2,prezi,1,printi,2,project ten,2,psdownloads,1,pshelp,1,pszuero,2,purgatorium 90,1,razer,19,responsivo,2,retoque de imagem,102,rixty,3,saga,3,setembro,288,shapes,2,showreel,7,skate,2,skillab,1,smyowl,6,sony,1,speedart,3,speedpaint,8,splashscreen,1,stop-motion,9,tectoy,1,template,4,teste,1,texto,158,textura,127,tilt-shift,3,timelapse,21,tipografia,3,tp,1,tunning virtual,3,tutorial,2104,tutorial builder,2,tutorial player,2,ubisoft,32,ui,15,unboxing,1,vice,64,vídeo,459,vídeo aula,204,video mapping,3,wallpaper,1,web,18,webfont,1,xma,5,
ltr
item
::Tutoriais Photoshop::: Como criar uma barra de loading no Photoshop.
Como criar uma barra de loading no Photoshop.
http://www.andresugai.org/Tutoriais/03.2013/T16/imagem18.jpg
::Tutoriais Photoshop::
http://www.tutoriaisphotoshop.net/2013/03/como-criar-uma-barra-de-loading-no.html
http://www.tutoriaisphotoshop.net/
http://www.tutoriaisphotoshop.net/
http://www.tutoriaisphotoshop.net/2013/03/como-criar-uma-barra-de-loading-no.html
true
34833248
UTF-8
Todos os Posts Carregados Não encontramos nenhum post VEJA TODOS Leia Mais Responda Cancelar Resposta Deletar Por Home PÁGINAS POSTS Veja Todos RECOMENDAMOS TAMBÉM TAG ARQUIVO BUSCA TODOS OS POSTS Não encontramos nenhum post relacionado com sua busca Voltar para Home Domingo Segunda Terça Quarta Quinta Sexta Sábado Domingo 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 Siga CONTEÚDO PREMIUM Compartilhe para desbloquear este conteúdo Copie todo código Selecione todo código Todos os códigos foram copiados para o Clipboard Não foi possível copiar todo código / textos, por favor pressione [CTRL]+[C] (ou CMD+C no Mac) para copiar