Apostila Gif

APOSTILA
ANIMAÇÃO GIF

SUMÁRIO

1. INTRODUÇÃO

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 PÁGINA WEB

7. ALTURA E LARGURA DA IMAGEM

8. TEXTO ALTERNATIVO

9. ALINHANDO A IMAGEM EM RELAÇÃO AO TEXTO

10. PASTA DE IMAGENS

11. ENDEREÇOS

12. TERMO DE USO

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

INTRODUÇÃO

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 compactação utilizado no formato
Gif funciona melhor quando a imagem tem áreas contínuas da mesma cor. Portanto o
formato Gif não é muito recomendado para fotos.
Para explicar como criar uma animação Gif, usaremos um exemplo simples.

ONDE ENCONTRAR O PROGRAMA GIF MOVIE GEAR

Faça 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 endereço http://siliconation.com

O PROGRAMA GIF MOVIE GEAR

O programa GIF MOVIE GEAR pode ser usado por 30 dias depois deste prazo será
necessário Registrar.

Obs: você pode usar outros programas para criação de animação Gif

Abra qualquer programa de sua preferência para criação 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. Faça isso selecionado toda letra e arrastando para o topo da figura.

Ex:

3º Salve essa figura como a01.jpg. Clique em "Salvar como" caso contrário 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. Após isso deslocamos a letra
"o"para o topo

7º Salve essa nova figura clicando em Arquivo e "Salvar como" de um nome para que não
esqueça 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 Grátis. Salve essa figura e
dê algum nome ou grátis.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 botão ( ) 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 botão (

)Propriedades do Quadro

A opção que vamos trabalhar e Animação. No espaço que antecede 1/100 segundo entre
cada Quadro coloque 30. Em seta para baixo antes de desenhar o próximo 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 espaço 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 não estiver no seu devido local arraste e solte sobre o local certo.

Ajustadas todas propriedades dos quadros verifique a animação clicando no botão ( )

Visualizar Animação

Antes de salvar você pode dar uma olhada na barra de status e verificar com qual
tamanho final em KB sua animação vai ficar.

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

Se você não gostar do tamanho (em KB) da imagem, e achar que vai ficar muito grande,
faça algumas modificações na propriedade dos quadros como Transparência e até
mesmo clicando no botão ( ) Otimizar Animação.

Salve agora sua animação Gif clicando em "Arquivo/ Salvar como", dê um nome e use a
figura em uma página html.

O Gif Movie Gear é um ótimo programa para criação de figuras animadas no formato Gif
convém fazer o registro. Então quando o programa abrir clique em Registrar e boas
animações.

INSERINDO A IMAGEM EM UMA PAGINA WEB

As tags básicas de marcação HTML são:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Para criar uma marcação html que inclua sua imagem, após a tag <BODY> (corpo da
página) digite a seguinte tag.
<IMG SRC=”imagem.gif”>
Onde a palavra “imagem” corresponde à imagem que você deseja incluir em sua página
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 não carregar no servidor que hospeda suas páginas,
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 RELAÇÃO 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 não há uma tag para o texto rodear uma imagem. Você pode alinhar a
imagem em relação 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 páginas web (.htm ou .html) em
uma única pasta, e as imagens usadas para ilustrar as páginas 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.

Após criar a pasta para armazenar as imagens que utilizou para ilustra suas páginas, a
marcação 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