Páginas

Photoshop: Como criar uma barra de loading no Photoshop.


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

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.



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

03. Diminua a opacidade da layer para 5%.




04. Defina a cor de Foreground como #ffffff, pressione a letra B do teclado para selecionar a Brush Toolescolhaum 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.




05. Reduza a opacidade da layer para 30%.




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.



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









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



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



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



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.



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.



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.



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.



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.



[Post: +Emerson Souza ]

Instituto IINTTEC

A IINTTEC está a mais de 10 anos no mercado, e a mais de 10 anos capacitando alunos para um futuro brilhante, formando profissionais de postura e qualificação, ensinando todo o conhecimento necessário para que o aluno se torne um profissional completo no mercado de trabalho.

Nenhum comentário:

Postar um comentário