O que você vai aprender

  • Criar animações frame-a-frame usando camadas como quadros
  • Configurar delay entre frames e loop para GIFs animados
  • Usar o filtro de reprodução de animação para pré-visualizar antes de exportar

Definição🔗

Animação no GIMP é construída a partir de múltiplas camadas, onde cada camada representa um frame (quadro). O GIMP reproduz a sequência de camadas em ordem, com delays configuráveis entre elas, e exporta o resultado como GIF animado, APNG, ou como um spritesheet (uma única imagem contendo todos os frames em grade) para uso em engines de jogo. O recurso onion skinning (casca de cebola) permite visualizar frames anteriores e posteriores como referências translúcidas enquanto você desenha o frame atual — essencial para animação tradicional.

Use o GIMP para animações curtas (até 60 frames), banners web, ícones animados, protótipos de sprites 2D para jogos ou storyboards visuais. Para projetos longos, considere o plugin GAP (GIMP Animation Package) ou ferramentas dedicadas como Krita e OpenToonz.

Conceitos🔗

O pipeline de animação no GIMP baseia-se em camadas como frames e no controle de delays no momento da exportação.

flowchart TD
    A[Definir número de frames e duração] --> B[Criar canvas com tamanho alvo]
    B --> C[Ativar onion skinning nas preferências]
    C --> D[Frame 1: desenhar pose inicial]
    D --> E[Duplicar camada como Frame 2]
    E --> F[Modificar Frame 2 com base no anterior visível]
    F --> G{Próximo frame?}
    G -->|Sim| E
    G -->|Não| H[Configurar delays entre camadas]
    H --> I[Pre-visualizar animação]
    I --> J{Satisfeito?}
    J -->|Não| F
    J -->|Sim| K[Exportar como GIF ou APNG]
    K --> L{Ou como spritesheet?}
    L -->|Sim| M[Dispor frames em grade e achatar]
    L -->|Não| N[Animação finalizada]

Conceitos fundamentais:

  • Frame: uma camada individual da animação.
  • Delay: tempo em milissegundos que cada frame fica visível antes do próximo (configurado no momento da exportação GIF).
  • Onion skinning: visualização de frames vizinhos com opacidade reduzida, para guiar o desenho do frame atual.
  • Spritesheet: todos os frames em uma única imagem PNG, organizados em grade, prontos para uso em game engines.
  • Looping: comportamento de repetição infinita ou N vezes do GIF animado.

Passo a Passo🔗

1. Configurar o canvas🔗

  1. Vá em Arquivo → Novo e defina as dimensões do frame (ex: 400×300 px).
  2. Selecione Preenchimento → Transparência para que cada frame tenha fundo alfa.
  3. Converta para o modo RGB se necessário.

2. Ativar onion skinning🔗

  1. Vá em Editar → Preferências → Experimental Playback.
  2. Marque Show onion skin para ativar a visualização de frames vizinhos.
  3. Defina o número de frames vizinhos (padrão: 1 anterior, 1 posterior).
  4. Configure a opacidade do onion skin (padrão: 50% para frames passados, 30% para futuros).

3. Criar o frame 1🔗

  1. Renomeie a camada inicial para Frame 001 (100ms) — o sufixo (100ms) configura o delay ao exportar.
  2. Desenhe a pose inicial com a ferramenta Pincel ou Lápis.

4. Duplicar e animar🔗

  1. Clique com botão direito na camada e escolha Duplicar camada.
  2. Renomeie para Frame 002 (100ms).
  3. Desenhe as modificações no novo frame — o frame anterior fica visível translúcido (onion skin) servindo de guia.
  4. Repita até completar a sequência.

5. Pré-visualizar a animação🔗

  1. Vá em Filtros → Animação → Reproduzir animação (atalho dependente de versão; também acessível via ícone de play no painel de camadas em GIMP 2.10+).
  2. Use os controles de play/pause/step para verificar a transição entre frames.
  3. Ajuste os delays clicando duas vezes no nome da camada (edite o valor entre parênteses).

6. Exportar como GIF animado🔗

  1. Vá em Arquivo → Exportar como e escolha o nome com extensão .gif.
  2. Nas opções de exportação, marque Como animação.
  3. Configure:
    • Loop: infinito ou N vezes.
    • Delay entre frames: usa os valores definidos nos nomes das camadas.
    • Disposal: Para o fundo para áreas transparentes limpas entre frames.
  4. Clique em Exportar.

7. Exportar como APNG (preserva transparência)🔗

  1. Use Arquivo → Exportar como e salve como .png.
  2. O GIMP perguntará se deseja exportar como APNG — confirme.
  3. APNG suporta transparência parcial e 24 bits, sendo melhor que GIF para animações com gradientes.

8. Criar spritesheet🔗

  1. Quando a animação estiver completa, vá em Imagem → Propriedades do canvas.
  2. Calcule as dimensões totais: largura = frame_w × colunas, altura = frame_h × linhas.
  3. Posicione cada camada manualmente no canvas (use a ferramenta Mover).
  4. Opcionalmente, organize em linhas/grades simétricas com Ctrl+setas para alinhamento preciso.
  5. Achate a imagem com Imagem → Achatar imagem.
  6. Exporte como PNG.

Exemplos Práticos🔗

Exemplo 1 — Bola quicando (12 frames)

  1. Crie canvas 200×200 transparente.
  2. Frame 1: desenhe bola pequena no topo (y=20).
  3. Frames 2–6: mova a bola para baixo progressivamente (y=40, 60, 80, 100, 120) — animação de queda.
  4. Frame 6: maximize o tamanho (simulando compressão).
  5. Frames 7–12: inverta o movimento, bola subindo e diminuindo.
  6. Configure todos os frames com delay 50ms.
  7. Exporte como GIF — resultado: 12 frames × 50ms = 600ms total, loop contínuo.

Exemplo 2 — Spritesheet de personagem andando (8 frames)

  1. Crie canvas de frame 64×96.
  2. Desenhe 8 poses de um personagem caminhando (cada pose em uma camada).
  3. Crie canvas total 512×96 (8 colunas × 1 linha).
  4. Distribua as camadas lado a lado com Mover.
  5. Achate e exporte como PNG.
  6. No game engine, use a spritesheet como animation frames com frame_w=64 e frame_h=96.

Exemplo 3 — Animação de texto com fade in/out

  1. Crie canvas 600×200 com fundo branco.
  2. Frame 1: texto em cinza claro (20% de opacidade).
  3. Frames 2–5: aumente progressivamente a opacidade do texto (40%, 60%, 80%, 100%).
  4. Frames 6–9: diminua a opacidade de volta (80%, 60%, 40%, 20%).
  5. Frame 10: texto invisível (loop point).
  6. Configure frames 1 e 10 com delay 500ms (pausa) e demais com 80ms.
  7. Exporte como GIF — animação suave de fade-in/out cíclica.

Exemplo 4 — Animação com onion skinning ativado

  1. Ative onion skinning em Preferências → Experimental Playback.
  2. Crie Frame 1: desenhe uma cabeça de personagem (círculo simples).
  3. Duplique como Frame 2 — observe que Frame 1 aparece translúcido atrás como guia.
  4. Desenhe o Frame 2 com a cabeça ligeiramente girada.
  5. Continue para Frame 3 — agora Frames 1 e 2 ficam visíveis como referência.
  6. Resultado: animação com transições suaves de rotação, sem precisar adivinhar a posição de cada pose.

Exemplo 5 — Loop perfeito com primeira e última camada idênticas

  1. Crie uma animação onde o último frame deve conectar suavemente ao primeiro.
  2. Após desenhar todos os frames, duplique o frame 1 como última camada.
  3. Configure o último frame com delay 1ms (transição instantânea) ou use blend mode para crossfade.
  4. Exporte como GIF com Loop infinito.
  5. Resultado: loop sem "pulo" visual no retorno ao início — técnica essencial para animações cíclicas.

Referências🔗

Você aprendeu

  • Animações no GIMP usam camadas como frames — cada camada é um quadro da animação
  • O filtro Reproduzir animação permite pré-visualizar antes de exportar
  • Exporte como GIF com "Exportar como animação" marcado e delay configurado