How to create a Screencast GIF

Capture a Screencast Movie

MacOS since 10.14 (Mojave) has an App called Screenshot. You can start it like any other App but the usual way is to use the keyboard shortcuts

Keyboard Shortcut: shift-command-5
[Keyboard Shortcut: shift-command-5]

This will bring a Toolbar and a selection box to define the part of the screen which needs to be captured.

MacOS Screenshot App
[MacOS Screenshot App]
  1. move and resize the selection box
  2. click the record video button on the toolbar
  3. start with the recording

If you own a MacBook with a touchbar, you might find it handy to use it to control the recording.

Screenrecording finished
[Screenrecording finished]

Now klick on the small dumbnail preview of the recording to open the screenshot editor.

Screenrecording Video Preview App
[Screenrecording Video Preview App]

You can preview and check you recording. If you need to trim the video, click on the symbol on the top.

Screenrecording Video Preview App
[Screenrecording Video Preview App]

Finish your changes with a click on "Finish" and your recordings will be saved on the place you defined for your screenshots. The default place is the desktop but with dropbox installed in can also be inside your dropbox.

Converting Movie to animated GIF

ffmpeq / command line

requirements:

  • ffmpeg

you can install ffmpeg with brew install ffmpeg (brew installer if you have not used before)

conversion:

  1. Create a palette image from the video:
1ffmpeg -y -i in.mov -vf fps=10,palettegen palette.png
  1. Convert into a GIF using the palette
1ffmpeg -i in.mov -i palette.png -filter_complex "fps=10,paletteuse" out.gif
  1. The result
Video converted to animated GIF (out.gif)
[Video converted to animated GIF (out.gif)]

Gifski / MacOS App

If you prefer to use an App, I would recommend the free Gifski App from the Apple AppStore.

Gifski MacOS App
[Gifski MacOS App]

But do not expect the same small file size you get from the setup with ffmpeg which does some special magic when reducing the color palette without dithering.

Write a response on Medium