Coluna Fireworks – Criando botões e menus – Parte 2

Bem vindos “MX Galera”!

E aí pessoal? Prontos para desenvolver mais um menu? Como já devem ter percebido gosto meio excessivamente do visual do Windows Vista e adoro ensinar à faze-los em minhas colunas, pois então, será o tema de mais uma! Muitos já devem ter visto o menu do atual site oficial do novo sistema operacional da Microsoft, na minha opinião muito bonito e inovador, é ele que faremos hoje! Então, “Mão no mouse”!

Ps.: Há como fazer nas versões anteriores, mas explicarei como fazer com base e usando os recursos da versão 8.

O menu feito será o seguinte:

1 – Crie um novo arquivo e aplique à ele um bitmap como fundo, paisagem de preferência. Tranque () a camada até a hora de o modificarmos para facilitar o trabalho.

2 – Crie um retângulo arredondado () de 174x510px e defina em “Auto Shape Properties” os seguintes parâmetros:

3 – Transforme o retângulo em vetor, para isso desagrupe-o (ctrl+shift+g). Coloque para seu tracejado a cor #06397D, expessura de 1px, tipo 1-pixel soft, e a opção “inside patch”:

4 – Aplique 50% para a transparência do retângulo. Duplique-o (ctrl+shift+d) e aplique à um dos dois iguais “Modify -> Alter Patch -> Inset Patch…”:

5 – Ao tracejado desse retângulo, agora menor, aplique a cor branca.

6 – Duplique novamente o retângulo azul, coloque a cópia abaixo de todas as outras camadas, à não ser a do fundo, a que está trancada.

7 – Nomeie essa camada, a cópia, como “Principal”. Aplique à camada “Principal” um gradiente linear verical da cor #CDC9E4 com a seginte alternância de transparência:

8 – Duplique a camada “Principal” e usando seus conhecimentos sobre manipulação de vetores, com as ferramentas Pen e Subselection, deforme a camada “Principal” mais superior na ordem de camadas de modo que ela adiquira a seguinte forma:

9 – Renomeie essa camada, a deformada no passo anterior, para “Efeito de transparência Principal”. Modifique o gradiente de “Efeito de transparência Principal” para branco com a seguinte alternância de opacidade:

10 – Com a Line Tool crie três linhas brancas em cima do menu. (FIG.

11 – Encurve as linhas usando as ferramenta Pen e Subselection. (FIG. 9)

12 – Engrosse as linhas criadas. Para a maior e mais à esquerda coloque 15 de expessura, para as outras duas 7.

13 – Aplique nelas o efeito Gaussian Blur (Filters – no painel propriedades – -> Blur -> Gaussian Blur), como intensidade coloque 9.4 para a maior e mais à esquerda e 5.6 para as demais.

14 – Altere a transparência da maior para 45% e das demais para 30%.

15 – Crie um retângulo em cima de cada linha de modo que preencha TODA ela e que não ultrapasse os limites do menu.

16 – Os retângulos criados no passo anterior terão a função de fazer fade in (aparecendo) e fade out (desaparecendo) nas linhas, agirão como máscaras. Tudo que estiver de fora do retângulo não será exibido, é como se sua opacidade fosse 0%, o que estiver dentro: Em preto não será mostrado e branco sim. Portanto retire o tracejado dos mesmos, caso tenha, e coloque gradientes lineares verticais de preto para branco seguindo como modelo a seguinte figura:

17 – Selecione um retângulo juntamente com a linha que ele preenche e aplique o retângulo como máscara (a máscara será o objeto que estiver mais em cima na janela “layers”).

18 – Faça o mesmo processo com as demais linhas e retângulos.

19 – Agora iremos mecher no bitmap, na figura de fundo. Destranque a camada correspondente à ele e duplique a camada “Principal”.

20 – Selecione uma das camadas “Principal” iguais e converta-a para seleção (Modify -> Convert Patch to Marquee…). Se a seleção não estiver agindo sobre o bitmap correspondente ao fundo, com a ferramenta Pointer (setinha) selecione-o.

21 – Com a seleção agindo sobre o fundo aplique um Gaussian Blur de intensidade 4 (Filters – no menu superior – -> Blur -> Gaussian Blur)

22 – Tranque novamente a camada correspondente ao fundo.

23 – Duplique novamente a camada “Principal”. Crie um retângulo de modo que preencha a maior parte das camadas “Principal”, deixando apenas a parte superior:

24 – Selecione o retângulo criado e a camada “Principal” mais superior e combine-as no modo punch. (Modify -> Combine Patchs -> Punch).

25 – Renomeie a camada “Puncheada” no passo anterior como “Efeito de transparência Menu”. Retire, caso tenha, o tracejado de “Efeito de transparência Menu” e aplique à ele um gradiente linear vertical branco com alternância de transparência:

26 – Escreva o primeiro ítem do menu com a fonte Trebuchet MS no tamanho 17 e na cor branca.

27 – Adicione à esse texto uma sombra (filters – no painel propriedades – -> Shadow and Glow -> Drop Shadow):

28 – Ao lado do texto coloque um ícone correspondente ao ítem.

29 – Para fazer uma divisória para os ítens, crie uma linha horizontal de cor preta preenchendo horizontalmente todo o menu e uma outra branca logo abaixo também preenchendo horizontalmente todo o menu.

30 – Selecione essas duas linhas, agrupe-as, nomeie a camada como “Divisória”, altere a opacidade para 15% e o blend mode para Overlay.

31 – Crie um retângulo que preencha todo o menu horizontalmente e com altura de 16px. Posicine-o logo abaixo da divisória criada no ítem anterior, de modo que o primeiro pixel (px) de sua altura fique em cima da linha branca (Ver figura 18).

32 – Para o preenchimento desse retângulo use um gradiente branco linear vertical com alternância de opacidade:

33 – Faça o restante do ítem como foi feito no primeiro. Não se esqueça da divisória.

34 – Construa os outros ítens com base no que foi feito nos passos anteriores:

PS.: Use a duplicação (ctrl+shift+d) para facilitar o trabalho do passo anterior.

35 – Perceba que na figura anterior abaixo da última divisória o retângulo branco é menor, portanto diminua-o caso não tenha diminuido (12px de altura).

36 – Há outros ítens com menor destaque no menu, para faze-los utilizaremos como fonte “Verdana” no tamanho 11 e na cor branca com 104% de horizontal scale.

37 – Escreva os ítens:

38 – Mude a opacidade dos textos para 82%.

39 – Coloque o logotipo na parte inferior e caso queira aplique um efeito de reflexo duplicando-o e usando o comando Fade Image.

40 – Duplique o primeiro retângulo criado, o de contorno azul. Coloque a cópia abaixo de todas as outras camadas menos a do fundo.

41 – Adicione uma sombra de cor #03224B à esse retângulo:

PS.: Caso o azul do contorno do primeiro retângulo criado na coluna e o azul da sombra anterior não fiquem bem com o fundo que você escolheu mude-as para uma outra, escura também, que combine.

Até a próxima, qualquer dúvida é só perguntar em nosso fórum. Fuiiiiiiiiiiiiiiiiiiiiiiiiiii…