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.
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
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
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"
.