Menu vivo.com.br

• Tweet
• Sharebar

• Tweet

Olá comunidade MXStudio. Sejam bem-vindos a mais uma coluna de Fireworks. Eu estava navegando na internet esses dias e passando pelo site da operadora de celulares Vivo reparei no menu, que era muito interessante. Então resolvi passar a vocês a teoria, para conhecimento do público como seria uma maneira de se produzir algo parecido. É importante lembrar que estamos desenvolvendo este menu apenas para estudo. Então vamos lá:

1) Crie um documento 780×100 pixels.

2) Com a ferramenta Rectangle Tool crie um retângulo, com preenchimento linear de baixo(#CCCCCC) para cima(#FFFFFF) que ocupe metade do nosso documento:

3) Abaixo deste retângulo crie um outro, também com preenchimento linear de cima(#DDDDDD) para baixo(#FFFFFF), mas deixe 1 pixel de diferença entre os dois:

4) Com a ferramenta Rounded Rectangle, crie uma forma de 90×50 pixels, coloque-a mais a esquerda:

5) Ainda com a ferramenta Rounded Rectangle crie uma forma de 450×21 pixels, posicione-o de modo que fique sobre a ponta inferior direita da outra forma, para que assim oculte a curva do retângulo:

6) Selecione estas duas formas e vá em Modify » Combine Paths » Union, para unir as duas formas.

7) Utilizando a ferramenta Rectangle Tool, crie uma forma sobre a parte maior da nossa bara, de modo que fique apenas uma borda:

Repita o mesmo passo para a outra parte da nossa barra:

9) Selecione estas duas formas que criamos, e vá em Modify » Combine Paths » Union. Após, mude o tipo de preenchimento para Linear, colocando de cima(#CCCCCC) para baixo(#FFFFFF):

10) Agora vamos colocar os links.

11) Vamos adicionar mais alguns efeitos ao nosso menu, primeiro selecione a forma branca que está mais ao fundo, e coloque cor de borda #999999.

12) Ainda com esta forma selecionada, vá em Effects » Shadow and Glow » Drop Shadow com as seguintes especificações:

Cor: #000000

13) Podemos incrementar mais adicionando uma divisória entre os links. Para isto com a ferramenta Rectangle Tool, crie um retângulo de 1 pixel de largura por 17 de altura na cor #999999, e crie outro com o mesmo tamanho mas na cor #FFFFFF, posicione-os um ao lado do outro:

14) Repita o passo 13 para construir divisórias entre todos os links:

Clique aqui para ampliarPronto! Terminamos o nosso menu. Agora você pode incrementar da sua maneira, como por exemplo utilizar de botões rollover, e dar uma impressão mais legal. Use a sua criatividade!

É importante frisar que este tutorial sobre o menu do site vivo.com.br é apenas para estudo e de nenhum modo pode ser utilizado para desenvolvimento de um site, pois caracteriza-se plagio.

Espero que tenham gostado deste tutorial. Até a próxima!

Autor: fabioricotta - Colunista e Moderador de Fireworks do MX Studio

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

Escrito por Fábio Ricotta on junho 30, 2004. Arquivado em Fireworks. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo