Efeito botão “orb” em links – Etapa 1 (PhotoShop)

Vou mostrar aqui como criar os famosos botões no estilo “orb”. Aqueles botões que parecem bolas de vidro…

Bom, a intenção é criar este efeito em links, então precisaremos cumprir duas etapas:

Etapa 1 (PhotoShop) – Como criar as imagens que serão usadas para o efeito.
Etapa 2 (DreamWeaver) – Como criar o efeito utilizando html+CSS

> Vale lembrar que você pode usar o editor de imagens e de páginas web de sua preferência. Não precisa ser os que menciono neste tutorial. Mas vai caber a você adaptar os passos ao seu modo de trabalho e do seu software :)

> Pulo do Gato – Algumas ações tem um asterisco * ao lado delas. Isto significa que existe, no fim deste tutorial, uma dica rápida de como executar aquela ação, como a de criar uma nova camada* por exemplo :)

> Então…. mão na massa!

1. Crie um novo arquivo de fundo branco e do tamanho que você quiser, mais tarde veremos como recortar a imagem para ficar do tamanho desejado. Para este turorial eu estou usando 200x200px. Crie um novo layer*, o nome será orb-bg. Com a ferramenta eclipse, Crie um círculo perfeito*. Aplique um preenchimento gradiente no círculo de #2a2a2a (no topo) para #3e3e3e (no fundo).

2. Crie outro layer, com o nome orb-glass, e faça uma elipse na cor branca conforme mostrado na figura abaixo:

3. Usando a ferramenta de seleção circular (round marquee tool), faça uma seleção 1/3 abaixo da camada orb-glass que foi criada no passo 2, conforme mostra a imagem abaixo. Ative a “Feather Selection” clicando em Select > Feather ou usando a combinação de teclas Ctrl + Alt + D. Marque 30px de raio. Com a camada orb-glassselecionada, pressione a tecla del (delete) duas vezes.

*O atalho para o comando Feather (Ctrl + Alt + D) é o mesmo em todas as versões CS do Ps. No CS3 e CS4 este cimando se encontra em Selecionar > Modificar > Difusão ou Select > Modify > Feather. (O engraçado é que a palavra feather não tem nada a ver com a palavra difusão…)

4. Depois desta ação sua imagem deve ficar como esta abaixo. Mude a opacidade* da camada orb-glass se vc quiser.

5. Crie outra camada (layer) entre orb-glass e orb-bg. O nome desta camada será orb-bottom. Faça uma pequena elipse de cor preta na parte de baixo do circulo, conforme mostrado na figura abaixo:

6. Selecione esta mesma camada (orb-bottom) e aplique o efeito Gaussian Blur (Desfoque Gaugasiano) Através do menu Filter > Blur > Gaussian Blur. Marque 2.8px de desfoque (blur).

Se deu tudo certo, você terá algo parecido com a imagem acima. Mas ainda não está concluído pois ainda falta fazer o efeito de brilho ao passar o mouse (mouse over).

7. Crie uma nova camada entre a orb-butomm* e a orb-bg. Nomeie essa camada de over-glow. Com a ferramenta elipse, crie um formato oval com a cor* de preenchimento #00c1de (ou outra de sua preferência, exceto preto) conforme mostrado na figura abaixo.

8. Com a camada over-glow selecionada, ativar novamente o desfoque galgasiano (Filter > Blur > Gausian blur). Marque 9,0px de raio (radius) desta vez. Então você terá um efeito de brilho, como mostrado na imagem abaixo.

9. Duplique a camada orb-bottom e renomeie a cópia para orb-shadow

10. Então, arraste esta camada para baixo da camada orb-bg, e com esta camada ainda selecionada, pressione a tecla ↓ (seta para baixo) em seu teclado umas 4 vezes, para que esta sombra se desloque um pouco para baixo.

11. Clique na camada orb-bg com a tecla Ctrl (control) pressionada para criar uma marca de seleção no objeto, depoisinverta a seleção através do menu Select > Inverse, ou pressionando Shift + I. A intenção é selecionar a parte branca da camada… Após isso, clique na camada over-glow e pressione DEL ou Delete, para aparar as arestas

12. Ainda com a marca de seleção ativa, clique na camada orb-shadow e repita a ação.

13. Agora o passo final para completar o botão orb. Usando a ferramenta seleção elíptica (oval marquee tool), desenhe uma forma oval como mostrado na imagem abaixo. Ative a janela Feather usando Select> Feather ou com a tecla de atalho Ctri + Alt + D. Marque 30px e com a camada orb-bottom seleccionada, pressione DEL duas vezes.

14. E está pronto nosso botão orb com efeito de brilho! Você pode colocar ícones “dentro” do botão; basta colocar a imagem de sua preferencia entre as camadas orb-glass e orb-dottom. Veja as figuras abaixo :-D

———————————————–

Agora é hora de exportar as figuras para serem usadas na segunda parte desta série. (ou aonde você quiser usar!)

> Para começar, recorte a imagem para um tamanho menor, excluindo a área branda em volta. Para isto, use a ferramenta crop, destacada na figura abaixo. Faça um contorno o mais proximo possível do botão. você pode arrastar as alças para ajustar o tamanho. Após a definição da moldura, pressione ENTER para confirmar o corte. :)

> Agora vamos exportar! Para ver/exportar a figura “standart” (sem efeito) basta clicar no ícone de um olho ao lado da camada over-glow…

… E em seguida clicar em File > Save for Web…

> Aparecerá uma janela de exportação, onde as opções estão no lado direito da mesma. Dentre as várias opções de tipo, tamanho, qualidade… Escolha o mostrado abaixo, apenas para efeito de estudo. :)

> Marcou as opções? Beleza! Clica no botão SAVE e escolha um destino para seu arquivo.

Bom, agora só falta exportar a imagem do botão COM efeito. Então, vá na camada over-glow e clique no icone em forma de olho para a camada aparecer novamente…

… E em seguida clique novamente em File > Save for Web. Ou se preferir, pressione Ctrl + Alt + Shift + S e pronto! As imagens já estão prontas para serem usadas na segunda parte de nosso tutorial. :-)

———————————————————-

Dicas rápidas (pulo do gato)

• Selecionar uma camada -> Basta clicar na camada, na janela de camadas
• Exibir janela de camadas -> Windows > Layers ou pressione F7
• Criar uma nova camada -> Layer > New Layer / Colocar nome na janela que surge.
• Duplicar uma camanda -> Layer > Duplicade Layer
• Criar circulo perfeito -> Com a ferramenta elipse (elipse tool) arrastar o ponteiro segurando a tecla SHIFT
• Opacidade -> Na janela de camadas (layers), lá no topo à direita, tem um campo chamado Opacity ou Opacidade. 100% é sólido e 0% é invisivel (transparencia total)
• Cores de preenchimento -> Se estiver com aexibição padrão, existe no canto inferior esquerdo dois quadrados coloridos…

————————————————–

Então é isso. :-) Até a próxima!