Barra de Menu Metalizada

Bom, atendendo a alguns pedidos de alguns usuários, hoje vou mostrar
num tutorial rápido e prático, o processo que foi utilizado
para a construção da nossa barra de menus da comunidade,
o qual muitos me pediram através de emails. Provavelmente
alguns já viram esta técnica em sites estrangeiros, como o Ultraweaver.com.

A princípio é um tutorial bem básico para aqueles
que não ainda não possuem muita praticidade no Fireworks.

Então, vamos lá:

Crie um novo documento (CTRL + N).

Desenhe um retângulo com dimensões de mais ou menos 800
pixels de largura por 20 pixels de altura.

O principal processo que dá a ilusão de uma barra metalizada é bem
simples e não é necessário nenhum efeito de tipo brilho
ou sombra, somente a mistura de cores no preenchimento é o suficiente
para se chegar ao resultado. Por isso, dê ao retangulo um preenchimento
do tipo ‘Bars’(Barras).

Fireworks MX -> Clique na caixa de seleção do tipo de
preenchimento e escolha Bars ( Barras )
Fireworks MX 2004 -> Clique na caixa de seleção do tipo de preenchimento,
seleciona Gradient ( Gradiente ) e escolha Bars ( Barras ).

Note que o preenchimento é uma mistura de apenas
duas cores e com as barras na vertical. Precisamos alterar o sentido desta
barra para horizontal. Para isso, selecione o retângulo, e altere
a direção
das barras clicando no símbolo quadrado e o arrastando num sentido
de 90º e diminua o seu tamanho de forma que ele temha a espessura
exata do retângulo. Clique e veja o exemplo animado
deste processo.

Provavelmente a cor mais escura deverá estar na parte de cima,
precisamos então alterar esse sentido de forma rápida. Com
o retângulo selecionado, escolha Modify > Transform > Flip
Vertical (Modificar > Transformar > Inverter Verticalmente).

Agora vamos modificar as cores, de forma a dar o efeito exato de cromado
ou metalizado. Com o retângulo selecionado, clique na paleta de cores
de preenchimento do objeto. Você deverá ter uma tela semelhante
a esta, onde você encontrará duas cores apenas, representadas
cada uma por um controle deslizante, onde podemos ajustar a intensidade
da mistura entre as cores.

Aqui entramos num processo onde poucas ainda não
sabem como lidar com este recurso, que é adicionar ou remover cores.
No nosso caso vamos adicionar mais duas cores. Para isso, posicione o
mouse perto da linha de controle de cores até que apareça
um sinal de (+) junto ao ponteiro. Ao clicar, você terá adicionado
uma nova cor. Precisamos de mais uma cor, portanto, repita o mesmo processo
para adicionar a outra cor. Clique e veja o exemplo
animado.

Com as quatro cores na paleta, é só ajustar
a cor de cada
controle e sua intensidade. Para alterar a cor de cada controle, basta
clicar em cima dele para abrir a paleta de seleção de cores,
onde você pode escolher um cor padrão ou criar a sua digitando
o valor hexadecimal no espaço em branco.

Bom, já temos praticamente nossa barra quase completa, mas ainda
faltam alguns detalhes para deixa-la completa: as bordas. Aí você deve
estar se perguntando que para isso bastaríamos adicionar a cor da
borda ao retângulo. Poderia ser também, mas não poderíamos
ter duas bordas com espessuras finas e cores diferentes com apenas um cor
concorda? Então como faremos isso? Desenhando duas linhas distintas,
que servirão de base para as bordas e a separação
entre outras barras se você assim desejar.

Crie uma linha com largura semelhante a do retângulo. Você pode
utilizar tanto a Pen Tool (Ferramenta Caneta) quanto a Line Tool (Ferramenta
Linha) para desenhar a linha. Ao criar a linha, duplique-a, pressionando
CTRL+D.

Posicione cada uma das linhas de forma que elas fiquem
acima e abaixo do retângulo respectivamente como mostra a figura.
A linha de cima deve ficar um pouco separada do retângulo para que
dê a impressão
de baixo relevo. A linha de baixo pode ficar junto ao retângulo como
se fosse a borda dele.

Terminamos? Não, claro que não! Ainda falta um pequeno
detalhe, a divisória, que separa cada opção do menu.
Mas isso não é problema, basta desenhar duas linhas verticais,
com altura exatamente igual a do retângulo. As linhas devem estar
uma ao lado da outra. Uma cor cor mais escura e outra mais clara. No
nosso caso uma linha cinza e outra branca. Poderíamos utilizar
outras cores, mas não teria o mesmo efeito, até pelas cores que
utilizamos no retângulo,
da mesma forma que não teria sentido por exemplo se tivéssemos
uma barra metalizada laranja.

CONCLUSÃO

Bom, neste tutorial tentei explorar alguns conceitos como mistura de
cores e ferramentas vetoriais utilizando um exemplo bem simples para
os usuários mais leigos na ferramenta. Esta barra poderia ser feita
com outro tipo de recurso como CHANFRO ou RELEVO tranquilamente, mas
não teria nenhum sentido, pois não teríamos a chance de explorar outros
recursos do Fireworks. Enfim, o intuito aqui é que
você leve como conhecimento o conceito de como se trabalhar com ferramentas
vetoriais e misturar cores utilizadas na web, criando trabalhos mais
profissionais. E lembre-se, o bom profissional é aquele que aprende
a técnica,
pratica e tenta aperfeiçoa-la, e sempre utilizando a criatividade.

Qualquer dúvida, meu email é marcelo@fireworking.net.

Um abraço a até a próxima.