[Tutorial] Botão Veerle

..: Botão Veerle :..


Veerle publicou no seu Blog uma matéria mostrando como construir um botão no Photoshop.
Neste tutorial mostro como criar um botão semelhante, com uso do Fireworks.

::A forma inicial::


Desenhe
um retângulo com cantos arredondados nas dimensões do botão a construir
e aplique um gradiente com os parâmetros mostrados na figura a seguir:


::Dividindo a forma inicial em dois::


A seguir vamos dividir a forma construida cortando-a na horizontal com a ferramenta faca.

1. Selecione a forma e pegue a ferramenta faca (windows - Shift + Y)
   Pressione a tecla Shift e "corte" a forma no meio e na horizontal;
   
2. Largue a ferramenta faca e selecione a parte inferior da forma. Defina as cores de preenchimento do gradiente como mostrado;
   
3. Ajuste o parâmetro de gradiente como mostrado;
   
4. Selecione a parte superior da forma e ajuste o parâmetro de gradiente como mostrado;
   

::Criando o detalhe superior::


Crie uma cópia do botão contruido, selecione a parte superior e com a ferramenta faca corte uma tira em cima como mostrado.
Apague tudo abaixo e fique com a tira que você acabou de criar.

Selecione a tira e reduza suas dimensões para 95%.



::Colocando sombra no botão::


Deixe a tira de lado. Selecione o botão construido e aplique uma sombra (Drop Shadow) como mostrado.


::Posicionando o detalhe superior::


Pegue a tira que você construiu e coloque em cima do botão como mostrado. Aplique fundo branco #FFFFFF e reduza a opacidade da tira para 15.
Nota:
se você deslocar a tira ela ficará por baixo do botão, então tenha o
cuidado de antes de deslocar a tira trazê-la para frente, arrastando o
ícone dela para a posição mais acima no painel Layers.
Para finalizar escreva seu texto sobre o botão.


::Hue/Saturation::


Faça cópias do botão pronto e aplique Filters » Hue/saturation para obter botões com cores diferenciadas como mostrado a seguir.