Tuesday, July 09, 2013

How I Make Software Demos using Animated GIFs

Inline image 2

Animated GIFs, like the ones you see here, here and here, are easy to produce and can be used for short software demos, help videos and everything else that doesn't require audio narration. Here are some reasons why an animated GIF may be a better alternative to screencast videos:

People love sharing animated GIFs on social sites, especially Tumblr and Google Plus. Facebook doesn't support animated GIFs yet but that could change.
Animated GIFs render inside any browser without requiring plugins and, best of all, you may embed the GIF images in your email newsletters as well.
Now that Google Image Search supports GIFs, your image-only screencasts have a better chance of getting discovered. Remember to use proper Alt and Title tags with the images.
Bret Victor's excellent writeup on Learnable Programming includes several micro-videos that explain the concepts of programming. Bret has used HTML5 (MP4) videos but such short video demos are also a perfect candidate for GIF animations.

Screencasting with Animated GIF Images
I have previously written a guide on creating GIF screencasts using a free tool called Screencast-o-Matic but there are a few downsides with that approach – one, you need Java on your machine to record the screencast video and second, the GIFs carry a watermark (or you upgrade to the paid version).

There are other alternatives though.

The GIF screencasts that you have seen on Digital Inspiration are mostly produced with Camtasia Studio. When you are done recording your screen with Camtasia, press Ctrl+P to open the Production Wizard, choose Custom Production Settings from the drop-down and then select GIF for the file format.

QR: Inline image 1