DIY video clip to animated .gif tutorial: 100% FREE!

Media Outlet Image Mishmash
1

If you’re posting on this forum by now you must have noticed that a lot of people have avatars which are animated pictures of scenes from a fighting game match video, a movie, anime, or Kanye West’s amazing performance at the VMA awards. Ever wish you could make one of those yourself instead of having to ask some guy on the internet that you don’t even know? Well I don’t, but you might!

Ever watch a really hype scene from a match video, movie, or anime and think “damn, that scene where that blond chick shoots that loli in the head really describes by internet persona!” I know I do, and so do you!

Anyways, I thought I’d write a tutorial on how to make animated pictures from video clips using only software that is FREE for download on the interwebs. That’s right, it costs you NOTHING except time and some of your dignity.

First, some things to know:

  • If you already have one of the “good” animation tools (ImageReady/GIMP/etc) then this isn’t very useful for you. Visit the photoshop help thread to learn how to make animated stuff with “the good stuff”!
  • This tutorial covers extracting still frames from video and converting those into an animated picture. Creating animations from scratch is up to you and your photoshoopin’ skills.
  • To be honest this isn’t really hard, but it does require some work since you’re not using a tool that was designed to do this sort of thing.
  • Paid tools are always easier to use and more powerful. But that costs money!
  • Using this method, you can make some (not all) of the neat avatars that people use. I’m not saying you should go copy peoples’ avatars, but it shows that you can get good results with these tools.
  • Maybe this way isn’t the best way. If you have a better way then please share!

Having said that, hopefully by the time you’re done reading this gigantic tager of a post, you’ll be able to make an animated picture and put some funny text on it.

  1. TOOLS YOU NEED
  • Video frame capture software. ImageGrab (NOT GRABBER) is a good one that’s free, as is the “Free video to JPG converter” (google, yo). I like ImageGrab because it gives you a much higher level of control over the frames to capture, but a variety of (software) works here.
  • Image resizing software. I like PIXresizer.
  • Winrar archiver, or something that can make ZIP folders.
  • a video. duh.
  1. LEADY, GO!
    Okay so this is the actual tutorial part. I’m going to do a premium size 160x100 avatar because that size is closer to the actual aspect ratio of video clips. Realistically though, you can make your picture any size you want.

First, we need to get frames out of our video file. Here I am using imagegrabber, and I think the picture is pretty self explanatory.

http://img10.imageshack.us/img10/1376/captureocd.jpg

This is what my folder looks like after capturing the frames I want.

holy crap this picture is wide

Spoiler

http://img42.imageshack.us/img42/8416/captureoutput.jpg

  1. THESE PICTURES ARE TOO BIG YOU SUCK
    Now we have to resize the pictures. I’m using PIXresizer.

http://img141.imageshack.us/img141/2471/resizel.jpg

You can do a batch of pictures at once but it’s kinda weird. I would just do the pictures one by one.

Make sure all the pictures you want in your animation, and nothing else, are in a folder.

Now before we throw things over the wall to get animated, rename your pictures ALPHABETICALLY according to what you want your animation to look like. So for example your first frame would be named like “A”, your second frame “B”, and so on. You’ll see why in the next part.

At this point, you can edit your pictures using whatever image editing software you have (MSPAINT, YO) to put text or w/e into your animation.

Once you’re done, create a .zip file from the folder with all your pictures in it.

  1. ANIMOOTIN TIME
    Go to this site: http://animatedpng.com/index.php/assembler/
    and follow the instructions. Most of the time 0.1s-0.2s or 100ms-200ms between frames gives you a decently smooth animation if you’re trying to animate movement or w/e.

So what if you want pauses in your animation? Like some text pops up, and you want the thing to freeze for 3 seconds so people can actually read it. Well you basically have to make duplicates of the frame you want it to “pause” on. So for example if in some parts I have frames going at 0.1s delay, and other parts I have the thing paused for 3 seconds, I would have 30 frames of the same thing for those 3s parts. You’ll figure it out, it’s not hard.

Anyways, here’s what I made:

http://img156.imageshack.us/img156/4558/takanolaugh.gif

EDIT: LOL webhosting. You should probably save your picture and host it somewhere else after you’re done using the APNG site :stuck_out_tongue:

I loves me some crazy bitches.

2

:u: is the link broken? Anyways…nice tutorial! It was very easy to understand. I remember trying to figure out how to do this with freeware but got frustrated (with searching for a good one, trial and error etc.) that I finally got one of the image gurus at my Uni to show me how he does it with photshop so now I use photoshop cs4 for making animated gifs. I had thought about making a tutorial about how I make animated gifs in photoshop cs4 but I am too lazy to check and see if anyone else had made one…and I don’t want to post a repetitive tut. If I may add something in case there are others who use photoshop for making ani-gifs:

For pausing frames in photoshop cs4, after importing video to frame layers (its a similar process), you can increase the delay by clicking under the desired frame that you want to “pause” this can save from having to make 30 duplicate frames for 3 seconds of paused animation.

3

There’s a “photoshop help” thread which teaches people to do stuff using photoshop, GIMP, fireworks, etc. I had thought of posting this in there, but I figured the people who would benefit probably don’t even go to that thread in the first place.

The point of this tutorial is for people do be able to make animated stuff without expensive software, because not everybody has access to that sort of thing. People who can edit, but not animate, would benefit as well I think.

In a “paid” tool you’re right that there’s an option to set whatever delay you want for whatever frame you want. That’s not possible using this method since that website basically takes pictures and applies the same delay to all of them to make the animation. Hence the frame repetition.

If you already have all the expensive stuff you probably won’t get a lot out of this :stuck_out_tongue:

As for me I use photoshop + imageready for whatever I make, but I did something using the free tools to prove it actually works.

Thanks for the feedback. First post updated for clarity!

4

Dom, why are you so awesome? :tup:

5

I’ll be totally honest, I clicked on the thread title and was convinced I was about to ban a bot.

6

Nvd mind DL, someone else hooked me up. But I did follow all the steps and even got the thing animated! Easy follow through :tup:

7

You’re the man. Domino. That’s some good stuff right there. I prolly won’
t use it since i’m lazy, but I totally could now… if i wasn’t so lazy.

maybe one day

8

You can try to use VidGIF 2.3 (http://www.geovid.com/VidGIF/ ),for converting,it’s not expencive and simple programm.

9

I had the picture ready to go and everything:

And then it turns out the thread is useful, helpful and informative. Damn.

10

how many lolis would you say

get killed in thi s anime

11

all the lolis die. not kidding.

thanks for the comments guys, glad everything works :smiley:

12

whats this anime called.

13

higurashi no naku koro ni.

14

So funny pictures :rock:

15

Cool!

Nice animated gif. I like creating Animated Pictures online.