Animated Gif Tutorials

Gif vs Jif

by:GisilulubellCC BY-SA 3.0

You may hear gif pronounced a couple different ways (although the creator tells us the secret), but the bottom line is that it can really be a fantastic tool to create multimedia tutorials or add some flair to your docs, blogs, sites, and more.

The beauty of this file format is that they act as photo files so you can basically add a video without sound into something when that tool only allows the embedding of photos

How I use the tool: I make a screencast that is highlighting a step for a tutorial then embed it in a Google Doc that I am sharing with other teachers or at a conference.

I'm going to cover two different tools that you can use to create a .gif file:

• LICEcap (for Windows & Mac)
• TechSmith Snagit extension (Chromebooks, Windows, & Mac)

You can see in my first blog post here, that I used the .gif file to show the trick of the Contra Code, but you wouldn't have been able to see that unless you did it on your own, or if I recorded a video, uploaded it, then linked or embedded it in the post. But that would be silly for a 10 second video. LICEcap and Snagit allow for easier screencasts for short snippets of videos.

Here's an example of a tutorial that I created using animated .gifs in the section (all with LICEcap).

LICECap

After downloading LICEcap for Windows or Mac OSx, you can start creating .gif files quickly. When you open the program, you'll notice a window that seems to be overlaid over any windows on your screen

From this overlay, you can resize to capture a small window or section of the screen, or you can keep it full screen. When you change the size, your .gif will be the size of the window you created. 

You'll notice in the lower right hand corner the Record button. Hit that to bring up the options for creating your .gif. 

Once you select save, your screen starts recording.  You may pause your screen recording by pressing pause in the lower right, or with the keyboard shortcut: CTRL+ALT+P. You will need to select stop in the lower right hand corner to stop your recording. Once you select stop, your .gif is saved to whatever location you chose.

Now you can embed the .gif in a Google Doc, Slide, Form, or blog or site.  

TechSmith Snagit (App and Extension)

You need to have both the App and Extension installed in your Chrome browser in order to create a .gif.  Also, with the Snagit Extension, you can only turn a screencast into a .gif if it is shorter than 20 seconds.  

To Get Started, select the Snagit Extension > Then select Desktop under the video camera

After you select desktop, Snagit will ask what screen would you like to record. Here you can choose an open window/tab or the whole screen. 

Once you select share, it will start recording your video. Remember, if you want a .gif, keep it to less than 20 seconds. Then select Stop sharing on the bottom of your screen. 

After you stop sharing, you will get a pop-up window from TechSmith that gives you some options as well as a link back to your library of all of your screen captures and screencasts.  

Now remember, since Snagit is a Drive App, it integrates with your drive and creates a folder for you that houses all of your files. 

The Verdict:

I didn't really plan on comparing the two, but I realize that it would be beneficial to you.  

LICECap:

• Pros: Very simple, less clicking, no real time limit to screencast, resizable, ability to add a title slide to your .gif, ability to not loop.
• Cons: Platform specific to Windows & Mac, 

TechSmith Snagit:

• Pros: Works with Chromebooks, integrates with Drive, automatically a screen-recording with audio, works within Chrome (no extra software needed)
• Cons: Time limit to create .gifs, a