Apostila Gif

APOSTILA
ANIMAO GIF

SUMRIO
1. INTRODUO
2. ONDE ENCONTRAR O PROGRAMA GIF MOVIE GEAR
3. O PROGRAMA GIF MOVIE GEAR
4. PASSO A PASSO
5. INICIANDO O PROGRMA MOVIE GEAR
6. INSERINDO A IMAGEM EM SUA PGINA WEB
7. ALTURA E LARGURA DA IMAGEM
8. TEXTO ALTERNATIVO
9. ALINHANDO A IMAGEM EM RELAO AO TEXTO
10. PASTA DE IMAGENS
11. ENDEREOS
12. TERMO DE USO

http://www.ivc.locaweb.com.br

Apostila Gif

INTRODUO
GIF
(GRAPHICS INTERCHANGE FORMAT)
Gif um dos formatos de arquivos de imagens mais utilizados na Web. Cria arquivos de
imagens de tamanho relativamente pequeno. O tipo de compactao utilizado no formato
Gif funciona melhor quando a imagem tem reas contnuas da mesma cor. Portanto o
formato Gif no muito recomendado para fotos.
Para explicar como criar uma animao Gif, usaremos um exemplo simples.
ONDE ENCONTRAR O PROGRAMA GIF MOVIE GEAR
Faa uma busca na internet por estas palavras"gif movie gear" utilize os seguintes
sistemas de busca
Miner - www.miner.uol.com.br
Cad? - www.cade.com.br
Zeek - www.zeek.com.br
RadarUol - www.radaruol.com.br
Ou no endereo http://siliconation.com
O PROGRAMA GIF MOVIE GEAR
O programa GIF MOVIE GEAR pode ser usado por 30 dias depois deste prazo ser
necessrio Registrar.
Obs: voc pode usar outros programas para criao de animao Gif
Abra qualquer programa de sua preferncia para criao de imagens Jpg ou gif (MS-Paint
do Windows 98, Microsoft Photo Editor, etc...).
PASSO A PASSO
1 Crie uma figura com a palavra "Apostilas" e salve essa figura com o nome apostilas.gif
ou .jpg.

http://www.ivc.locaweb.com.br

Apostila Gif
2 Remova todas letras deixando somente a letra "A". Coloque esta letra no topo da
figura. Faa isso selecionado toda letra e arrastando para o topo da figura.
Ex:

3 Salve essa figura como a01.jpg. Clique em "Salvar como" caso contrrio voc estar
modificando a figura apostilas.jpg.
4 Abra novamente a figura apostilas.jpg e remova todas letras deixando somente a letra
"A" em seu estado original e desloque a letra "p" para o topo. O que voc vai ver e algo
parecido com a figura a seguir.

5 Salve essa nova figura lembrando que voc deve Clicar em "Salvar como".
6 Vamos incluir a letra "o" da figura apostilas.jpg. Para isso removemos todas letras e
deixando somente a letra A e p em seus estados de origem. Aps isso deslocamos a letra
"o"para o topo

7 Salve essa nova figura clicando em Arquivo e "Salvar como" de um nome para que no
esquea que aquela figura tem as letras Apo da palavra apostilas.
8 Voc ter que criar uma figura para cada letra caindo e deixando as demais letras ou
em seus estados de origem ou removendo algumas. Veja como fica a ltima a letra
caindo.

http://www.ivc.locaweb.com.br

Apostila Gif
9 Agora voc s precisa criar uma outra figura com a palavra Grtis. Salve essa figura e
d algum nome ou grtis.jpg. Pronto j podemos abrir o Programa Gif Movie Gear
10 Abra o programa clicando em Iniciar/Programas/Gif Movie Gear/Gif Movie Gear 2.6

INICIANDO O PROGRAMA GIF MOVIE GEAR

Esta a tela inicial do programa

http://www.ivc.locaweb.com.br

Apostila Gif

Clique em no boto (

) Inserir quadro

Abre- se uma janela para procura de imagens em todos formatos suportados pelo
programa. Voc vai escolher a figura com a letra "A" no topo da tela.

http://www.ivc.locaweb.com.br

Apostila Gif

Se a figura estiver selecionada com uma borda vermelha em clique no boto (

)Propriedades do Quadro

A opo que vamos trabalhar e Animao. No espao que antecede 1/100 segundo entre
cada Quadro coloque 30. Em seta para baixo antes de desenhar o prximo quadro clique
e marque Restaurar Anterior.
Coloque agora a figura que tem a letra "A" em seu estado original e a letra "p" caindo do
topo, siga os mesmo passos clicando em propriedades escreva 30 no espao reservado a
frente de "segundos entre cada quadro" e "Restaurar Anterior".

Voc vai fazer isso com todas figuras que usou para formar a palavra apostilas. Caso
queira colocar todas figuras e depois Ajustar as Propriedades de cada uma, tudo bem. Se
uma ou outra figura no estiver no seu devido local arraste e solte sobre o local certo.
Ajustadas todas propriedades dos quadros verifique a animao clicando no boto (
Visualizar Animao

Antes de salvar voc pode dar uma olhada na barra de status e verificar com qual
tamanho final em KB sua animao vai ficar.

http://www.ivc.locaweb.com.br

Apostila Gif

Se voc no gostar do tamanho (em KB) da imagem, e achar que vai ficar muito grande,
faa algumas modificaes na propriedade dos quadros como Transparncia e at
mesmo clicando no boto (

) Otimizar Animao.

Salve agora sua animao Gif clicando em "Arquivo/ Salvar como", d um nome e use a
figura em uma pgina html.
O Gif Movie Gear um timo programa para criao de figuras animadas no formato Gif
convm fazer o registro. Ento quando o programa abrir clique em Registrar e boas
animaes.
INSERINDO A IMAGEM EM UMA PAGINA WEB
As tags bsicas de marcao HTML so:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Para criar uma marcao html que inclua sua imagem, aps a tag <BODY> (corpo da
pgina) digite a seguinte tag.
<IMG SRC=imagem.gif>
Onde a palavra imagem corresponde imagem que voc deseja incluir em sua pgina
Web.
ALTURA E LARGURA DA IMAGEM
Voc poder atribuir largura e altura para sua imagem.
Exemplo:
<IMG SRC=imagem.gif WIDTH=100 HEIGHT=100>
TEXTO ALTERNATIVO
Se por algum motivo a imagem no carregar no servidor que hospeda suas pginas,
coloque um texto alternativo.
Exemplo:
<IMG SRC=imagem.gif ALT=Imagem de um carro>
Onde est Imagem de um carro substitua pelo texto que deseja definir a imagem.
ALINHANDO A IMAGEM EM RELAO AO TEXTO
Voc pode desejar colocar um texto que se espalhe ao redor da imagem. Como fazer
isso.

http://www.ivc.locaweb.com.br

Apostila Gif
Na verdade no h uma tag para o texto rodear uma imagem. Voc pode alinhar a
imagem em relao ao texto.
Exemplo:
<IMG SRC=imagem.gif ALIGN=LEFT>
A tag [Align=LEFT] faz com que a imagem fique do lado esquerdo do texto.
<IMG SRC=imagem.gif ALIGN=RIGHT>
A tag [Align=RIGHT] faz com que a imagem fique do lado direito do texto.
PASTA DE IMAGENS
Para ter um Web site eficiente voc deve armazenar suas pginas web (.htm ou .html) em
uma nica pasta, e as imagens usadas para ilustrar as pginas em uma outra pasta.

Suas pastas devem ser copias fieis dos arquivos que enviar para o servidor. Ou seja,
todas pastas e arquivos devem der o mesmo nome, tanto em seu computador como no
servidor.
Aps criar a pasta para armazenar as imagens que utilizou para ilustra suas pginas, a
marcao html ficar diferente.
Exemplo
<IMG SRC=imagens/imagem.gif>
Onde imagens a pasta que armazena o arquivo exemplo imagem.gif.

http://www.ivc.locaweb.com.br