André Sugai
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/
Dificil ficar perfeito no ultimo passo, é mais facil e rapido criar uma pattern e usar em toda a barra.
Obrigado pelo tutorial..