Blog

Thoughts from my daily grind

Animated GIF screencasts in macOS

Posted by Ziyan Junaideen |Published: 01 October 2022 |Category: macOS
Default Upload |

GIF, or Graphics Interchange Format, is a popular image format dating back to 1997. It was originally intended to reduce the file size of images and short animations. This coupled with its wide support, GIFs make perfect sense to visually share bugs, and UI/UX updates with others.

This article assumes you are in macOS. If you are in Linux, you can use Peek. Peek is a FOSS in which you can directly record GIFs. In the case of Windows, keep it open for the fresh air to come in 🫣.

Prerequisites

You are going to need two pieces of software.

  • QuickTime Player
  • FFmpeg

QuickTime Player, in addition to being able to play audio video, has the ability to record audio, and do screen captures. This comes pre-installed with macOS.

FFmpeg is a FOSS command line application for manipulating audio video files. Most developers would already have this installed. If not, installation is simple if you already have a Homebrew setup.

brew install ffmpeg

You can run ffmpeg -version to make sure it works.

ffmpeg version 5.1 Copyright (c) 2000-2022 the FFmpeg developers
built with Apple clang version 13.1.6 (clang-1316.0.21.2.5)
configuration: --prefix=/usr/local/Cellar/ffmpeg/5.1 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librist --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvmaf --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-videotoolbox
libavutil      57. 28.100 / 57. 28.100
libavcodec     59. 37.100 / 59. 37.100
libavformat    59. 27.100 / 59. 27.100
libavdevice    59.  7.100 / 59.  7.100
libavfilter     8. 44.100 /  8. 44.100
libswscale      6.  7.100 /  6.  7.100
libswresample   4.  7.100 /  4.  7.100
libpostproc    56.  6.100 / 56.  6.100

Procedure

The procedure is simple. We would record a screencast using QuickTime Player and then convert that recording to a GIF.

Step 1: Make a recording

  • Open Quick Time
    Use ⌘ <Space> to open Spotlight Search and search
  • Cancel the "Open File" dialogue box
  • Select File > New Screen Recording from the app menu
  • Either select "Record Entire Screen" or "Record Selected Portion" and record.

I generally choose the "Record Selected Portion" as the whole screen is too big, and takes away the attention from the subject I want to highlight. Then start a recording.

Step 2: Covert the video file to GIF

I assume that you have the input file renamed as input.mov and intend to name the output file as output.gif in the current working directory.

  • Open the Terminal app or iTerm
  • Change the directory to the folder where your screen recording is (ex cd ~/Desktop)
  • Run a variant of the following command modified to suit your needs
ffmpeg -i input.mov -filter_complex "fps=5" -pix_fmt rgb24 output.gif

There you go, you have your self a GIF in the current folder with the name output.gif.

About the Author

Ziyan Junaideen -

Ziyan is an expert Ruby on Rails web developer with 8 years of experience specializing in SaaS applications. He spends his free time he writes blogs, drawing on his iPad, shoots photos.

Comments