Grue's Gnarly GIMP GIF Tutorial, part 1So, you want to make gifs of ponies. However you're a cheap/poor bastard and you can't afford Photoshop. Thankfully there is free software that can do many of the things Photoshop can do. I'm of course talking about
GIMP (formerly known as The GIMP). In this tutorial, you're assumed to be a total noob who never touched GIMP before. However, some common sense is expected. Just stick to the program, and you'll be making gifs in no time. This tutorial is for GIMP 2.6.11. GIMP 2.7 is a development version and is not stable enough for regular usage.
Exporting Frames From VideoThe first step you need to do is to get high quality frames from the video. There are several ways to do that, but they are all rather clunky. I'll describe my preferred method below.
mplayer methodMplayer is a command line video player. It can be downloaded
here. The version with GUI (SMPlayer) is recommended, but we actually don't need the GUI. Either way, what you need is to install it, and find where the file "mplayer.exe" is located (in GUI version it's placed in a sub-directory).
Now, create a directory somewhere else that would contain the frames we capture from the videos. Create a file called "frames.bat" that contains the following:
- Code: Select all
cd /D {path to the directory you just created}
{path to}\mplayer.exe -vo png:z=9:outdir={subdir} -nosound -ss {start} -frames {number of frames} %1
{path to} is a path to mplayer.exe.
{subdir} is the name of subdirectory where we put the frames. Because you don't want them all in the same place, it can get confusing!
{start} is the approximate start time where you want to start capturing frames. It can be either a number of seconds from the start or in the form mm:ss with minutes and seconds.
{number of frames} is the number of frames to capture. There are 24 frames per second, so calculate accordingly.
Finally, the fun part. This method doesn't actually require messing with command line. You take the source video file and
drag it onto the .bat file we just created. This should launch mplayer.exe with the right command line parameters and create a bunch of frames in
subdir. Next time just edit frames.bat with the different parameters and drag another video onto it.
Selecting the right framesCreate another directory and put the frames that you want to have in your GIF in there. Working with more than 30 layers in GIMP is a pain, so choose wisely (besides, your final gif shouldn't have that many frames anyway). Most of the time, you can skip every second frame, unless something fast happens (like blinks) and you need to capture that. You can always delete the unneeded frames later, so if you're unsure then just grab them all.
For this tutorial I chose consecutive frames of the part where Rarity karate-kicks Applejack in S2E02. You can download them
here.
Importing frames into GIMPSelect File > Open as Layers... , go to the directory where your chosen frames lie, then select all of them and open. (note: File > Open... dialog looks exactly the same and will open each frame in a separate window. This is bad! If you accidentally do this, click File > Close all)
Your layer panel should look like this:
If you scroll to the bottom, you will notice that the bottom layer is called "Background", which is kinda dumb. This is not necessary, but if you're feeling OCD like me, you can rename that layer to it's original frame number. To do that, double-click on the name of the layer and you can change its name to whatever.
How to work with layersYou may have noticed that no matter which layer you select (by clicking on it), the image window shows only the contents of the top layer. This is in fact an expected behavior when you're editing a "normal" image (not an animation). You place layers on top of each other, perhaps having transparent areas and the top layers take precedence. In our case, the top layer is completely untransparent and it blocks the view of all the other layers.
You may have noticed the "eyes" on the left of the layer toolbox. They control which layers are visible. By clicking on them you can hide/show individual layers. But what if we want only a single layer to be visible? The trick is to Shift-click on the eye icon for that layer. By shift clicking you can see each individual frame in your animation.
Note that selected layer and visible layers are independent concepts. Most of the actions you perform are applied only to the selected layer. But it might not even be visible.
Keyboard shortcutsSome of default shortcuts that have to do with layers are PgUp and PgDown, which work when the image window is active and select previous/next layer. They don't change visibility at all. For a long time, I just lived with that, changing visibility manually, but while preparing this tutorial I found a better way.
This plugin adds several actions that both change the selected layer and make it the only visible layer! Which is generally what we want when working with animations. To install the plugin, select Edit > Preferences, go into Folders > Scripts and note the folder names that are in the list. Download the plugin file and put it in one of these folders. Then go to Filters > Script-Fu > Refresh Scripts and you should see commands like "Layer > Stack > Select next layer only" appear in the menu. Failing that, restart GIMP.
But, this is not all. To truly harness the power of these commands, we need to assign keyboard shortcuts to them. Fortunately, GIMP allows to do that, and more. Go to Edit > Keyboard Shortcuts. There's a Search field at the top. Type "layer only" in there and you'll get something like this:
Unlike me, you have no shortcuts assigned to these commands yet, so click on each of them and press the corresponding key combo.
While we're here, let's see what other fun things we can do. I assigned Ctrl-Del to "Delete Layer" (something you have to do a lot when you are trying to make gif smaller), Insert to "Visible", and lots of other things I don't remember right now. If you do some action often, it is usually a good idea to assign a shortcut to it. Fortunately, GIMP will warn you when you try to overwrite an existing shortcut.
Basic navigationWhen you load an image into GIMP, it may be zoomed out to fit your screen. To bring zoom level to 100%, press 1. You can use Zoom tool (Z) to zoom in/out on your image (to zoom out you have to Ctrl-click). Press Space and move your mouse to pan around the image.
Cropping (static)Usually you want to only have a part of the frame in your final gif. Suppose the object you want to focus on doesn't move around much, so you can just cut a specific section from each frame and that's it. There are two ways to do this.
Crop tool (Shift-C)Crop tool does basically what it says. You select a rectangle, then click inside it (or press Enter), then boom: every layer is cropped. You can resize the rectangle by dragging its sides and corners, or drag it around in order to frame things perfectly. One option that might be useful is "Fixed". You can add various constraints to the dimensions of the crop. If you want a square, select Fixed Aspect ratio and enter "1:1" into the nearby text field. You can switch layers after you selected a crop area, so make sure that you're cropping the right thing in each frame of the animation.
Rectangle Select tool (R)This tool is used for things other than cropping, so it's useful to get acquainted with it. The process of selecting a rectangle is similar to the crop tool. You can also set Fixed aspect ratio in pretty much the same way. To actually crop the area that you selected, go to Image > Crop to Selection.
By the way, if you have a selection, everything outside of it is usually protected from editing. To remove selection, go to Select > None, or press Ctrl-Shift-A.
Preview Animation and saveGo to Filters > Animation > Playback and make sure it "looks good, bb". Then go to File > Save As... and no, don't save as GIF. Save it as XCF (GIMP project). In fact, if you leave out the extension, GIMP will save it as XCF by default. It is a good idea to save intermediate steps to different files so that you can start over if you realize that you messed up at some point. Unless you're actually trying to get a GIF, never save as GIF, because it's a lossy format and you won't be able to recover everything if you load it later.
download xcfBut I want to save as GIF!Let's say you don't care about the dimensions, or size, or how long each frame should be shown. You just want a quick GIF. In order to do this, select File > Save a Copy. This time the filename should end with ".gif" or select GIF from the list of possible formats. You'll get a dialog with several choices. You obviously want "Save as Animation". As for that Indexed thing, this will be explained later. For now just select it. But wait, that's not all! There is another dialog.
Since we didn't specify the duration of each frame, this is the place where you enter it. There are approximately 24 frames per second. So each frame lasts approximately 40 milliseconds. If you removed every 2nd frame, the delay should be 80 milliseconds. But sometimes you want to slow the action down if it happens too fast in the original source. In that case just enter a bigger value. Press Save and you'll get a good quality, but rather large GIF.
my first gifSimple optimizationYou can dramatically reduce GIF size if you perform the following 2 operations first:
IndexingBy default, GIMP works with images in RGB mode. This means that an image can have up to about 17 million different colors. Most image formats (like JPEG, PNG) support that many colors. But GIF is different. GIF supports only at most 255 different colors per image (well, this is technically not exactly true, but for practical purposes...). An "Indexed" image in GIMP means that it has a fixed palette of several colors, just like GIF images. Many functions don't work with Indexed images, so you will usually convert to Indexed just before saving to GIF. Select Image > Mode > Indexed...
When you save an RGB image to GIF, GIMP automatically converts it to indexed with 255 colors. You can try 127 colors, for example, then play animation and see if it looks much worse. The less colors you have, the smaller the resulting GIF will be.
You can undo converting to indexed by pressing Ctrl-Z, and maybe try again with different number of colors.
Optimize for GIFThis filter uses various tricks with layers intended to minimize the size of the resulting GIF. Just select Filters > Animation > Optimize for GIF and you'll get a new window with modified image. You will notice the layers now have transparency in them. Also you will notice that they have "(100ms)" in their name. This means the filter has set the delay of each frame to 100ms. I don't really know why this happens, but if you don't want to manually change the delay for each frame, just check "Use delay entered above for all frames" when saving this GIF.
optimized gifYou can see that this gif is half the size of our first attempt. Still pretty big, but well... it's a big gif, not an avatar.
ResizeOK, now we want this avatar-sized. Make sure you aren't in Indexed mode and undo it if you are. Select Image > Scale Image and set width to 125. Since we cropped to a square image, the height should also be 125. Press 1 to set zoom level to 100%, and see if the frames look blurry. Usually it shouldn't be a problem, but let's say you want to bump the contrast a bit. Select the topmost frame. Select Filters > Enhance > Unsharp Mask
You can use my values or try to tweak them. Now, you basically have to apply it to every frame. Once you did the topmost frame, use PgDn to go down the list and press Ctrl-F to repeat the last used filter (that is, Unsharp Mask). You don't need to bother making each layer visible, this filter will happily modify your layers even if they are not visible. Just don't apply it twice on the same layer, that would be bad.
Do an animation preview and SAVE this file as (a different) XCF.
download xcfRemoving unneeded framesSo far in my example there's 22 frames. This is too much. There's no way they all fit under 30kb. Let's start reducing it by at least a factor of 2. Go through every layer starting from the bottom (by pressing Ctrl-PgUp) and observe which frames look similar enough that we won't miss them being deleted much. Mercilessly delete them (Ctrl-Delete). With just 10 frames we're in fact very close to success. In fact, converting to Indexed with 31 colors, optimizing for GIF and saving as GIF produces an image under 30kb:
xcfManual timingI saved the above avatar with 80ms delay for each frame. However, this isn't how it should be. Look carefully at your layer list:
The gaps in frame numbers give us a hint what delays should be. As was already mentioned, the delay between two consecutive frames is 40ms, so if there's a gap of one frame, it's 80ms and so on. Now, to actually set the delays. Rename each frame by adding "(80ms)" or "(40ms)" to the end of its name. The last frame... Since this is a non-looping gif, make it last. 500ms should be enough.
Test it with animation preview.
Save as XCF again. Convert to Indexed, optimize for GIF, save the result as GIF. This time make sure to uncheck "Use delay entered above for all frames"!
This looks... decent enough. Would probably look better with less frames and more colors, but the basic idea is there.
It
was a simple gif though. The background is static, and the area we cropped was also static relative to the video frame. We also didn't have to seamlessly loop it.
Killing artifactsIt is often possible to reduce gif's size by messing with an already optimized gif. Sometimes you can eke out a few bytes you need to keep it under 30kb. Or maybe even a lot. You never know. Let's start with the second frame from the bottom. There is some weird stuff to the right of Applejack when background is supposed to be static! Select Applejack with a rectangle tool, then Layer > Crop to selection.
Proceed with the other layers, but be careful - sometimes you can delete something important. Make sure to preview the animation so that everything still looks good. There isn't really much in this particular gif to cut out (aside from frame 2 and frame 4), but we still saved about 250 bytes.
to be continued...
by Scuderia Ferrarity (?) » Tue Jun 07, 2011 7:56 am
"Wish 
, but it took waaay longer than it should have.
. I had a couple of reasons for it, partially preference, partially because the background had flying particles (bird feed) in it, and partially because I got turned around on exactly what having a transparent background would mean for a gif. I knew about the transparency optimization that gifs use, but I somehow failed to make the connection that it wouldn't work if the backgound was itself transparent.
- Canadian Chapter 
.
