Gimpongif
Guide to using Gimp to caption GIFs
Guide to captioning GIFs with GIMP
GIFs seem almost impossible to caption. Looking around Google results in no or few programs purposely built to caption GIFs. This tutorial will show you the process of captioning a GIF utilizing GIMP and OpenShot, both free programs and entirely done with Ubuntu, a free operating system.
Pre-requisites:
http://chiselapp.com/user/saulgoode/repository/script-fu/wiki?name=sg-combine-bg
First off, download the script. Put simply, it makes gimp take a layer at the bottom, and either overlays it on top of every other layer, or places it behind every other layer.
Once it has downloaded, place the script in the above folder. If you can't see the .gimp-2.8 folder, press 'Ctrl + H' to reveal hidden files.
Let's start off with a simple video. The source of all GIFs. Teach a man to fish and he'll eat forever. For this tutorial, images will be displayed with their accompanying description below.
After opening openshot, we'll be importing the video file into the project by selecting the large green 'plus' button at the top. After it apears in the project files list, simply click and drag it down to the timeline at the bottom of the screen.
Now we have to select the part of the video to convert into a GIF. Try to select no more than 20 seconds. You'll see soon that good GIFs can really jump in size, and you can save yourself a big headache if you plan from the start to end up with a GIF of an acceptable size.
But when you find the start and end point of your future GIF, use the sissor tool and click on the start and end point to 'cut' the video. Then right click the unnecessary parts of the video and select 'remove clip'. Finish by dragging your GIF video to the beginning.
Now we need to collect some info before we continue. Due to a bug which we aren't sure when it will be fixed (https://bugs.launchpad.net/openshot/+bug/1084692) you'll have to manually setup a profile for your video, so that OpenShot will export it in the right resolution. So right click on your video and select properties. Once at properties go to the Audio/Video tab. Here we can see that we need our export settings to be 1280 x720 for resolution, and 24 frames per second.
In OpenShot, go to preferences, then the profiles tab. Click on Manage Profiles.
Here we are going to create a profile purpose built for this tutorial. Click on the profiles dropdown and select HD 1080p 60fps. Then click the green 'plus' button to use the profile as a template.
Setup the profile using the information we checked on video resolution and frame rate, like so. Then save the profile.
Now it's time to export. Press 'Ctrl + E' or go to File>Export Video. Select a folder where you want your images to go into, remember we're exporting images so if you don't want 500 images cluttering your desktop be sure to select a new empty folder. Click the advanced tab then under Advanced Options select Image Sequence. OpenShot for now only exports to png. Then under 'Profile' select the profile we just recently created. When you are all done, just click export video and we are done with OpenShot!
Now open GIMP. File>Open as Layers. You can do this with either an image sequence or a pre-existing GIF. GIMP will open up all the images in a layers which you'll see on the right side of the program.
Remember that thing about GIFs taking up a lot of space. Your first step here is to crop out the black edges that got exported with the video. Simply use the rectangle selection tool to select the part of the video you want to keep, then click on Image>Crop to Selection. This will result in all images in the GIF being smaller resolution which translates into a smaller file size for you.
Your next step, and a very important one, is to ensure proper layer order. GIMP produces GIFs starting with the layer at the bottom and working up. So the bottom layer starts the GIF, and the topmost layer ends it. With OpenShot, the layers are imported with the end frame at the top, so you can easily fix this by going to Layer>Stack>Reverse Layer Order
Now it's time to add a caption! Go to Image>Canvas Size. I usually add a few hundred pixels to either the height or width, to give me plenty of room to work with my words. Offset determines where the original image will be in the new canvas, in this case at the top left corner. Be sure resize 'All Layers' is selected then click resize.
Now, having sharply contrasting colors makes for a bad viewing experience. So use your eyedropper tool to select the most used color, in this case a grayish hue.
Now it's time to make the caption layer. Either 'Ctrl+Shif+N', Layers>New Layer, or press the green 'plus' button underneath the layer list. You'll see the window above. Name it caption, and select the fill type as 'Foreground color'.
Look for the caption layer on your layer list. If it's not at the top go to Layer>Stack>Layer to Top.
Now with the caption layer selected on the layer list, use the rectangle tool to select the area of the original image and press delete. This will result in a layer made up entirely of a grey rectangle, covering up the large white rectangle of all the layers underneath.
Time to put words to the image. Click the word tool, and type out your caption. Be sure to make it's color contrast against the grey background.
If you don't end up using all the space you setup, be sure to re-crop so that the images is just large enough to contain the caption.
After you've finished with your caption, right click on the word layer and merge it down into the caption layer.
Now that the caption layer and words are one, select it then go to Layer>Stack>Layer to bottom to move it to the botom of the layer list. This is because the script we will be using take the bottommost layer for it's work.
It's time now to prepare the final images which will be stitched together into a GIF. Go to Filters>Animation>Overlay background, and watch the magic happen.
Make sure before you export the GIF to delete the bottommost caption layer. We don't need it included in the final GIF, taking up space.
Finally, time to make the gif. Go to File>Export As. Go to where you want the exported GIF to be placed, and type the name as: "gifname.gif". This will simply tell GIMP that the exported file is a gif, instead of having to use the large dropdown box to find the GIF format. When you click export, another window will come up. This establishes the soul of the GIF, and each setting is important for what you want your final GIF to be like. First off is the interlace option. I don't usually use this as internet speeds are usually tollerable in this day and age. But having it selected will allow your GIF to load in low quality before shifting to a higher quality, much like a jpg file. Gif comment simply adds a short comment in the file's metadata. BE SURE TO HAVE 'As Animation' SELECTED BECAUSE OTHERWISE YOU'LL GET A STILL IMAGE. Loop forever determines if the GIF plays once or repeats when it hits the last frame. Now for the 'Delay between frames where unspecified'. This is dependent on how fast you want your gif to go. Remember when I had you lookup the framerate of the video. Pull out your calculator and to a simple calculation 1000/framerate. In this case 41.6666 milliseconds for 24fps. Do not set this to below 21. The reason is that firefox and chrome will automatically bump this number up to 100 if it is set too low, as when the first GIFs were created they didn't have this settings delay because the browsers delayed it for them. Bumping it up to 100 is the browsers way of handling really old webpages, and most browsers will handle GIFs as low as 20milliseconds between frames. In this case we need a slower framerate so we'll use 41. Click export and after some chugging, GIMP will spit out a GIF.
Be sure to test out your GIF on a browser before you publish it. Simply use your browser to open the GIF through File>Open File. This ensures that your GIF is working properly, and looks right. As a final note, consider using a GIF conversion service such as gfycat.com or mediacru.sh. These services convert the GIF to a video which takes up a lot less bandwith and size than a GIF, and therefore makes the web better for everybody.