A Comprehensive Animated GIF Tutorial

(featuring Dave Gahan)

July 1, 2023

By: Purple

Would you like to learn how to create your own animated GIFs like the one above? Then, you have certainly come to the right place! I really enjoy creating GIFs from my favorite videos and it is no surprise that creating GIFs featuring Dave Gahan is an especially enjoyable hobby! I prefer to be totally DIY when it comes to these sorts of things, so I always create my GIFs from scratch, starting from video footage, extracting short frame sequences, and splicing them back together to create an animation. Even though plenty of free tools exist on the web that will automatically perform this entire process for me, I honestly prefer to make them myself from scratch. In this article, I am going to show you my method for creating animated GIFs from scratch. It might not be the fastest or most efficient way to do it, but I believe it is the most satisfying way as it allows one to have complete control over the entire process and the end result. So, without further ado, let's jump into it! And of course, we will use footage featuring none other than Dave Gahan, himself!

Step 1: Choose a video

The very first step in the GIF-making process is to choose a video from which you will source your animation. Ideally, you should have it in file form saved on your computer and it should be in a common video file format. Some of the most common video formats are .avi, .mpg, .mpeg, .mov, and .mp4, but there are many others. This is important because the format needs to be supported by the tools that are going to be used to extract the frames from it.

But what if I don't have the video saved on my computer? The video that I want to create an animated GIF from is on YouTube (or Vimeo, etc.)!

This is a very good and common question and I am afraid that all I can say is that you are on your own here. Yes, there are tools out there that can extract video files hosted on these websites. Unfortunately, I cannot recommend specific methods or tools as the legal ramifications of doing so are sketchy, at best, and I don't want to get you or myself in trouble. My only advice here is that if you do choose to find a tool for doing this, then be extremely careful...many of these tools can introduce malware and wreak havoc on your computer. Do your research — read reviews and ask around if you need to. In the end, it really comes down to "use at your own risk."

Anyway, going back to finding a good video file to make GIFs from, my tip here is to choose a video that is of high quality. In particular, the resolution of the video will dictate how large and clear your resulting GIF will be. It is definitely possible to change the resolution of the resulting GIF and I will show you how to do that later, but just keep in mind that it is easier (i.e., it will look better) to go from a higher resolution to a lower one than it is to go from a lower resolution to a higher one.

For this tutorial, I am going to use the video from Depeche Mode's performance of "Sacred" from 101 (also on YouTube below), which I have obtained in .mp4 format from a download that came with the 101 box set released in 2021.

Step 2: Extract the frames

The next step is to extract individual frames from the video file I chose in Step 1. To do this, I use a free tool called VirtualDub. This tool does not support the .mp4 video file format by default so I also need to download the FFMpeg Input Plugin for VirtualDub. After installing that, I am able to open my .mp4 file in VirtualDub.

On the surface, the interface in VirtualDub looks very much like a video player. I can play videos from beginning to end, pause, rewind, fast-forward, etc. But it also has many additional features, such as allowing me to export individual frames from this video and save them on my computer so that I can use them as the building blocks for my GIF. How do I do that then? Well, notice along the bottom of the toolbar how there are numbers ranging from 0 to 7552. These are the individual frame numbers and thus, counting the 0th frame, this video has 7553 frames total.

I could export all 7553 frames from this video if I wanted to, but I actually never recommend doing this! Exporting that many frames all at once can and will eat up a ton of disk space on the computer. Instead, I always recommend picking just a few frames to extract and make a GIF from. For my GIF, I am going to pick the short sequence where Dave does a little spin near the beginning of the song. Timewise, this starts at around the 49-second mark and ends at around the 56-second mark. Now to select this sequence, I am going to click on the button to pause the video just before the spin, and then on the menu bar at the top, select Edit Set selection end. Notice at the bottom toolbar now that this will cause frames 0 through 1162 (where I paused) to be highlighted.

Next, select Edit Delete. This will essentially remove all of the highlighted frames so now the current video begins where I had previously paused it. Notice how all of the frames have also been renumbered to start at 0. Next, I will go ahead and play the video through until I reach the point where Dave stops spinning and then I will hit the button again to pause it. It is okay to let the video run for a second or more after he stops spinning because I can always go ahead and cull those extra frames later. Now with the video paused again, select Edit Set selection start. Then, click on the to skip to the very last frame and select Edit Set selection end. This should now highlight the frames starting from where I previously paused (the end of Dave's spin) and end at the very end of the video. Now, select Edit Delete to remove all of the highlighted frames. Now, notice how the video has gone from 7553 frames down to 215 frames...much more manageable!

I am now ready to export the frames! On the top menu bar, select File Export Image sequence. A new window will pop up with some information to fill out for the frame export. These are the settings that I will use:

After clicking the OK button, a new window will pop up showing the progress of the frame export. One thing I recommend doing right away when this pops up is to uncheck the "Show input video" and "Show output video" checkboxes so that your computer isn't bogged down with rendering every frame as each one is being exported. Another thing to take note of is the "Projected file size" as this is an estimate of how much disk space the exported frames will take up on your computer. This size is calculated based on many factors such as the total number of frames, the source video quality, and the exported frame settings to name a few. It is not uncommon for this size to be on the order of hundreds of MBs or even GBs, so that's why it is important to pay special attention to it because you don't want to fill up your computer's disk with the frames!

Step 3: Cull unwanted frames

Navigating to the folder on my computer where I exported the frames, I see 215 .png image files there.

From here, I want to do a little culling. First, I only want my resulting GIF to capture the exact moments when Dave is spinning until he flicks his right hand in the air. So, I am going to delete the first few frames where he starts his spin and also the last several frames just before he lowers his right hand. By doing this, I have also cut my total number of frames down to 169.

The next frame culling step that I usually perform is totally optional, but I believe results in a more natural-looking animation in the end. To show you why I typically do this, here is a GIF that I made from my frame sequence without any further culling:

It appears as if Dave is moving in super-slow-motion, right? At least, slower than he looks in the original video? Now if this was the intended effect, great, then I don't need to do any extra frame culling! But if I don't want it looking like this, then I need to cull some more frames. I basically want my GIF's animation to appear as close to the original speed as possible, so I typically do this by removing every other frame. The easiest way to do this in File Explorer is to right-click and select View Small icons, and then resize the window so that there are 2 columns showing for the files, like below.

Now, go ahead and pick any column — it doesn't matter which — and select that entire column from top to bottom, making sure to highlight every file in that column. And then, right-click and select Delete. If done correctly, every other frame should now be gone.

Step 4: Further edit the frames

With the frames that I have exported and even culled, I still have a few things that I want to fix. One of the biggest problems is that my frames are in .png format which my particular animation tool will not let me import. I need to convert all of the frames to .gif format in order for that tool to accept them. The second problem is that my frames are too large, and if I try to make a GIF out of them now, it will result in a huge file which I will not be able to upload to any social media site. Another thing that I take issue with is that my frame images have black borders on both the left and right sides that I want to get rid of. So, what could I do? I could manually edit each frame individually...but cropping, resizing, and converting each image file by hand is going to be a very long and tedious job; who wants to do that??? Thus, I will use another fancy tool in my arsenal to help completely automate this, which is Adobe Photoshop. In my case, I use Photoshop CS6; yes, it is an ancient version, but it will do the job. Photoshop (and many other advanced photo editing tools) have something called "batch processing" which I am going to take advantage of to streamline the editing of my frames. The exact steps for performing batch processing in different tools and versions will vary, so bear that in mind, but the basic idea is the same. All I need to do to get this going in my version of Photoshop is the following:

First, open the first frame in Photoshop. Then in the top menu bar, select Window Actions. Use the button to create a new action, name it whatever (I am calling it "Crop"), and it will start recording everything I do within Photoshop.

First, I crop the black bars out of the left and right sides of the image. Second, I resize the image to a much smaller set of dimensions — 300 x 226 pixels in this case. Third, I save a new copy of the image as a .gif file in a separate folder on my computer. Finally, I close out the image (without closing Photoshop, itself) and click on the button on the Actions window to stop recording. Now that I have recorded my actions for editing the first frame, it is time to play back those same actions on every frame. Before I do that, though, I need to navigate over to the folder on my computer where I saved the cropped, resized, and converted version of my first frame and delete it because it is going to be recreated by the batch process. After doing that, go back to Photoshop and in here, select File Automate Batch. A new dialog will pop up.

On this dialog, I make sure that the selected Action is the one that I created called "Crop" and then also make sure that the Source is set to "Folder" and the actual folder selected is the one where I have all of my frames saved. Also, make sure that Destination is also set to "Folder" and that I choose a different (preferably empty) folder to save all of the edited frames in. Finally, click on the OK button on the right to kick off the batch process. Now, Photoshop will completely take over and automatically apply my recorded actions to each of my frames and save new copies of them where I told it to! If watching Photoshop go through this process at a rapid rate makes you dizzy like it does me, you can minimize the window and let it run in the background. After it is finished, I see all of my edited frames in the folder that I specified as the batch process destination:

Notice immediately how the black borders are gone from all of them! I also just want to verify that they were properly resized and are also in .gif format. Once I do that, I am now ready for the final step!

Step 5: Create the animated GIF

In the fifth and final step, I am going to take all of my frames and splice them back together to create a single animated GIF. To do this, I use another free tool called UnFREEz. Using it is very easy. After opening UnFREEz, just select all of the (post-edit) frames in File Explorer and drag them into the empty white square in the UnFREEz window. Before kicking off the splicing process, ensure that the "Loop animation" checkbox is checked and that "Frame delay" is set to 0 cs.

Finally, click on the Make Animated GIF button, select a file name and location on the computer to save the animated GIF, and click on the Save button. It should take no more than a second to create and save the GIF, at which point, we are done!

That is it! From here, I can upload and share the GIF on social media. Just be aware that whenever you make animated GIFs this way, you want to make sure that the resulting GIF file does not exceed the size (and sometimes length) limits of the site that you are uploading it to. I hope you find this tutorial to be helpful for making your own animated GIFs completely from scratch!