Neste tutorial vamos explicar como você poderá fazer uma barra estilo Glass. Você poderá utilizar essa técnica para aplicar no topo de seu site, usando o resultado final como um background para algum menu horizontal.

Nota: Caso esteja aplicando o efeito em uma superfície muito clara, você poderá utilizar cores mais escuras na hora de aplicar o gradiente, e o efeito será o mesmo.

Vamos começar:

1. Abra uma imagem de sua preferência, no caso usaremos a imagem abaixo:

A layer (camada) onde a imagem se encontra irei chamar de "Base".

2. Pinte o seu background com a cor "#2f2f2f". Agora aperte a tecla "D" para resetar sua paleta de cores.

3. Selecione a ferramenta "Rectangular Marquee Tool" e faça em sua imagem uma seleção mais ou menos com as mesmas dimensões de altura representada abaixo:

4. Com a layer "Base" ativa e com a seleção mostrada na figura acima feita, pressione "CTRL + C" e em seguida "CTRL + V". Perceba que apenas foi criado uma nova layer, apresentando a cópia da área da seção feita sobre a layer "Base". Dê o nome dessa nova camada de "Blur 1″.

5. Agora pressione "CTRL + SHIFT + N" para criar uma nova layer, nomeando-a de "Sobrepor".

6. Aperte "X" para inverter sua paleta de cores. Com a tecla "CTRL" pressionada, dê um clique na layer "Blur 1″. Pinte a seleção feita, usando a ferramenta "Paint Bucket Tool", com a cor branca.

7. Deixe o "Fill" (opção localizada logo abaixo da opção "Opacity") dessa camada em "50%" e a "Opacity" em "70%".

8. Sem ter desfeito a seleção, ative a layer "Blur 1″. Com a layer ativa e a seleção anterior ainda feita, vá até Filter -> Blur -> Gaussian Blur e aplique um "Radius" de 3 pixels.

9. Aperte "CTRL + J" para duplicar a layer "Blur 1″. De o nome da layer duplicada de "Blur 2″.

10. Com a layer "Blur 2″ ativa, dê um clique sobre o ícone da layer "Sobrepor" com a tecla "CTRL" pressionada. Aperte "CTRL + F" duas vezes para aplicar o último filtro usado, no nosso caso o "Gaussian Blur".

11. Agora aperte "CTRL + D" para desfazer a seleção.

12. Ative a layer "Sobrepor", dê um clique com o botão direito sobre seu ícone e no menu que aparecerá clique na opção "Blending Options". Na janela que abrirá atribua as configurações seguintes para as opções "Outer Glow" e "Inner Glow":

13. Agora crie uma nova layer (CTRL + SHIFT + N) denominada "Brilho". Dê um clique no ícone da layer "Sobrepor" com a tecla "CTRL" pressionada.

14. Agora pressione "CTRL + SHIFT + I" para inverter a seleção. Faça uma seleção como mostra a figura (parte destacada em branco) abaixo com a tecla "SHIFT" pressionada:

Feita a seleção mostrada na figura acima e aperte "CTRL + SHIFT + I" para inverter a seleção.

Nota: Como se pode notar, o objetivo final é dividir a seleção do retângulo branco em duas partes.

15. Agora selecione a ferramenta "Gradient Tool". Para aplicação do gradiente, o mesmo deve ter em sua barra de ferramentas as seguintes configurações:

16. Com a layer "Brilho" ativa, trace o seguinte gradiente:

17. Se o gradiente tiver ficado muito forte, simplesmente refaça ou altere sua opacidade ("Opacity"), reduzindo-a até chegar a um resultado satisfatório.

18. Agora vamos arrumar alguns detalhes. Essa etapa tem como objetivo tirar as bordas do "Outer Glow", aplicadas em passo 12, que ficaram sobrando para fora da imagem.

19. Ative a layer "Sobrepor" e crie uma nova layer (se quiser pode nomeá-la de "Sobrepor2″).

20. Com a layer "Sobrepor2″ ativa, de um clique sobre o nome da layer "Sobrepor" com a tecla "CTRL" pressionada. Aperte "CTRL + E" para unir as layers selecionadas.

21. Com a layer "Sobrepor2″ ativa, de um clique no ícone da layer "Base". Aperte "CTRL + I" para inverter a seleção. Então aperte "Delete" e em seguida "CTRL + D" para desfazer a seleção.

22. Agora vamos ajustar o Brilho Lateral: Ative a layer "Brilho".

23. Crie uma nova layer denominada "Lateral". Com a layer "Lateral" ativa, dê um clique sobre o ícone da layer "Base" com a tecla "CTRL" pressionada.

24. Pressione "D" e em seguida "X". Usando a ferramenta "Paint Bucket Tool" e com a layer "Lateral" ativa, pinte a seleção. Deixe o "Fill" da layer "Lateral em "0%".

25. Clique com o botão direito sobre a layer "Lateral" e em seguida "Blending Options". Aplique as configurações abaixo para o "Inner Glow":

26. Crie agora uma nova layer denominada "Lateral2″. Com a layer "Lateral2″ ativa, de um clique sobre o nome da layer "Lateral" com a tecla "CTRL" pressionada. Aperte "CTRL + E" para unir as layers selecionadas.

27. Estamos praticamente no fim. Selecione a ferramenta "Eraser Tool" e use as seguintes configurações:

28. Agora basta apagar o excesso superior da layer "Lateral2″. Pronto, sua imagem está terminada!