Tutorial Fireworks

Tutoriais por por Maurício Samy Silva

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

a formaq inicial


::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;
Dividindo a forma inicial em dois

::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%.

O detalhe superior


::Colocando sombra no botão::

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

Colocando sombra

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

Posicionando o detalhe superior

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

Efeito final

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 ®