Audition Square
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

[Tutorial] Como fazer um gif animado

5 participantes

Ir para baixo

[Tutorial] Como fazer um gif animado Empty [Tutorial] Como fazer um gif animado

Mensagem por Insano Qui Dez 02, 2010 9:30 pm

Nesse tutorial vou ensinar como fazer um gif quadro a quadro a partir de um vídeo.
Para quem quiser fazer um gif animado para usar como sign é só seguir esses passos:




você precisará do vídeo.
  Caso você já tenha o vídeo "em mãos" pule essa parte, caso não tenha, baixe-o.
Se for do youtube, você pode usar o "[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" ou outro programa que você preferir.

Vou utilizar um vídeo da Miss Hannah Minx:

(o nome desse vídeo não é muito legal XD)

Spoiler:

Em "Download" escolha em que qualidade de vídeo você deseja baixar (é claro que o vídeo só será baixado
com aquela qualidade se ele possui-la).

Em "Vídeo URL" cole o endereço do vídeo do youtube

Clique no botão "Browse" para escolher onde deseja salvar seu vídeo e clique em "Start" e espere o download terminar




após concluído o download você vai precisar do "[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]" ou o "[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]", se eu não me engano o Flash também faz isso
   *Se você for usar o VirtualDub para fazer os frames, no Youtube Downloader HD, selecione a caixa "Convert FLV to AVI..."




Usando o VirtualDub:
Abra o programa, clique em "File" e depois em "Open a video file" e escolha o vídeo.

Com o vídeo aberto clique em "File", "Export" e "image sequence" como na imagem abaixo

Spoiler:

Aparecerá uma janela como essa:

Spoiler:

em "Filename" coloque o nome para as imagens que serão geradas (o prefixo delas)
eu coloquei minxy, então todas as imagens terão "minxy" no começo ficando minxy0000, minxy0001 e assim por diante

em "Filename suffix, including" não mexa
e em "Minimum number of digits in" coloque o mínimo de dígitos que você quer que a imagem tenha no nome
ou deixe como está

em "Directory to hold" clique no botão com os três pontos "..." e selecione onde você deseja salvar as imagens

esse processo vai demorar um pouco ^^
Spoiler:

em "Output format" selecione qual extensão de imagem você quer e clique em "OK"

então aparecerá essa janela enquanto a "conversão" em imagens acontece

após concluído feche o programa




Usando o Free Video To JPG Converter ( a melhor opção entre esses dois na minha opinião ^^):

abra o programa
Spoiler:

clique no botão "Procurar" da parte de cima para abrir o vídeo

na área "Extrair" selecione como você quer que o programa faça os quadro... a cada tantos quadros, a cada tantos segundos, apenas tantos quadros de vídeo ou a cada quadro do vídeo inteiro (sugiro que selecione "A cada quadro")

agora clique no botão "Procurar" da parte de baixo e selecione onde você deseja salvar as imagens e clique em "Extrair", claro que dependendo da opção que você escolheu para os quadros, o processo vai demorar tanto quanto no VirtualDub

Spoiler:

depois de separados os quadros como você queria, vamos finalmente fazer o gif

vou ensinar pelo photoshop, pois é o único programa que eu tenho instalado aqui ^^




no photoshop você vai precisar usar a guia de animação e a de layer também

Spoiler:

caso você não tenha a de animação é só ir em "Window" e clicar em "Animation"

Spoiler:

caso não tenha a de layer também é só apertar F7

agora com o photoshop aberto, você vai precisar abrir todas as imagens (quadros) que você queira usar para
fazer o gif animado

como eu estou usando o CS5 minhas imagens ficarão em abas, caso você esteja usando uma versão anterior como o CS , por exemplo, ela ficará em janelas diferentes
Spoiler:

agora copie imagem por imagem na ordem que você quer que apareça no gif e cole na aba (janela) da imagem que você quer que seja a primeira do gif, ficando todas em layers diferentes (não é necessário ser na primeira e muito menos na ordem, é só para não dar confusão depois)

Spoiler:

agora na guia de animação clique no botão de duplicar frames (indicado na imagem)

Spoiler:

duplique até aparecer a quantidade de frames que você precisa ( no meu caso 17 frames, porque eu selecionei 17 imagens para o gif)

Spoiler:

agora clique no frame 1 e na parte das layers deixe aquele "olho" apenas na layer(imagem) que você quer que
apareça no primeiro frame do gif

Spoiler:

e no segundo frame deixe o "olho" apenas na layer que você quer que apareça no segundo frame do gif e assim
sucessivamente até você fazer todos os frames do gif

na parte de baixo de cada frame tem "0 sec." clicando na seta que tem do lado você pode modificar esse tempo fazendo com que essa imagem demore mais ou passe mais rápido (caso você tenha alterado o tempo das outras) no gif (para voltar a ficar "0 sec" clique na seta e selecione "No delay")

** ela já demora um tempo padrão, esse tempo que você vai colocar é para ela demorar mais que o tempo padrão

aperte o botão de play que fica na parte de baixo da guia de animação para você ver como está ficando

depois de todos os frames arrumados (imagens editadas do jeito que você quiser) e o tempo também arrumado,
chegou a hora de salvar esse gif




para salva-lo clique em "File" e depois "Save for Web & Devices" ou simplesmente aperte Alt+Shift+Ctrl+S

Spoiler:

na janela que abrir selecionando gif no canto superior direito, já basta, mas você pode fazer alguma modificações
se quiser

Spoiler:

ali no canto direito em "Image Size" você pode colocar o tamanho que você quer para o seu gif
lembrando que "W" é largura e "H" é altura, mas se aquela corrente estiver ali do lado basta preencher um dos dois que o outro é preenchido proporcionalmente, mas se você quiser colocar tamanhos não proporcionais no seu gif é só clicar na corrente para ela sumir, ai você pode colocar o valor que você quiser nos dois (para aparecer a corrente novamente é só clicar lá de novo)
clique em save, escolha onde quer salvar e pronto! ^^

Resultado:
Spoiler:




ufa, terminei ^^, está um pouco bagunçado mas acho que da para entender ^^
O.O caraca comecei a fazer esse tutorial estava claro ainda XD, preciso melhorar meu tempo ^^

EDIT:
esqueci de mencionar... tenha um certo espaço no HD, por que a pasta com os frames podem ficar muuito pesadas
esse vídeo tem 2min, o download dele em 480p (em AVI) ficou +/- 11mb, a pasta com os frames ficou com 1,22gb
deu mais de 35mil imagens (tudo isso para pega só 17 XD), isso por que eu coloquei para fazer de 10 em 10 quadros
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Se você quiser pegar um quadro de um gif que você achou legal para adicionar ao seu
é só seguir a parte do "Usando VirtualDub" só que no lugar do vídeo, você abre o gif ^^
ou então abrir o gif com o photoshop que ele já separa todas as camadas com o tempo delas no gif, ai é só salvar copiar para a aba/janela que você está fazendo seu gif ^^


Última edição por Insano em Qui Dez 23, 2010 10:30 pm, editado 12 vez(es)
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Elfo Qui Dez 02, 2010 10:07 pm

Ahh brigado, tava querendo saber...Quando eu tiver mais saco eu leio e tento fazer
Elfo
Elfo
Administrador
Administrador

Mensagens : 2263
Reputação : 86
Data de inscrição : 01/06/2010
Idade : 32
Localização : Rio de Janeiro - Rj

http://queridavidavirtual.blogspot.com

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Zena Sex Dez 03, 2010 12:57 am

JUSTIN BIEBER IS KAWAI DESU PPPPPPPPPPPPPPPPWNED
Tava querendo saber +1, thank you.
Zena
Zena
Administradora
Administradora

Mensagens : 2582
Reputação : 73
Data de inscrição : 01/06/2010
Idade : 29
Localização : São Paulo - Capital

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Insano Sex Dez 03, 2010 12:12 pm

hauahuaha como diz no vídeo, o JustEn só pode ser chamado de kawaii se ele for considerado (pela pessoa que está falando) uma criança ou uma garota (XD)

demo iie kare wa kakoii ja arimasen
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Convidado Qui Dez 23, 2010 8:58 pm

Eu ja tenho o video aqui tudo recortado '-'
mas
n kero instalar photoshop pelo motivo de ser mt chato e-e
n tem um programa que deixa em .gif? mas sem aquelas coisas de cores que deixa o gif orrivel/

Convidado
Convidado


Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Insano Qui Dez 23, 2010 9:21 pm

você pode usar o gimp (não sei mexer no gimp, então não posso ajudar muito mais que isso
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

ou então usar o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].. não preciso explicar como ele funciona ( o mínimo de noção de inglês já basta, mas qualquer coisa é só falar XD)

EDIT: no unfreez todas as imagens que você arrastar e soltar no programa, tem que ter extensão ".gif"
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Convidado Qui Dez 23, 2010 9:54 pm

mas é video .avi
e o video tem 14 segundos
n kero ter tudo isso de imagem D:

Convidado
Convidado


Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Dakr Qui Dez 23, 2010 9:56 pm

Nice tuto!
Mas acho que está na área errada = /
Dakr
Dakr
Lenda
Lenda

Mensagens : 3199
Reputação : 13
Data de inscrição : 01/06/2010
Idade : 26
Localização : Rio Grande do Sul

http://twitter.com/#!/pancreas3 http://www.audition.com.br

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Insano Qui Dez 23, 2010 10:04 pm

Frajolex escreveu:mas é video .avi
e o video tem 14 segundos
n kero ter tudo isso de imagem D:

aahh.. você apenas recortou o vídeo.. ainda não separou os frames...
então tem que fazer isso antes (e isso não é com o Photoshop o.Ô).. ou então eu não entendi o que você disse XD

Dakr escreveu:Nice tuto!
Mas acho que está na área errada = /
opa.. vlw..
era para ser na área de design né?
XD tem problema não
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Convidado Qui Dez 23, 2010 10:07 pm

eu fiz assim:
baixei o video com o vdownloader no formato .AVI
com o movie maker peguei a parte que eu queria
e salvei como .avi
e qdo vou no format factory, eu boto gif arrrumo tudo
mas fica com aquelas cores mó cu.

Convidado
Convidado


Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Dakr Qui Dez 23, 2010 10:12 pm

Era pra ser em Design > Tutoriais.
Dakr
Dakr
Lenda
Lenda

Mensagens : 3199
Reputação : 13
Data de inscrição : 01/06/2010
Idade : 26
Localização : Rio Grande do Sul

http://twitter.com/#!/pancreas3 http://www.audition.com.br

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Convidado Qui Dez 23, 2010 10:15 pm

o Dakr tá em primeiro nos 20 postadores do dia |: eu to em quarto u-u
insano, uns 14 segundos, qts frames deve ter? quantas imagems?

Convidado
Convidado


Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Insano Qui Dez 23, 2010 10:15 pm

agora faz a parte "Usando o Free Video To JPG Converter" ou "Usando o VirtualDub"
assim você vai criar os frames com o vídeo.. ai você separa as imagens (frames) que você vai querer no seu gif...
e ao invés de você usar o photoshop como está no tutorial você segue o tutorial do gimp que eu passei no link alguns posts acima (^^)

ou então usa o unfreez... só que para usar ele você vai ter que salvar essas imagens que você separou em formato gif para depois criar o gif animado usando elas no programa
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Dakr Qui Dez 23, 2010 10:20 pm

Frajolex escreveu:o Dakr tá em primeiro nos 20 postadores do dia |: eu to em quarto u-u


E o que é que tem? DHASUDHSUDHASU /zoa.


É, acho que tem que mover o tópico pra área certa.
You're Welcome = )
Dakr
Dakr
Lenda
Lenda

Mensagens : 3199
Reputação : 13
Data de inscrição : 01/06/2010
Idade : 26
Localização : Rio Grande do Sul

http://twitter.com/#!/pancreas3 http://www.audition.com.br

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Insano Qui Dez 23, 2010 10:27 pm

Frajolex escreveu:o Dakr tá em primeiro nos 20 postadores do dia |: eu to em quarto u-u
insano, uns 14 segundos, qts frames deve ter? quantas imagems?

dão +/- 400 imagens...
claro que você não vai usar todas, por que tem alguns movimentos que são mínimos
e com certeza você pode pular alguns movimentos que no gif vai continuar parecendo normal ^^
Insano
Insano
Amador
Amador

Mensagens : 281
Reputação : 12
Data de inscrição : 30/07/2010
Idade : 32
Localização : São Bernardo do Campo - SP

http://www.twitter.com/InsanoAlves

Ir para o topo Ir para baixo

[Tutorial] Como fazer um gif animado Empty Re: [Tutorial] Como fazer um gif animado

Mensagem por Elfo Qui Dez 23, 2010 10:36 pm

Essa menina usa silicone não é possivel O.O
Olha isso: