Tutorial Fireworks

Tutoriais por por Maurício Samy Silva

..: Botão com efeito metlico :..

Baseado em tutorial publicado em: http://kenetix.net/


::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 boto com dimenses iguais a 180 x 35px. Mas, claro, voc adota as dimenses de acordo com suas necessidades.

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

botao metalico1


::Aplicando gradiente::

Nosso primeiro efeito ser a aplicao de um gradiente vertical conforme mostrado abaixo. Ajuste oa parmentros 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;

botao metalico1


::Construindo o miolo::

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.

    botao metalico3

  • 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:

botao metalico4

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:

botao metalico5

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

botao metalico6


::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 parmetros:
Flat - 2 - 40% - 3 - 135°. - Inset.

E você obterá o botão pronto:

botao metalico6


::Variações em outras cores::

E abaixo botes em outras cores construidos com esta tcnica

botao metalico6


Site criado em 22 de julho de 2004 por Maurcio Samy Silva Direitos de terceiros reservados 2004-2017.
Contedos no pertencentes a terceiros podem ser copiados vontade (crdito ser bem-vindo).
Powered by: Maujor ®