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.
- 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.
- 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
- 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.
- 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
I loves me some crazy bitches.