Coluna Fireworks – Criando Botões e Menus- Parte 1

Introdução

Olá Comunidade MXStudio! Estou dando início a uma série de colunas que irão abordar a criação de botões e menus para websites. Nas colunas tentaremos fazer um passo-a-passo para a obtenção de um botão/menu mas também estarão embutidos algumas dicas e macetes para a criação dos mesmos no Macromedia Fireworks.

Pré-requisitos

O tutorial foi desenvolvido no Macromedia Fireworks 8 mas é compatível com qualquer versão do software Macromedia Fireworks.

É de grande importância que todos tenham conhecimento básicos sobre a criação de formas no Fireworks:

Apesar desta coluna ser escrita de modo simples e claro serão necessários conhecimentos razoáveis das ferramentas Pen Tool, Rectangle Tool, Rounded Rectangle e Filters do Fireworks:

Objetivos

Criaremos dois tipos de menu nesta coluna, o primeiro será este:

E o segundo:

Criando o primeiro menu

1) Crie com a ferramenta Rectangle Tool(U) crie um retângulo de 296x199pixels, com borda 1px #B9B9B9, e preenchimento linear de cima para baixo com as seguintes cores:

Ficando assim o nosso menu:

2) Ainda com a ferramenta Rectangle Tool(U) crie um retângulo de 15x30pixels, com preenchimento linear de cima para baixo com as seguintes cores:

Deixe este retângulo um pouco afastado da lateral direita do nosso retângulo base:

3) Agora pegue a ferramenta Polygon Tool(U) e no painel de propriedades coloque a seguinte configuração para criarmos um triângulo:

Utilize a cor de preenchimento #C0C0C0 e trace um triângulo, de modo que fique com uma das pontas virada para dentro, assim como a imagem abaixo:

4) Agora é só adicionar o nome do item do menu com cor de preenchimento #777777:

Criando os outros items:

Observação: Aqui utilizei a fonte Arial com 12px de tamanho em negrito e com Anti-Aliasing Level selecionando a opção No Anti-Alias.

Criando o segundo menu

1) Crie com a ferramenta Rectangle Tool(U) crie um retângulo de 328x53pixels, com borda 1px #A73F48, e preenchimento linear de cima para baixo com as seguintes cores:

Ficando assim o nosso menu:

2) Ainda com a ferramenta Rectangle Tool(U) crie um retângulo de 1x40pixels, com cor de preenchimento #8E2A2A e posicione-o de modo que seja a divisória de um item do menu para o outro, assim como exibido abaixo:

3) Para dar um pequeno efeito de 2D criamos um retângulo de 1x40pixels, com cor de preenchimento #BC605A e posicione-o à direita do retângulo anterior, ficando assim a nossa divisória:

4) Crie quantas divisórias você queira, no nosso caso apenas mais uma, e adicione os itens do menu:

Observação: Aqui utilizei a fonte Century Gothic com 13px de tamanho em negrito e com Anti-Aliasing Level selecionando a opção Smoth Anti-Alias.

Considerações finais

Vimos nesta coluna a construção de dois estilos de menus bem simples, mas que se aplicados no layout correto produzem um efeito muito interessante. São dois menus que eu considero bem “cleans”, e de fácil visualização pelo usuário do site. Vocês podem aproveitar estes menus em blogs, sites pessoais e até mesmo sites empresariais.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem o meu portfolio online: http://www.fabioricotta.com

Espero que vocês tenham gostado desta coluna e até a próxima.

Autor: fabioricotta – Colunista de Fireworks do MXStudio

Qualquer dúvida envie um email para fabioricotta@mxstudio.com.br ou acesse o nosso fórum.