Creating gifs from the OSX terminal in 2 easy steps

development, ux 1 Minute

I like sharing quick demos to all the stakeholders as soon as I start developing something new. I find that sharing soon helps to get early feedback and make sure that everyone’s requirements are covered.

But sometimes it is hard to find out the proper format to share. If I share only an image, then all the interaction is lost. Or if I share a video, then depending on the format some users might not be able to open it (and is also usually big in size).

After trying a few different formats I found that gifs are the best way of sharing quick demos. I follow a 2 step approach to it:

  1. I record the screen using Quick Time.
  2. I convert this CLI I found online called screengif.

Here is an example of the outcome:

gif example

Installing screengif

As the readme states, installing with brew is super easy:

# x-quartz is a dependency for gifsicle, no longer installed starting on 10.8
brew cask install xquartz
brew install ffmpeg imagemagick@6 gifsicle pkg-config
sudo gem install screengif

After installing, you can convert a video to a gif using the following command:

screengif --input [file.mov] --output [file.gif]

How does screengif work?

This package wraps a couple of libraries that do the following:
1. Exports video frames into images (ffmpeg package).
2. Takes those images and creates a gif out of it (gifsicle package).

So, you could achieve the same outcome by installing these packages independently:

brew install ffmpeg
brew cask install xquartz
brew install gifsicle

And finally create the gif with the following command:

ffmpeg -i [file.mov] -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > [file.gif]

Check ffmpeg and gifsicle documentation for more information on what parameters are supported.

First seen in this gist

Enjoy!!

Published