NOTICE:
Check out my awesome new project over at www.zettai.moe!

April 5, 2013

[Tutorial] How to make an animated GIF (Windows)

I made an animated GIF the other day from one of my videos. You may be wondering how to make one exactly, it is quite simple actually and here is a direct way of creating an animated GIF without reencoding the actual video. This guide is for Windows only (Linux one coming later).

Step 1: Prerequsites

You will need to download some software packages before proceeding with creating an animated GIF.

CCCP (Combined Community Codec Pack)
You will need to install CCCP because it contains DirectShow codecs which are unavailable in VLC. Install using default values.

Avisynth 2.5
This tool is used for scripting videos. Download, install and forget about it.

AvsPmod
Download and extract. Installation is not required.

VirtualDub
A video capture/processing utility with many useful features. Download and extract. Installation is not required.

Step 2: Trimming the source video

Open AvsPmod and go to File then Open
Select Source files from the file format drop-down box and open the selected video file.

Add ", audio=false" just before the last ")" at the end of the first line of code.

Press the Next frame button to load and view the video
Find the part of the video you want to trim by using the frame slider to the right of the frame counter.
Add a new line to the script and type "#Trim(0,0)".
Replace the first 0 with the frame number you want to start trimming at. Replace the second 0 where you want the animated GIF to end.
If you want to trim different parts of the video and mash it all together just add another Trim with a "+" at the front.
Now remove the "#" in from of the Trim code and press the play button on the video control panel at the bottom.
Make any necessary changes to the Trim to how you want. If you are happy with your result, save the script as AVS and close AvsPmod.

Step 3: Adding filters to the video

Open VirtualDub and open the AVS script file you just saved by clicking on File then Open Video File.

You will see 2 video frames (side-by-side) on the screen. Right-click on both and select 50% zoom so that you can see both on one screen.

Click on Video from the main menu and Filters.
You will see the dialog box pop-up.
Click Add and select resize from the list. Click Ok to continue.
This will open the Filter: Resize settings dialog. Change the appropriate settings as shown below.
I have chosen Absolute (pixels) for the New Size option to be 497px in width because this size fits into G+ posts nicely. If you just want a scaled down animated GIF, then select Relative (%) and make it 50x50.

For the Filter mode change the selection to Precise bilinear, this gives the image a soft look and also improves the quality within the GIF. Feel free to play around with the filter modes to produce your desired result.

Once you are done, click on Ok to close the settings. Click Ok again to close the filters dialog.

There are plenty of other filters in the list if you want to play around with them.

Step 3: Exporting as an animated GIF

If you are happy with your current changes, it is now time to export the project as an animated GIF.

Click on File, Export, Animated GIF...

Select the name and folder of where you want to store your animated GIF by pressing on the "...".
If you want your animated GIF to continuously loop, select the Infinite loop option. If not, you can set it to loop only once or a set amount of times.

Click Ok and let it render. Once completed the box will disappear.
Open your GIF and check if it is working properly. (Do not use Windows Photo Viewer as it doesn't work, use your browser and open the GIF from there)

Step 4: (Optional) File size reduction

You may have noticed that your animated GIF is ridiculously large and is not browser-friendly if uploaded. Your only option wold be to reduce the frame rate to keep the same image resolution and quality.

Open up VirtualDub back to your project (if you have closed it).

Click on Video then Frame rate...

In the Frame rate conversion group box, select Process every other frame (decimate by 2).
Click on Ok.

Check the file size of the animated GIF. If it is still too large, then choose Process every other frame (decimate by 3) or select Decimate by with your chosen number.

Note that the more frames you skip, the more jittery your video becomes. I would recommend decimating by 3 or 4 frames.

Tips:

  • Trim all unnecessary parts of the video out. 
  • Keep the scene short. The shorter the video length, the better the GIF will be.
  • If you want to upload to Google+, a 497px in width would be the best size.
  • Try to keep your animated GIF under 5 MB if possible.