Animated GIF images are a good method for demonstrating your application, library or framework UI functionality and features: as one picture tells more than thousand words, one animation tells more than your average megapolis telephone directory.
(The example screen capture courtesy of jQuery Interdependencies)
The benefits of animated GIFs
- You can embed them almost anywhere and they just work (even on Github README)
- Autoplay! When your clip is 1-3 seconds you really don’t want to put it behind play button.
- Animated GIFs compress OK’ish on graphical content where there are big plain color areas
- Animated GIFs work well on lower frate rates
Here are short instructions how to create animated GIF screen recordings on OSX.
1. Record video using QuickTime Player
Screencast videos can be recorded with OSX’s own QuickTime player – no additional applications needed (since OSX Lion?). QuickTime player works scaring well. Just choose File > New Screen Recording and choose the area which you want to record
2. Converting the screen capture video to animated GIF
The resulting h264 MPEG5 as .mov file needs to be post-processed to animated GIF. I found GIFBrewery (~5 USD) suitable for this purpose. You could do it by hand with free software, but GIFBrewery provides nice “tune settings and see live preview” style functionality which saves a lot of your valuable time.
Note: I had a bug in GIFBrewery where the animation colors got screwed up if I tried to to move starting frame (probably related to h264 key framing?).
3. Crop and shrink the capture area
Try to make the target area as small as possible. Resize your browser window, zoom out fonts, use lower resolution and such tricks.
You can do further cropping in GIFBrewery.
4. Use low FPS
Set animated GIF frames per second to low number like 3 -5 frames per second. FPS is not usually critical factor for screen recordings where your purpose is to demostrate the UI element interaction.
5. Turn off font subpixel antialiasing
OSX may do font subpixel antialiasing by default (some more info). You might want to turn off this for screen recordings, as subpixel antialiasing is tied to (your own) monitor and may create funny looking color artifacts on other displays when your recording is being viewed.
To turn it off in Terminal:
defaults -currentHost write -globalDomain AppleFontSmoothing -int 2
defaults -currentHost delete -globalDomain AppleFontSmoothing
You need to restart the applications after changing this setting. The easiest way to test the setting on Finder is:
killall Finder # Will autorestart
6. Optimize the GIF
ImageOptim is an OSX application which will optimize all dragged and dropped images in place. For me, it provided 33% saving in the GIF size for GIFBrewery exported files.