LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Segunda-feira, 30/06/2003 - 01:59 - Por Felipe Macena
Seções relacionadas:

Site completo pelo Fireworks

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.

Todos os artigos de Felipe Macena

11 comentários publicados

  • 1. duvidas

    Sábado, 30/10/2004, por elerson

    Onde eu posso achar esse comando?
    Como resultado final teremos a figura 01. Aplicando uma sombra com os parâmetros



    Responder comentário

  • 2. duvidas

    Sábado, 30/10/2004, por elerson

    Onde eu posso achar esse comando?
    Como resultado final teremos a figura 01. Aplicando uma sombra com os parâmetros



    Responder comentário

  • 3. duvidas

    Sábado, 30/10/2004, por elerson

    Onde eu posso achar esse comando?
    Como resultado final teremos a figura 01. Aplicando uma sombra com os parâmetros



    Responder comentário

  • 4. O link clicando aqui

    Terça-feira, 27/09/2005, por claudio rabelo

    O link clicando aqui javascript:AbrePagina('/web/colunistas/fireworks2/06/modelo.htm',795,497)
    esta dando a pagina não pode ser exibida gostaria de visitar esta pagina para concluir o tutorial.
    Obrigado
    Claudio Rabelo

    Responder comentário

  • 5. Dúvida

    Terça-feira, 27/09/2005, por fabio

    Estou utilizando o firework mx 2004 para reproduzir o layout, mas quando seleciono a opção Perfurar não ocorre o mesmo que é mostrado na figura.

    Responder comentário

  • 6. ajuda

    Sábado, 01/10/2005, por Ruan

    o cara o tutoriale muito bom so q eu nao consigo obter o mesmo resultado na hora de perfurar nao

    por favor me ajude

    Responder comentário

  • 7. Erro na pagina

    Quinta-feira, 19/01/2006, por Giovani Nazareno

    Responder comentário

  • 8. Erro na pagina

    Quinta-feira, 19/01/2006, por Giovani Nazareno

    Ha um erro no link do layout

    Responder comentário

  • 9. Dica

    Sexta-feira, 07/04/2006, por ivanildo junior

    na hora de perfurar vc deve colocar em cima a parte que vc quer que seja perfurada ou seja, essa área que vc colocar em cima vai desaparecer, vai ser subtraida.

    abraço a todos

    Responder comentário

  • 10. 1ª parte

    Quarta-feira, 05/07/2006, por cairo cavalcante

    05/07/2006

    Responder comentário

  • 11. Sombra

    Quinta-feira, 17/08/2006, por Alesandro Roberto Vizoli

    Como faço para colocar a sombra, como mostra na figura 2?

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Felipe Macena é professor e trabalha com Macromedia Fireworks desde 1998.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.