Menu Macromedia

[Julianohaussen 0]

Olá Pessoal

 

Hoje irei fazer um menu igual ao do site da Macromedia.

 

Primeiro abriremos um arquivo novo no firework de 380px x 61px.

Usarei como fundo a cor #72828B (Modify/Canvas/CanvasColor).

Dentro deste arquivo criaremos um retângulo de 350px x 39px.

 

 

Com o retângulo selecionado, em propriedades alteraremos em rectangle roudness para 25.

 

 

Agora iremos criar o gradiente.

Selecione o retângulo e em propriedade escolha em vez de preenchimento sólido, preenchimento gradiente linear:

 

 

Sua imagem irá ficar assim:

 

 

Agora controle o gradiente de modo a ficar na vertical:

 

 

Após fazer isto altere as cores do gradiente coloque uma cor no meio e duas outras nas extremidades.

Eu utilizei as seguintes cores:

Em uma das extremidades - #DCDFED

No meio - #ACA3B2

Na outra extremidade - #FFFFFF

A figura final ficou assim:

 

 

Agora digitaremos os textos de cada botão do menu. Após digitar os textos colocaremos uma linha entre eles para separa-los.

Para fazer o efeito do botão criei um retângulo da mesma altura do triângulo do menu, coloquei um gradiente linear na vertical e preenchi ele de branco, todas as três cores do gradiente são brancas, porém as cores das extremidades possuem 50 de opacidade:

 

 

Coloque o texto sobre a imagem. O resultado final será este:

 

 

Selecione o texto e a figura e pressione F8 para transforma-lo em botão. Selecione a opção button, nomei o botão e clique em ok.

Após clique duas vez sobre a imagem. Assim você abrirá a área de alteração do botão. Repare que em cima existem 5 abas.

 

 

Cada uma destas abas corresponde a uma das ações do botão. A última área é a área de seleção do botão. Copie o botão da aba up para todas as outras abas. Retorna a aba up e delete a figura, deixando somente o texto.

Repita esta operações para criar todos os outros botões.

Pronto você ja tem um menu como o do site da macromedia.

O meu ficou assim:

 

 

No próximo tutorial estarei voltando ao tema para mostrar como criar o rollover horizontal.

Espero que tenham gostado deste tutorial. Lembrem-se esta área é de todos nós. Vocês tem toda liberdade de colocar tutoriais criados por vocês.

 

Obrigado

[babu 0]

Salve,Muito bom juliano.\\

[soamazing 0]

ae demoro ficou super 10 viu ;) Adorei a cor vou tentar fazer uns layouts com esse efeito de gradiente fico dahora d+

[Douglas 6]

Muito Bom!

[firemaniaco 0]

Babu c cuida hem??? Esse kra é muito fera!

[Chan 0]

ae cara....mandou muito bem...esse tuto tah show....ateh que num manja nada de fireworks que nem eu conseguiu fazer....hehehevaleu!!!Chan

[babu 0]

Babu c cuida hem??? Esse kra é muito fera!

Salve,Foi por isso que o convidei oara ser moderador conosco.\\

[cherrine 0]

Babu,Você fez um ótimo negócio... hehehe :P Juliano, muito bom seu tuto...Qdo eu crescer quero ser igual a você... rsssBeijão... :)

[Volpisp 0]

Boa Julianohaussen ficou exelente esse tuto,

[Julianohaussen 0]

Babu,Você fez um ótimo negócio... hehehe :P Juliano, muito bom seu tuto...Qdo eu crescer quero ser igual a você... rsssBeijão... B)

Não pode Cher...tú é muito bonita...sé tu ficar que nem eu vai ficar feia...Hehehehe

[paulofbc 0]

Não pode Cher...tú é muito bonita...sé tu ficar que nem eu vai ficar feia...

huahuaahuahuahua, muito boa!