When I write a how-to guide for something, I often find it useful to include a few animated GIFs in order to illustrate what I'm talking about. Static images are fine for simple cases ("the edit button moved here in v2.0"), but they can't really show sequences of actions ("you need to click on this thing and drag it over this other thing") with the same clarity that a video can.

A few people have asked me how I record these GIFs, so I've put this together as a quick guide for anyone who might be interested. The actual recording-your-desktop part is mainly aimed at GNU/Linux users, but the video-to-GIF sections should hopefully work on Windows and MacOS as well.

Part A: Recording a video

Update: As of 2022, GTK RecordMyDesktop is no longer available in Debian Testing/Unstable. I'd suggest using SimpleScreenRecorder instead.

Install GTK RecordMyDesktop. This is a (pretty simple) GUI front-end for RecordMyDesktop, and - in my experience - usually Just Works™ without any mucking about.

The whole screen is included by default, but you can use Select Window (or click-and-drag on the preview area) to select a specific region before you start recording.

You should probably check the Advanced Settings menu before pressing Record; some quick points:

On the Files tab, make sure that you set the Working Directory to somewhere with plenty of space; I use /tmp, but it really depends on how your drives/partitions are set up.
You can include (or hide) the mouse pointer in the video output by changing the Mouse Cursor drop-down under the Misc tab.

The video will end up in your home directory, and will be named out.ogv (or out-1.ogv, if out.ogv already exists). If it looks strange, play around with the options in the Advanced Settings > Performance tab and try again.

A note about sound

You probably don't care about audio if you're simply trying to create a GIF, but just in case you do:

Make sure that you tick the checkbox next to the Sound Quality label - the video will be silent if you don't.
Under Advanced > Sound, make sure that you have Device set to default (in lower-case, or it won't work).
In the PulseAudio Volume Control, go to the Input Devices tab, and ensure that Monitor of Built-in Audio Analog Stereo (or similar) is selected. You might need to change the Show: drop-down to All Input Devices in order to get this to appear.

If all goes well, your videos should now include the audio played through your speakers whilst recording.

Part B: Converting the video into a GIF

There are two ways to do this: Directly, via FFMPEG, or indirectly via SMPlayer and GIMP.

Option #1: Using FFMPEG

Ensure that you have FFMPEG installed, and type the following into a terminal window:

ffmpeg -i out.ogv something.gif

This uses out.ogv as the "input" file, and saves the result as something.gif. That's all^† there is to it!

† If you know the right incantations, you can tell FFMPEG to tweak the output so that the last 10 seconds are chopped off, or the image is upside-down, or various other things. It would take too long to cover the various options in detail here, but there's plenty of documentation online if you want to do something like this.

Option #2: Using SMPlayer and GIMP

This is a bit more circuitous, but is useful if you don't have access to FFMPEG (and is arguably easier for anyone who wants to adjust the output without being a Command Line Wizard).

First, use SMPlayer to convert the video into a series of JPEGs or PNGs

First, make sure that you have SMPlayer installed.
Use it to open out.ogv (or whatever it's called).
Whilst the video is playing, you can start/stop taking screenshots continuously by pressing Shift+D (or by selecting Start/stop taking screen-shots under Video in the menu bar).

Sometimes SMPlayer will crash with an error when you try to take a screen-shot. There are a few things that might cause this:

Make sure that the ~/Pictures/smplayer_screenshots/ directory exists first - create it yourself, if need be.
Try changing Format from png to jpg in Preferences.
Try changing Output driver in Preferences > General > Video (I usually have it to to xv).
If all else fails, try using mplayer or mplayer2 instead of mpv (you may need to actually install one of those beforehand).

You should now have a series of images called something like image01.jpg, image02.jpg, image03.jpg (and so on) in your ~/Pictures/smplayer_screenshots/ folder; the exact file names used will depend on what your SMPlayer settings are.

PROTIP: The GTK-RecordMyDesktop Please wait while your recording is being encoded window tends to appear just before it actually stops recording, so you might want to delete the last couple of images from the end of the video in order to avoid including it in your GIF.

Next, use GIMP to convert the series of images into a single animated GIF

Install the GIMP.
Start it up, and select File > Open as Layers...
Navigate to the ~/Pictures/smplayer_screenshots/ folder.
Press Ctrl+A to select everything, and then press Return (or click Open)

At this point, you might want to play around with the imported images - resizing the canvas, or changing the contrast, maybe - but this is purely optional.

Select File > Export As...
Enter a file name, such as output.gif
When prompted, make sure As animation is ticked.

You should probably leave Loop forever ticked, but perhaps adjust the Delay between frames to make the animation speed faster or slower, as needed.

Part C: Reducing the size of the GIF file

One way or another, you should now have a GIF file. Hooray! That means you're done, right?

Almost. There's just one other thing: The GIF you have might be rather large - as in several megabytes - which might be over the maximum upload limit on some websites. Even if it isn't, it might load slowly, or (on phones) use up an unnecessarily large chunk of someone's data allowance during transfer. So the last step is to try and optimise it.

To do this, you'll need to install GIFsicle. David Walsh has written about it here, but the tl;dr version is:

gifsicle -O3 original.gif -o optimised.gif

This will take your original.gif, and create a super-optimised copy of it called optimised.gif. In some cases, this might be around the same size as the original file - but some images will end up being much, much smaller!

The end!

🐱