Show, don't tell, as an animated GIF

Images are a powerful communication tool
2020-04-02

Screencasting is the idea of recording your screen. It can be saved as a video or as an animated image. It can be useful to explain things that are hard to communicate with words.

A good example is my project panicparse, which has a very trivial animation that made wonders to explain what the project is about.

GitHub doesn’t support embedded videos, nor WebM, nor SVG in their markdown, so this post focuses on the lowest common denominator for now: good old animated GIFs.

Recording

For recording, I used LICEcap on macOS and WebMcam on Windows. LICEcap has the disadvantage of recording directly into a GIF, where WebMcam saves individual frames as PNGs so a more optimal palette can be created at the very end of the editing process. You can also just take screenshots yourself with the OS’s screenshot tool or shortcuts:

Compressibility

The GIF format is very old and not very efficient at compression. Since it’s limited to 256 colors, here’s a few tricks to improve the file size:

Editing

I do the post-editing with GIMP. There are many tutorials on the net. In short, name the image layers “foo (1000 ms)” where the “1000ms” value in the layer label is the duration this frame should be shown.

Screencasting example.
An example based on the classic cowsay.

Enjoy!