Como prometido, iremos abordar nestas próximas um assunto muito solicitado pela comunidade iMasters, que é a construção de um layout, usando várias ferramentas que o Fireworks pode nos oferecer, como gifs animados, efeitos em bordas, sombreamento, áreas ativas entre outros.

Então vamos deixar de conversa e vamos ao que importa.

Para ficar melhor o entendimento, coloquei o nosso layout pronto para vizualização. Você irá vê-lo clicando aqui.

Dividiremos nosso estudo em quatro semanas com os assuntos a serem abordados dispostos como na figura abaixo:

1ª Semana - Formas arredondadas, efeitos de sombreamento, iluminação e brilho.
2ª Semana - Menu rollover com descrição na barra do navegador.
3ª Semana - Banner (gif animado)
4ª Semana - Usando frames no Fireworks, efeito tipo arquivo.

Antes de começarmos o nosso trabalho, vale a pena ressaltar que o nosso layout vai ter um tamanho de 780 x 495px. Normalmente quando se projeta um site, temos que ter em mente que nem todo mundo estará utilizando a mesma configuração (resolução do monitor cores etc) que nos usamos no trabalho ou em casa, por isso que eu particularmente gosto de trabalhar com a resolução de 800 x 600 px, e é com ela que iremos trabalhar. Ai vocês podem estar se perguntando, se é para resolução de 800 x 600 então porque usou 780 px na horizontal?

Boa pergunta. Mas a resposta também é simples. A bara de rolagem do browser tem exatamente 20px, então se nos colocarmos nosso layout com 800px cravados, surgirá barra de rolagem na horizontal, o que não fica com uma boa estética, (quando abrimos com resolução 800 x 600px).

Então start game:

Aprenderemos nesta semana a fazer formas arredondadas com efeitos de sombreamento, iluminação e brilho.

Com o fireworks aberto, abrimos um novo documento com o fundo na cor #CECFCE, no tamanho de 780 x 495px. Com a ferramenta retângulo atalho (U)

 

 

 

 

Desenhe uma forma de 780 x 80px aplicando a cor azul (#002448).

Agora selecione a ferramenta elipse atalho (U)

E desenhe uma forma de 101 x 75px com a mesma cor do retangulo, duplique esta forma pois iremos utiliza-la mais tarde..

Com a elipse selecionada vamos rotorciona-la utilizando o recurso Transformação numérica atalho (CTRL+SHIFT+T) rotorcionando 15 utilizando o recurso girar.

Sobreponha a elipse por cima do retangulo selecionando ambas as formas como mostrado na figura abaixo, e vamos unir os traçados utilizando a recurso União. Modificar>>Combinar Traçados>>União.

 

Sua imagem deve estar com o formato abaixo.

.

Agora vamos editar a parte lateral onde irá receber os menus rollover. Desenhe um retangulo de 96 x 393px e coloque forma duplicada da elipsepor cima do retangulo como mostrado na figura.

Perfure utilizando a opção Modificar>>COmbinar traçado>>Perfurar.

 

Ajuste as duas formas de modo que elas fiquem como mostrado nesta figura.

Aplique o nosso primeiro efeito de Iluminação e Chanfrado, utilizando um recurso do Fireworks Chamado Bevel Boss

.

Com a forma selecionada, vá em Filtros>>Eye Candy 4000 LE>>Bevel Boss..

Dê um Ok, pois utilizaremos os valores default. Depois, com mais calma, você pode soltar sua imaginação e paciência para trabalhar e ajustar os outros parâmetros.

Como resultado final teremos a figura 01. Aplicando uma sombra com os parâmetros

Na forma retângulo da parte superior, teremos a figura 02.

01

02

Pronto. Chegamos ao final da nossa primeira etapa.

Na próxima semana iremos trabalhar com o menu rollover com descrição na barra de ferramenta do navegador. Qualquer dúvida é só mandar um email, ou acessar o Fórum iMasters na sessão Fireworks (atal ho) que colocarei um tópico aberto somente para retirar dúvidas desta coluna. Isso vai se tornar uma praxe, com um novo tópico no Fórum toda semana.

Hasta la vista Firemaníacos.