Creating gifs of screen captures on a Mac

Kap is an awesome tool for creating screen capture gifs. It captures a video of your screen and you can set the dimensions and frame-rate and export it a gif. This works great for a steady-paced process.

However, when you have a process that involves a long wait, Kap will capture many frames of you just waiting. You want to cut this out. If you have Photoshop, you can remove these frames from the gif. However, if you don’t have Photoshop, what do you do?

You could use imagemagick to convert the gif into individual frames, delete the ones you don’t want and convert it back to an animated gif. You can do this with the following steps:

Step 1: Convert animated gif into individual pngs

convert -coalesce source.gif target_%05d.png

A gif may be optimized such that a frame just contains delta from the previous frame. When you want to remove individual frames, working with these deltas is not good. You want to work with the whole image. The -coalesce option constructs the whole image for each frame.

Step 2: Remove all the pngs you don’t want

This is just a manual process of you removing the files using Finder or some other mechanism.

Step 3: Stitch the remaining frames back into an animated gif

convert -delay 200 target_*.png updated.gif

The -delay option just specifies how long (how many ticks) should each frame be shown, 100 ticks = 1 second.

Step 4: Resize if desired

convert updated.gif -resize <new-size> updated_resized.gif

The format for entering <new-size> is something like this: 782x440.

Step 5: Optimize if desired

Each frame within the animated gif contains the whole image. You can have frames contain just the deltas to reduce the file size of the gif. You can do this like this:

convert updated_resized.gif -layers optimize updated_resized_optimized.gif

General note:

You do not need to do these as individual steps. You can actually combine steps 4 and 5 for example, by using the -resize and -layers option together in the same command.

Protip:

An alternative way to make the gif is to start at Step 3 — by taking a bunch of screenshots and stitching them into an animated gif. This is especially good if you would have to remove a lot of frames out of a screen capture (for e.g. if there’d be a lot of waiting in your screen capture)