[TUTO] ..: Botão com efeito metálico :..

::Objetivo::

Mostrar uma técnica de construção de efeito metálico em um botão retangular para link.

::Visão antecipada::

Este tutorial mostra uma técnica para se obter o efeito metálico em um botão, conforme esta

VISÃO ANTECIPADA (abre em outra janela).

::A forma inicial::

Para este tutorial construiremos um botão com dimensões iguais a 180 x 35px. Mas, é claro, você adota as dimensões de acordo com suas necessidades.

Desenhe um retângulo de 180 x 35px com as bordas arredondadas. Ajuste o parâmetro de arredondamento para 44, a cor de preenchimento #FFFFFF (branca) e a cor da borda #999999 (cinza), conforme mostrado na figura a seguir:




::Aplicando gradiente::

Nosso primeiro efeito será a aplicação de um gradiente vertical conforme mostrado abaixo. Ajuste oa parâmentros do gradiente para:

Preenchimento: gradiente linear;
Cores de preenchimento: superior #FFFFFF (branca), no meio #999999 (cinca médio) embaixo #CCCCCC (cinza claro).
Nota: Por default só aparecem as duas extremidades para escolha de cor. Para o preenchimento no meio você cria o triangulozinho de preenchimento clicando na posição que você deseja que ele apareça. Você pode inserir quantos pontos de preenchimento quiser;
Ajustes a alça de preenchimento conforme mostrado na figura ou seja na vertical com a bolinha embaixo e o quadradinho em cima. Para aparecer a alça basta clicar a ferramenta "seta preta" na forma e para diminuir a alça clique e arraste o quadradinho;



1-) Desenhe um retângulo (sem os cantos arredondados) um pouco menor que o retângulo que já foi desenhado. Eu adotei as dimensões de 165 x 22px (menor que nosso retângulo inicial de 180 x 35px).

Aplique os seguinte efeitos neste novo retângulo:

Gradiente linear vertical com os seguintes cores:
#CCCCCC - #999999 - #CCCCCC.




Filters » Shadow and Glow » Inner Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #666666 - 63% - 3 - 315°.
Filters » Shadow and Glow » Drop Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #333333 - 65% - 1 - 180°.
Filters » Shadow and Glow » Drop Shadow com os seguintes parâmetros:
Tamanho: 2 - Cor #333333 - 65% - 3 - 90°.
2-) Depois de aplicado estes efeitos você obterá um retângulo semelhante ao mostrado abaixo:



3-) A seguir construa outro retângulo menor que este que você acabou de construir, na cor #FFFFFF (branca) com largura um pouco menor (eu adotei as dinesões de 160 x 12px) e com metade da altura daquele retângulo. Aplique uma opacidade de 25% e coloque dentro do retângulo construido anteriormente. Veja figura abaixo:



4 -E para finalizar coloque esta última construção dentro do retângulo com cantos arredondados construido inicialmente. Ver figura abaixo:



::Aplicando o texto no botão::

O botão está pronto. Agora só nos resta acresentar o texto. Você poderá obter os mais diversos efeitos no texto. Mostrarei um destes efeitos, mas você é livre para aplicar o que sua imaginação criar.

Adotei para o texto a fonte Arial Black, tamanho 17, na cor #FFFFFF (branca) e apliquei o efeito: Filters » Inner Bevel com os seguintes parâmetros:
Flat - 2 - 40% - 3 - 135°. - Inset.

E você obterá o botão pronto:



::Variações em outras cores::

E abaixo botões em outras cores construidos com esta técnica