Skip to content

Como fazer um blinkie (gif animado)

junho 12, 2007
by

Com certeza vocês já viram por aí essas imagens que ficam nas assinaturas das scrappers em fóruns de discussão. É um mar de imagens com as mais variadas animações. Hoje nós vamos ensinar como fazer um blinkie, que também pode ser chamado de gif animado.

O gif é a extensão da imagem. Quando salvamos para web no Photoshop, se você usa o gif, pode fazer o fundo ficar transparente. Se a imagem tem poucas cores, geralmente o gif salva num tamanho menor que o jpg. Mas além disso, o gif é o formato que se usa para fazer essas imagens animadas.

Prontas para aprender então? Vamos lá!

Passo 1
Abra o seu Photoshop e crie um novo arquivo com 150 pixels de largura e 50 de altura (150×50). Esse é o formato padrão dos blinkies que vemos por aí.

Passo 2
Imagine como vai ficar a sua animação e inclua camadas diferentes para todos os estágios da animação. Pense como se fosse um filme, onde cada “frame” tem uma imagem diferente. Tem uns que têm o fundo igual, e só muda as frases. Tem outros que tem fundos diferentes. Outros, alguns elementos “andam” pela imagem na animação. Use sua criatividade e crie todas as camadas que você vai precisar para animar a imagem.

No nosso exemplo, eu usei três fundos diferentes, e três textos. E tem mais duas camadas com elementos que eu vou fazer “voar” pela animação.

Passo 3
Depois que tiver todas suas camadas prontas, clique no último botão da barra de ferramentas. Esse botão vai te levar para o Adobe Image Ready, que é o programa que se usa para fazer a animação.

Passo 4
Agora você está no Image Ready. A interface dele é bem parecida com o Photoshop, mas tem algumas funções diferentes. Você deve ver a mesma janela das camadas, a barra de ferramentas e você vai precisar de outra janela para fazer a animação. Clique em “Windows/Janela” e depois “Animation/Animação”.

Passo 5
Chegou a hora de montar os “frames/quadros” que serão animados depois. Na janela de animação, selecione o primeiro frame (1) e escolha na janela das camadas (layers) aquelas que você quer ativa no início da animação.

Depois clique na setinha no final da janela de animação e escolha “New Frame/Novo Quadro”, como mostra a figura abaixo.

Repita esse passo quantas vezes forem necessárias até você ter todas os frames que vai usar na sua animação. Em cada frame, selecione as camadas que você quer ativas. No nosso exemplo, eu usei três camadas principais, cada uma com um fundo diferente e movi as bolas para a posição que eu queria, pra dar a impressão que elas estão se movendo.

Passo 6
Esse aqui é o pulo do gato! Pra dar um efeito mais suave na animação, nós usamos o “tween”. Se não usar esse efeito, o que vai acontecer é que a transição dos quadros vai ficar mais “seca”, como o exemplo abaixo.

O tween faz com que os quadros tenham uma transição mais suave, que parece que a imagem está se transformando em outra coisa. Ou por exemplo, se eu quero que a bola se “mova” de cima pra baixo”, num frame eu coloco esta camada num ponto, e no segundo frame eu coloco ela em outro ponto. O “tween” vai criar camadas intermediárias entre um frame e outro, e na hora de animar, ele vai dar o efeito da bola se mexendo. Exatamente como um filme de animação. Sabem como os animadores fazem frame por frame, desenhando cada movimento meticulosamente? Se a transição não for suave, não dá a sensação de movimento contínuo, mas de “pulos”, certo?

Bem, voltemos ao exemplo. Selecione o primeiro frame, clique na setinha e clique em “tween”. Você então vai configurar o seu tween. Selecione “Next (próximo) frame” (na imagem do exemplo está “previous/anterior”, mas está errado, desculpem!).

Então vai ficar assim:
Tween with: next grame
Frames do add: 5 (você pode escolher quantos frames quiser, eu escolhi 5)
Layers: All layers (todas as camadas)
Parameters: todos selecionados

Uma nota sobre o número de frames: quanto mais frames tiver entre uma camada e outra, mais suave vai ser a transição, porém mais pesado vai ficar o arquivo. Tente usar o mínimo de frames que te garanta uma transição satisfatória.

Pronto. O Image Ready criou todos os frames intermediários. Repita esse passo quantas vezes for necessário. No nosso exemplo eu fiz apenas duas vezes, já que tinha 3 frames “principais”. Fiz o tween entre o primeiro e o segundo, depois entre o segundo e o terceiro.

Passo 7
Chegou a hora da animação! Todos os frames estão marcando “0 sec” (0 segundos). Agora você vai atribuir tempos para cada frame. Eu recomendo mais tempo nos frames “principais” e 0.1 segundo para os frames de transição (tween). Você deve selecionar o tempo para todos os frames. Clique na setinha onde estão os segundos e selecione o tempo desejado.

Passo 8
Depois de colocar tempo em todos os frames, você pode ver como ficou a sua animação. Clique no botão “Play”, conforme a figura abaixo. Se o resultado agradou, o seu blinkie está pronto. Se não, é só ajustar os tempos, ou as camadas, conforme o seu gosto.

Se em algum momento você precisar voltar ao Photoshop pra ajustar alguma coisa, clique no último botão da barra de ferramentas. Você pode “ir e voltar” quantas vezes quiser, e não esqueça nunca de salvar sempre!

Passo 9
Uma vez satisfeita com seu resultado, ainda no Image Ready, clique em “File/Save optimized as” (Arquivo/salvar otimizado como). Isso vai fazer com que seu arquivo seja salvo na extensão gif.

E aqui está o resultado final:

E prontinho! Depois é só inserir seu blinkie nas suas assinaturas de fóruns e sites!

Anúncios
Deixe um comentário leave one →
  1. dezembro 6, 2007 9:36 pm

    Adorei esse tuto! tudo de bom 😉
    beijos,
    Luiza

  2. fevereiro 6, 2008 5:05 pm

    Adorei o post… sei que é antigo… mas pesquisei e fiz pela primeira vez um blinkie… valew!!!

  3. maio 16, 2008 1:18 pm

    Muito obrigada pela explicação!
    Adorei, fiz meu primeiro blinkie, bem simples ainda, mas fiquei feliz em aprender!!
    Beijos a todas!!!

  4. setembro 28, 2008 10:09 pm

    quando coloco no blog…. a animação não aparece…..como faço?será que fiz algo errado…. mas salvo no meu computador ele passa animação normalmente

  5. março 4, 2009 3:41 pm

    Amei o tutorial… muitissimo obrigada!!!!!
    Sempre quis fazer um e não tinha idéia de como…
    beijos!!

    Ana Paula’s last blog post..Scrap eternizando momentos

  6. novembro 11, 2009 10:14 pm

    Obrigada pela dica!
    Adorei, muito bem explicado me ajudou a criar o meu que eu tanto queria!

    Beijos!
    .-= Tali Simão´s last blog ..VAMOS COMEÇAR?!?!?! =-.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: