Galera, segue aqui mais uma utilidáde pública no Garotas Geeks, dessa vez uma coisa que vivem me perguntando: como fazer GIFs… bom… você vai precisar de: tesoura sem ponta Photoshop, IBAGENS e/ou vídeo. E Eu vou além: GIFCEPTION sim, um GIF mostrando como se faz um GIF.
Se o GIF travar ou ficar estranho favor dar um F5, muitos GIFs pesam e às vezes acabam ficando bugados no post!

Download gratuito (para testar) do Photoshop aqui.

GIFs a partir de imagens

Hoje tá uma moda na interuébis fazer GIFs bibliográficos então vamos fazer um aqui? Passo a Passo.

como fazer gif

1. Separe as imagens que você quer usar, abra o Photoshop e crie um arquivo com das dimensões que você desejar (procure escolher um valor que seja próximo ao tamanho das imagens originais).
2. Importe uma imagem como Layer, cada imagem será uma camada (file -> Place) ou vá no navegador, dê CTRL+C  abra o photoshop e dê CTRL+V.
3. Após dar o Place, redimensione a imagem para caber na tela. Se você não usou o jeito do File -> Place e sim o do CTRL+C utilize o comando CTRL+T para redimensionar.
4. Nesse caso como é GIF bibliográfico, faça um texto para cada imagem.
(no exemplo eu usei um Stroke, na janela de layers selecionei a camada do texto cliquei no FX -> stroke)
5. Junte o layer de texto com o layer da foto e dê “Merge”, faça isso para cada imagem.
importante que o layer de texto sempre esteja em cima da imagem desejada.
(para dar o merge: selecione o layer da imagem, segure o shift, selecione o layer de texto, clique com o segundo botão MERGE, as vezes o merge não está clicável então eu dou um rasterize antes e depois o merge, vai entender LOL)

Após fazer o passo 5 com TODAS as imagens desejadas hora de começar a ~animar~.

6. Desabilite os “olhinhos” na janela de layers e deixe apenas o último habilitado
7. Abra a janela de Animação (Window -> timeline ou animation dependendo da sua versão do photoshop)
8. Clique no ícone da folhinha e em seguida habilite mais um “olhinho”, faça isso até terminar todas.
9. Na janela da Timeline selecione todas as imagens e clique no tempo, escolha uma duração.
10. Vá em File -> Save for Web
11. Selecione GIF, ajuste o tamanho de sua preferência e coloque LOOP FOREVER

 

Resultado final aqui!

 

GIFs a partir de um vídeo

Se for um vídeo do Youtube, eu recomendo o GifSoup, mas ele acaba sendo bem limitado se você quiser um trecho maior. Você pode separar um vídeo no seu PC, aqui no exemplo eu puxei esse vídeo aqui. E edite direto no Pshop, isso mesmo /o/

como-fazer-gif-video

1. Abra-o no Photoshop
2. Faça as alterações de imagem (eu no caso recortei a cara da Minhoca a.k.a. Tammy da nossa equipe)
3. Selecione o trecho desejado
4. Salve: Vá em File -> Save for Web, selecione GIF, ajuste o tamanho de sua preferência e coloque LOOP FOREVER

 

Resultado final.

 
Ainda sim não deu pra customizar muito fazendo com esse método de GIFs a partir de um vídeo no photoshop, mas aí você tem a seguinte opção: apenas use esse método anterior para selecionar o trecho, para customizar ABRA esse gif que você acabou de criar no photoshop novamente e prepare-se para o terceiro tutorial:

GIFs a partir de outro GIF

Baixe um GIF da internet, tipo esse e abra-o no Photoshop.

como-fazer-gif3

 

1.Abra o GIF.
2. Crie um texto, arraste a camada de texto para o topo na janela Layers.
3. Na janela de Animação selecione todos (exceto o primeiro) e clique no ícone da lixeira.
4.Nesse caso eu alternei o texto frame sim, frame não. Habilitei o Layer 1 e o texto, cliquei no ícone da folhinha, habilitei o Layer 2 e desabilitei o texto, cliquei na folhinha, habilitei o Layer 3 e habilitei o Layer de texto e cliquei na folhinha… e assim em diante.
5. Veja como ficou intercalado bonitinho 😀
Salve: Vá em File -> Save for Web, selecione GIF, ajuste o tamanho de sua preferência e coloque LOOP FOREVER

 

Resultado final aqui.

 

GIFs para o Tumblr

Os GIFs no Tumblr precisam ter no máximo 500kb de tamanho para funcionar! Se não, eles congelam =(
Aqui tudo se resume a ajustar o tamanho na janela de “save for web”

gif-para-tumblr

 Veja as marcações acima, a primeira no canto superior direito é a Optimize to File Size, coloque 500k, esse jeito às vezes resolve ou às vezes o gif fica muito tosco, aí faça um ajuste fino você mesmo: Veja o Image Size, o colors e o lossy. Vá futricando e fique atento ao tamanho previsto (canto inferior esquerdo)

É isso pessoal, quem manja mais de Photoshop vai ver que eu tô longe de ser expert, deve ter jeitos melhores mas esse é o jeitinho Babs™ de contribuir com a Internet! Qualquer dúvida deixem nos comentários! E eu tento responder!

Compartilhe: