Ir para conteúdo
Fórum CódigoFonte.net
Entre para seguir isso  
RvTMaster

Efeito Botão Aqua

Recommended Posts

Efeito Botão Aqua

O efeito aqua é um dos clássicos efeitos que se obtém com o uso do Fireworks.

Inúmeros tutoriais foram escritos ensinando a obtenção deste efeito e aqui mais uma forma.

Siga a numeração na figura abaixo:

1-) Desenhe um retângulo com cantos arredondados no palco e ajuste suas dimensões para 250px x 50px.

Clique na marca amarela e arraste para a esquerda com a finalidade de arredondar ao máximo os cantos do retângulo.

NOTA: A ferramenta retângulo com cantos arredondados está disponível somente na versão Fireworks MX 2004.

Se a sua versão do FW é anterior construa o retângulo combinado as formas retângulo e círculo.

2-) No número 2 da figura mostro o retângulo depois do arraste conforme acima explicado.

3-) Selecione o retângulo já com a forma indicada no número 2 e clone-o.

Para clonar tecle Ctrl + Shift + D;

Após clonar mantenha a tecla Shift apertada e tecle seta para baixo. Isto desloca o clone para baixo.

Vamos agora diminuir o tamanho do clone conforme mostra a figura:

Selecione o clone e tecle Ctrl + Shift + T ( ou menu Modify ==> Transform ==> Numeric Transform ). Com esta ação você abrirá uma caixa para tranformação do que foi selecionado (o clone).

Nesta caixa abra o menu de salto em cima e escolha Resize.

Deixe as duas caixinhas a esquerda em baixo, marcadas (caixas Scale Attributes e Constrain Proportions).

Digite 200 para largura e 30 para altura. Agora você está com um retângulo de 250 x 50

e outro de 200 x 30 conforme mostrado no número 3.

4-) Faça um clone deste retângulo menor e coloque-o logo abaixo dos anteriores. Veja o número 4.

user posted image

::Aplicando efeitos nos retângulos menores::

1-) Selecione o retângulo menor localizado no meio.

Aplique um preenchimento gradiente linear nas cores #FFFFFF e #006633.

Tecle na ferramenta balde de tinta ou clique com a seta preta para "aparecer" a guia de controle do gradiente e ajuste o gradiente com a cor branca em cima e a verde em baixo como mostrado no número 1.

2-) Selecione este retângulo cujo gradiente você acabou de aplicar e vá teclando

seta para cima até posicioná-lo como mostrado no número 2.

3-) Selecione o outro retângulo menor e aplique um preenchimento sólido na cor #00FF33.

e um contorno na cor #006600 de 1Pixel Soft.

Aplique o efeito Blur == > Gaussian Blur e raio 10.

Aplique transparência 85.

4-) Vá teclando seta para cima até posicionar este retângulo como mostrado no número 4

Usei neste tutorial a letra; m com fonte Arial Black, bold, 250 na cor vermelha;

user posted image

::Colocando o texto no botão::

1-) Aqui mostro o botão com as três formas básicas posicionadas.

Selecione o retângulo maior e aplique um contorno (Stroke) na cor #009900 de

2 Pixel Soft Rounded.

Aplique o efeito Drop Shadow na cor #006633 com os parâmetros 15 - 45% - 8 - 270

2-) Digite o texto a colocar no botão.

Aplique efeito sombra como mostrado no número 2.

3-) Posicione o texto no botão.

user posted image

::Algumas variações::

Abaixo três outros botões construidos com outras cores.

user posted image

flw

Compartilhar este post


Link para o post
Compartilhar em outros sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Visitante
Responder

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Processando...
Entre para seguir isso  

×
×
  • Criar Novo...