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.

(adsbygoogle = window.adsbygoogle || []).push({});

01. Pressione Ctrl+N para criar um novo documento, defina o tamanho em 450×200 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 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.

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 Shadow, Layer> Layer Style> Inner Shadow, Layer> Layer Style> Color Overlay, Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

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

(adsbygoogle = window.adsbygoogle || []).push({});

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.

(adsbygoogle = window.adsbygoogle || []).push({});

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.

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