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.
Artigos Relacionados
ShareThis