How I Make Software Demos using Animated GIFs

Animated GIFs, like the ones you see below :

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 tag swith 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.

                 Produce animated GIF screencasts with Camtasia Studio

GIF files can become large and it is therefore important that you choose the most optimized encoding options. Set Colors as “Automatic” or choose a lower value for lower file size. The Dithered Color Reduction should be selected only when you are producing GIFs from videos but not for regular screen recordings.

If you are not using Camtasia, LineCAP is a good option – it is a free and light-weight utility available for both Mac and Windows.

With LineCAP, you can record your screen as well as save the recording as an animated GIF in a single step. Launch the program and adjust the frame such that it entirely encloses the scene. Hit the “Record” button, choose a name for your GIF file and start the demo. You may also move the capture frame during the recording. LineCAP produces good quality GIF screencasts and animations are smooth though the files are often large in size.

The other choice would be that you record a screencast video, use any of thesescreencasting tools, and then use a GIF encode to convert the video file into a GIF. Instagiffer and QGifer are easy-to-use tools for making GIFs from video.

                             Make Animated GIFs from Screencast Videos

Instagiffer is Windows-only and more popular while QGifer is open-source and available for Mac, Windows and Linux. If you are planning to make a short video demo or screencast that is not more than 10-20 seconds long, consider producing an animated GIF image.