Animated GIF screencasts in macOS
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 asoutput.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.