toturial como fazer banner

Aqui está um pequeno tutorial como fazer um banner no Fireworks para colocar no seu site. Eu estou enviando em anexo 2 arquivos de exemplo: o primeira com a extensão *.GIF é o banner animado pronto e outro *.PNG com o projeto para você trabalhar nele.

Vamos colocar a mão na massa:

Como certeza você tem o Adobe Fireworks. Abra-o.

Vá ao menu File (Arquivo)> Novo (New) ou Ctrl-N (Imagem-01)

Na janelinha que abrir em comprimento (Width) coloque 468 pixels e em altura (Height) 60 Pixels para exemplo. Você coloca o tamanho que precisar em sua págin

imagem 1

Logo em seguida você deve abrir o painel de Frames (Window/Frames) conforme indica a imagem abaixo (Imagem-02):Perceba na imagem acima que há duas marcações em vermelho: a primeira (em cima) é o tempo de cada frame do Banner (sendo que neste exemplo utilizaremos vários tempos - portanto dê dois cliques no número "7" e altere-o para o que precisar)

e a segunda marcação (Abaixo) indica o botão para a criação de um novo frame, e cada frame é uma imagem diferente.

Coloque em uma certa ordem de seqüências para que a animação não pule nada.

Neste meu exemplo esse banner terá 22 Frames para o efeito desejado - portanto você deve criar mais 21. Navegue na guia e veja cada um dos 22 Frames que criei (Imagem-03).

Para executar a animação clique no botão Play para ver o resultado (Imagem-04).

Imagem - 03

imagem 4

imagem 5

Imagem - 05
Agora depois de tudo pronto, basta exportar no formato para colocar no site. Para isso vamos configurar o Fireworks para que exporte como um GIF Animado. Para isso, utilizaremos o painel Optimize (Imagem – 05) Selecione a opção "Animated GIF" e pronto (como na Imagem-05: agora é só exportar seu banner! Como?! A partir do passo 9 somente se você não souber fazer a exportação.

Agora selecione Export Wizard (Imagem-06), para exportar o banner. Depois selecione Select an export format e clique em continue (Imagem-08) na janela que aparecer e na outra janela selecione Animated GIF (Imagem-08).

imagem 6

imagem 7

imagem 8

Imagem – 09

Agora selecione Animated GIF (Imagem-09) e clique no Botão Export.
Imagem - 09
Agora dê um nome ao arquivo e selecione images only (somente imagens) e clique em export. Pronto, agora você tem um banner com um GIF animado igual ao do portal UOL (http://www.uol.com.br/). Use a imaginação que dá para fazer qualquer coisa. Se quiser algo diferente, conheço outras técnicas que dará efeitos mais interessantes. Mas, para começar tente esta. Depois pode usar flash, Java, Javascript... Etc. Essas são um pouco mais complicadas.

Para terminar... Como gosto muito de anime (animação japonesa), abaixo vai duas frases muito legais de dois anime que assisti este mês: "A sorte faz parte da sua capacidade". Kaji – Neo Genesis Evangelion

"Nós fomos criados... nós estamos vivos... nós continuaremos a viver... nós somos parte desse mundo.” Mewtwo - Pokémon

Bye!

2 anexos — Baixar todos os anexos Exibir todas as imagens banner.png49K Visualizar Download banner.gif9K Visualizar Download

DOWNLOAD