Criando um Banner Animado 120×60 – FW8 EN

Olá, neste tutorial vou explicar como construir no Fireworks 8 um banner animado(gif)-120×60, muito utilizado para troca de banners entre sites e blogs.

Exemplo Tutorial
Exemplo criado neste Tutorial

  • 1 – Criando uma nova imagem.(imagem 1)

1.1 – Criamos uma nova imagem, no menu principal “File->New” ou (Ctrl+N), irá abrir uma nova janela “New Document”, nela configuramos as propriedades para width:120, height:60, transparent e clicamos em “Ok”.

Imagem 1
Imagem 1

  • 2 – Rectângulo para a base do banner.(imagem 2)

2.1 – Seleccionamos a ferramenta rectângulo “Rectangle Tool” e configuramos o preenchimento:branco, borda:preta largura:1 e “Stroke Category->Basic->Hard Line” e agora desenhamos nosso rectângulo na área de trabalho.

2.2 – Ajuste o tamanho do rectângulo para W:120 e H:60

2.3 – Para alinhar o rectângulo perfeitamente com a área de trabalho, precisamos usar a ferramenta selecção “Pointer Tool” e seleccionamos todo o nosso rectângulo previamente feito.

2.4 – Depois de seleccionado vamos ao alinhamento no menu principal “Window->Align” abrirá uma nova janela, nela clicamos nas seguintes opções “To Canvas” e “Align: Align Horizontal Center, Align Vertical Center”.

Imagem 2
Imagem2

  • 3 – Texto que aparece no banner.(imagem 3)

3.1 – Seleccione a ferramenta “Text Tool” e configure: tipo de letras, tamanho e cores de forma que tenha destaque no banner, essa será a nossa matriz. Para alinhar dinâmicamente pode se usar o passo 2.4 ou manualmente, fica ao teu critério.

Imagem 3
Imagem3

Feito isso, já temos nosso banner estaticamente pronto, se você quiser fazer uma banner simples, pode pular directamente para o passo 5. Para o nosso banner animado falta pouco. Agora iremos dar alguma vida ao nosso banner.

  • 4 – Trabalhando com Frames. (imagem 4)

4.1 – Iremos trabalhar neste ponto com 2 painéis importantes “Layers” e “Frames and History”.

4.2 – Em “Frames and History” clique em “Options->Duplicate Frame” e configure a janela que se abrirá para “number: 3”, mantenha a configuração restante e clique em ok, isso cria mais 3 frames após o principal.

4.3 – Clique no frame 1 e a seguir voltamos a nossa área de trabalho, você pode seleccionar o texto ou o fundo e alterar cores, também pode alterar a posição do seu texto, repita o processo aos restante frames( só clicar no Painel “Frames and History” e seleccionar o frame seguinte e voltar a alterar a área de trabalho). No Banner que eu fiz para este tutorial eu alterei a posição do meu texto “Inxinet” de forma a descer do frame 1 ao frame 4.

Faça as alterações de forma a dar algum consenso ao seu banner. Agora você me pergunta e o Painel Layers? – Quando você alterou cada frame, acabou por alterar a Layer, nas layers podemos aplicar alguns efeitos extras, como alpha, máscara… isso fica para outros tutoriais.

4.4 – Agora vamos ver o tempo de exposição de cada frame. Dê um duplo clique em cima do número “7”, no meu caso “30” e altere o tempo na sequência do frame1 ao frame 3 para 30 e no frame 4 coloque 200 (vai fazer exibir mais tempo no último frame), depois que você ganhar alguma experiência você pode controlar as propriedades por tentativa e erro. Lembrando que isso também influência no tamanho final do arquivo, que convém não exceder a 20kb.

Imagem 4
Imagem4

  • 5 – Exportando nosso trabalho para o formato gif. (imagem 5)

5.1 – No menu principal “File->Image Preview” (Ctrl+Shift+X).

5.2 – Na Janela que se abre a seguir configure a aba “Options” para “Format: Animated Gif, Palette:WebSnap Adaptive, Maximum number of colors:32”, a seguir clique em “Export” altere o nome se quiser, depois “Export novamente” e pronto, você já tem o seu banner em formato GIF. Agora você já sabe como criar o seu banner.

Imagem 5
Imagem5

A partir daqui você já pode criar o seu próprio banner, pode usar imagens, textos, sendo a criatividade o limite.

Espero que este tutorial lhe tenha sido útil.

Marcaos

This Post Has 3 Comments

  1. Ola, gostei do tutorial eu sou novo aque e gostaria de saber quem pode me ajudar
    pois criei alguns banner para bota no meu blog mais não to conseguindo colocar as tags para ele rodar e um templeyte criado no fireworks 8 tambem não consigo fazer com que ele fique como index.html

  2. Gostei muito do tutorial, tava precisando de um desses há muito tempo, já que estou iniciando o meu blog e tenho muita vontade de aprender..

    Valeu mesmo.

  3. olha ta legal esse turorial… valeu pela visita… estarei sepre vindo aqui aprender mais um pouquinho… qualquer coisa sabe onde me encontrar!!! Um forte abraço mano!!

Comments are closed.

Close Menu