Criando uma barra de loading no Photoshop.

Descrição: Neste tutorial veremos como criar o visual de uma barra de loading (carregamento), muito usada em sites em Flash, para isso usaremos layer styles, shapes e alguns filtros.

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

01. Pressione Ctrl+N para criar um novo documento, defina os valores abaixo e pressione Ok.

02. Escolha uma cor qualquer 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, clique duas vezes sobre a layer Background e pressione Ok, vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo.

03. 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 U do teclado para selecionar a Rounded Rectangle Tool, certifique-se de que a opção Shape Layers esteja ativada, defina os valores abaixo na barra de opções da ferramenta e crie um retângulo nas medidas indicadas logo abaixo.

04. Agora vá em Layer> Layer Style> Color Overlay, Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow e defina os valores abaixo

05. Sua barra deverá ficar como a da foto abaixo.

06. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool novamente, defina os valores abaixo na barra de opções da ferramenta e crie um novo retângulo usando as medidas abaixo.

07. Agora clique aqui para fazer o download do Pattern que usaremos neste passo (caso queira utilizar o mesmo pattern), instale o pattern (caso não saiba como instalar patterns clique aqui para ver a vídeo-aula sobre o assunto), vá em Layer> Layer Style> Pattern Overlay, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Inner Shadow e defina os valores abaixo.

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

09. Com a tecla Ctrl pressionada clique sobre a miniatura da layer da segunda barra criada (com listas), isto irá ativar a seleção ao redor do shape, pressione a letra M do teclado para selecionar a Rectangular Marquee Tool, na barra de opções da ferramenta marque a opção Subtract from Selection, crie uma seleção na parte de baixo da barra para que ela fique como na foto abaixo.

10. 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 a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, 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 branca, defina a opacidade da layer em 15%, pressione Ctrl+D para desabilitar a seleção.

11. Pressione a letra U do teclado para selecionar a Rounded Rectangle Tool, crie um pequeno retângulo como na foto abaixo.

12. Pressione Shift+U para alternar para a Custom Shape Tool, clique em Shape na barra de opções da ferramenta e escolha o Shape abaixo, defina a barra de opções da ferramenta como na foto abaixo e aplique o shape, pressione Ctrl+T para abrir a caixa de Free Transform, rotacione o Shape e pressione Enter para finalizar a transformação.

13. Clique com o botão direito do mouse sobre a layer do Shape que acabamos de criar e escolha a opção Merge Layers para mesclar as duas layers que estamos trabalhando, clique com o botão direito do mouse sobre a layer que contém o retângulo de background da barra de loading e escolha a opção Copy Layer Styles, clique com o botão direito do mouse sobre o Shape que acabamos de criar e escolha a opção Paste Layer Styles, pressione a letra T do teclado para selecionar a Horizontal Type Tool, escreva uma palavra qualquer, defina a opacidade da layer em 60% e no final sua barra de loading estará como a da foto abaixo.

Site de origem: http://www.webdesign.org/photoshop/web-layout/how-to-design-a-sleek-progress-bar-in-photoshop.20168.html