•  
     

[Tutorial] Criando um Botão tipo Ícone no Fireworks

Na internet um bom site se destaca pela qualidade do conteúdo e um bom design. Ser diferente é uma regra que todo webdesigner busca seguir.
Essa diferença começa na confecção dos botões de menu, fazer um menu bonito, leve e diferente, contribui para o conjunto do layout e para facilitar a vida do usuário que não precisará ficar adivinhando aonde o levará aquele link.

Nesse artigo de hoje aprenderemos a criar botões de menu que se assemelham a ícones. O uso de figuras dá ao site uma interface mais amigável e facilita a navegação.
Vamos iniciar criando um círculo perfeito com dimensões (30X30), aplique um radial de branco para azul, de acordo com a figura abaixo:
Ex: Imagem

Edite o radial segundo a figura abaixo:
Imagem
Aplique um Chanfro Interno de largura 10 e suavização 3, o resultado final ficaria assim:
Imagem
Agora vamos dar um efeito de acquoso ao botão, para isso desenhe um novo círculo de tamanho 120X80, com a ferramenta Selecionar Secundário, distorça o círculo como no exemplo:

Aplique no círculo distorcido um linear de branco para azul , um efeito Embaçar – Desfoque Gaussiano – tamanho 3 e transparência em 74%.
Imagem
Passaremos agora para a fase da construção do ícone: Utilizaremos para isso a fonte Webbidings – letra H – faremos o primeiro ícone que é o Principal.
Depois de digitar, aumente o tamanho da figura para 24 X 22 e aplique um preenchimento Sólido Branco, com efeito de Sombra tamanho 3, suavização 2 e opacidade 100. Encerre aplicando um efeito de embaçar – Desfoque Gaussiando em 0.6 de tamanho.
Centralize a figura no Círculo.
Imagem
O primeiro dos seus botões está pronto, salve-o e exporte no formato Gif com transparência.

Para fazer outros botões, basta agora trocar o desenho, utilizando outros que tenham a haver com o conteúdo do seu site.
Se quiser criar um efeito de mudança quando o mouse estiver sobre ele, modifique as cores e exporte com outro nome e no Dreamweaver utilize do recurso de imagens cambiáveis(dica nº439), você pode fazer colocar a versão original para o estado link e a versão modificada para o estado hover.
 
Po legal cara...
 
Legal Cara