3 de novembro de 2014 | Edição #8 | Texto: | Ilustração:
Imagens em movimento: como fazer seu próprio GIF

Texto por Mariana Paraizo

O QUE É UM GIF?

GIF – Graphics Interchange Format

A internet é um celeiro de gifs. Se você é uma pessoa que frequenta assiduamente o tumblr, com certeza já ouviu falar nesse formato que carrega um número de imagens diferentes exibidas no mesmo espaço em poucos segundos. Pode ser uma cena curta de uma série, um doodle ou desenho em pixels, até mesmo viagens psicodélicas de efeito 3D. Antes de começar a contar a história deste celebrado melhor amigo digital (que por diversas vezes nos faz rir), alguns exemplos:

gif exemplo - 5

gif exemplo-1

gif exemplo-2

gif exemplo-3

gif exemplo-4

O GIF foi criado em 1987 como uma alternativa ao formato anterior de imagens computadorizadas que só permitia preto e branco. Algo mais mágico do que imagens coloridas? Nós podemos imaginar como o formato anterior foi descartado da mesma forma como a televisão preto e branca evaporou depois da invenção da televisão colorida.

Na verdade, o GIF é um formato que serve tanto para imagens em movimento quanto estáticas. Vou falar mais neste post do GIF animado, por ser este o uso predominante do formato atualmente.

“Ok, por que esse formato de imagem é tão interessante assim se já inventaram muitos outros formatos de imagem colorida computadorizada desde então, inclusive os vídeos?”

O trunfo do GIF é que ele é carregado rapidamente. Além disso, com a popularização do GIF, ele passou a “ostentar” uma estética diferenciada, pertencente ao imaginário internético e muito utilizada em jogos eletrônicos, emoticons e, novamente ele, no tumblr. Você não precisa apertar um botão para carregar um GIF, ele simplesmente vai pipocar animado na sua cara.

Para ser mais específico, o diferencial do GIF é que ele utiliza uma programação diferente, a compressão de dados LZW – que ocupa muito menos espaço que a programação mais utilizada da época: run length encoding. O único porém deste formato é que ele possui uma paleta limitada de cores (256). Por isso a estética explorou esse aspecto mais “tosco” dos pixels. A imagem é baixada em áreas, ou blocos, linhas da imagem que são armazenadas fora de ordem.

Ao fazer um GIF, nós temos a possibilidade de determinar se ele vai ocorrer em looping, ou seja, se a sequência de imagens vai prosseguir infinitamente, ou se ela só vai ser rodada 1, 2, 3, etc. vezes.

Nos 25 anos de aniversário do gif, a Smart Water conta a história do GIF animado neste vídeo gracinha a seguir.

Sean Pecknold | A Short History of the Gif | Moving the Still from FRIEND on Vimeo.

COMO FAZER UM GIF – TUTORIAL DO GIF ANIMADO FÁCIL

Desde que eu vi alguns webcomics que usam GIF nas estruturas, fiquei escandalizada e tive uma ideia de uma pequetita HQ de 1 página. Comecei os primeiros 2 requadros (esses dois aqui embaixo), mas abandonei por falta de tempo… Como estou fazendo o tutorial, resolvi voltar para ela e fazer mais um GIF que estava planejado. É muito facinho e eu vou desenhar na mesa digitalizadora mesmo, mas eu poderia ter desenhado e escaneado para usar as imagens no Photoshop – que é o programa com o qual eu trabalho. Isso é o que eu já tinha feito até agora:

gif pronto-2

1) Abra o Photoshop e vá em File > New blank document. Um quadro vai se abrir com as especificações da imagem que você vai criar. Escolha o preset Web, que vai mudar a resolução para 72 pixels por inch automaticamente, o suficiente para uma imagem de tela de computador. Você pode alterar o tamanho que vem em Size para algo menor (ou não). Eu coloquei 300×540.

GIF1

2) Comece a desenhar uma imagem base – é bom reaproveitar a imagem base com algumas alterações para fazer um GIF, fica muito mais fácil.

3) Comece uma nova camada (layer) com as coisas que você quer que se “movimentem” na sua imagem. No meu caso, vai ter essas bolinhas pretas passando pelas veias desse corpo aí.

GIF2

4) Faça mais camadas com bolinhas seguindo o movimento que você tinha planejando. Por exemplo: você fez uma estrelinha que vai da esquerda para a direita. Na primeira camada a estrela está a 1cm da borda. Na segunda camada, a estrela está a 2cm da borda… por aí vai, fazendo o caminho que você decidir. Para facilitar o movimento, ative e desative a visualização da camada no olhinho à esquerda da camada selecionada.

GIF3

5) Vá em “Window” e selecione a opção “Timeline”. Uma nova caixinha retangular vai se abrir. Clique em “create video timeline”. Eu sei mexer nesta caixinha com uma visualização diferente, que você vai ativar ali embaixo nos três quadradinhos à esquerda, clicando:

GIF4

GIF5

GIF6

6) Agora vem a parte surpreendentemente fácil. Sabe quando você estava alternando a visualização das camadas que são o movimento, como no exemplo da estrelinha? Bem, você vai fazer a MESMA COISA, só que controlando na timeline a imagem que vai aparecer em cada quadro do tempo. Você pode criar o número de frames igual ao número de camadas que você criou para o objeto (no meu caso as bolinhas pretas) ou você pode criar mais frames, alternando em diferentes ordens as 3 camadas (ou mais, isso fica à seu critério). Como criar um novo frame? Aperte no bloquinho de notas que tem um ícone igual a esse aqui embaixo.

GIF7

GIF8

7) Lembre-se de tirar a visualização da camada anterior no novo frame, ou você vai ficar com mais de 1 estrelinha ou mais bolinhas do que você tinha planejado. Eu quero que o movimento das bolinhas pareça fluido e eu fiz poucas camadas, então eu vou deixar cada camada pelo mínimo de tempo possível, para quase ser imperceptível a alternância e dar a impressão de que as bolinhas estão realmente se movimentando. 0.1 segundos, para não ficar frenético que nem fica quando está em “no delay”.

GIF9

8) Escolha entre as seguintes opções de repetições da sequência: “once” (uma vez), “3 times” (três vezes), “forever” (para sempre) ou “other” (você escolhe o número de vezes que a sequência vai se repetir).

9) Tcharam! Vá em file (ou arquivo) e save for web (salvar para a internet)! Seu gif está pronto.

gif pronto-1

10) Não se esqueça de salvar o arquivo em .psd também, caso queira fazer alterações no GIF se não estiver satisfeito.

Algumas webcomics que usam GIFs na sua estrutura narrativa:

Gosta de quadrinhos e sentiu falta de mais autoras nesse post? Procurei webcomics com GIFs feitas por garotas e achei quase nada. Não precisam chorar: fiquem com a Bianca Bagnarelli, porque ela não precisa de GIF nenhum pra ser maravilhosa. Se acharem mais webcomics com GIFs, comentem neste post com links!

Mariana Paraizo é colaboradora de Artes e ilustradora. Mazô, vim de um planeta onde copos não precisam ser lavados e roubar balas no supermercado não é errado. Estou constantemente viajando em mim mesma e nos meus desenhos. Gosto de cantar, mas o que eu decidi gostar mais foi de quadrinhos. Por isso, a maior parte do meu dinheiro em 2013 foi vertido em livros.
Site / blog / tumblr: https://mazotopia.tumblr.com
Facebook: https://www.facebook.com/xmaz0x

Sobre

A Capitolina é uma revista online independente para garotas adolescentes. Nossa intenção é representar todas as jovens, especialmente as que se sentem excluídas pelos moldes tradicionais da adolescência, mostrando que elas têm espaço para crescerem da forma que são.

Arquivos