Skip to content

Instantly share code, notes, and snippets.

@hanbzu

hanbzu/ui_demoing_with_animated_gif.md

Last active February 1, 2018 15:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hanbzu/4571f87623b6f868cbdb24a570c6c967 to your computer and use it in GitHub Desktop.
Save hanbzu/4571f87623b6f868cbdb24a570c6c967 to your computer and use it in GitHub Desktop.
Download ZIP
UI demoing with animated GIFs
Raw
ui_demoing_with_animated_gif.md

This walkthrough explains how to prepare animated GIF images of UI interactions for the purpose of demoing. I'm assuming a MacOS setup but this could also be useful for other setups.

Note: If your GIFs will be just a few seconds long you can use a MacOS app called GIPHY capture.

Tooling

We'll be using Quicktime Player for video recording, ffmpeg for video conversion and gifsicle to generate the animated GIFs. Let's first install the tooling:

brew install ffmpeg
brew cask install xquartz # A gifsicle dependency
brew install gifsicle

Recording

Launch Quicktime Player and go to File > New Screen Recording, then we'll expand the menu near the record button and select Microphone > None and Options > Show Mouse Clicks in Recording. Now click record.

I'd advise you to select a screen portion instead of the whole screen to reduce video size and not overload Quicktime, which is not the most efficient recorder.

Finally save the video in a file called in.mov

Conversion

Run the following command

ffmpeg -i in.mov -vf "scale=800:-2" -pix_fmt rgb24 -r 10 -f gif - | gifsicle --colors=256 --dither --optimize=3 --delay=3 > out.gif

and you're set!

P.S.: To change output image size change "scale=800:-2" to anything, like "scale=640:-2".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment