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

To turn back the default setting:

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.

7. Going beyond GIFs with custom Javascript animation code

Small GIFs are suitable for most of the UI screen recording purposes. However, if you want to create even more perfect results there is a way: a custom Javascript, PNG and JSON driven animation as demonstrated by the author Sublime Text 2, Jon Skinner.

 

 Subscribe to RSS feed Follow me on Twitter Follow me on Facebook Follow me Google+