Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
When thinking of GIFs, the first thing that comes to mind likely isn't an awesome tool to enhance productivity and collaboration. In this tutorial, I'll shatter that notion and show you how to create tiny, seconds long, screencasts in GIF format which might just change the way you work.
Popularized in the mid-1990s, animated GIFs quickly became emblematic of the early internet. The format allows for a number of frames to be displayed in succession, creating a small movie. While their popularity took a nosedive as the web matured, recently, the format has experienced a renaissance of sorts across many internet communities.
The average animated GIF is short, just kilobytes in size, and viewable almost anywhere. Compare that to the behemoth that is nearly every video format and it's easy to see the appeal of the humble GIF.
With those advantages and more, many people are using GIFs to create the micro-screencasts I mentioned earlier. The beauty of these screencasts is that they help to demonstrate a single concept more clearly than a bunch of screenshots ever could. These micro-screencasts can be a powerful collaboration tool for designers, developers, and instructors of every sort.
Recording the Screencast
Our first order of business will be to create the screencast, itself. While this could absolutely be accomplished with a more powerful application like ScreenFlow, for these micro-screencasts, QuickTime's built-in screen recording functionality will serve our purposes beautifully.
First, open up QuickTime Player. Next, navigate to File and choose New Screen Recording. By clicking the downward carat to the right of the record button, you'll see a list of advanced settings.
The final GIF won't contain sound, so you might as well select None as your microphone. In this advanced settings dialog, there's also an option to Show Mouse Clicks in Recording. This will highlight any mouse clicks in your recording. I personally think it makes for a great addition to most micro-screencasts, but feel free to try it out and decide for yourself.
Now that you've finished setting up your recording, pressing the Record button will give you two final options.
- You can choose to either record the entire screen by clicking anywhere on the screen, or
- to record a predefined region of the screen by dragging your mouse, just like you would to select files on the Desktop.
Again, while this is a matter of personal preference, I tend to only record a predefined region for these micro-screencasts.
With the recording in progress, make sure to keep it short, sweet, and to the point. The GIF screencast that I'll show you how to make in the following steps works best if you don't exceed four or five seconds in length.
Once finished, press the Stop button in your menu bar. As I said, every second counts, so it's a good idea to trim the last second or so, when you were clicking the Stop button off, of the end of your screencast. To accomplish this in QuickTime, go to Edit in the menu bar, and select Trim.
This very basic editor works in much the same way as is does on the iPhone: drag the handles until your screencast has reached the perfect length and press Trim. If you need more granular control over your trimming, enlarging the size of the QuickTime window will provide just that.
Now that you've created your screencast, save it by going to File, in the menu bar, and choosing Save.
Converting the Screencast to GIF Format
Now that you've got the basic recording taken care of, it's time to convert it to an animated GIF. The best way to accomplish this is by using a small, but powerful utility from the Mac App Store called GIF Brewery.
Once installed, open GIF Brewery. You'll now be asked to open a file. Choose the screencast that you just created in QuickTime and click Open.
In the main editing interface, you'll be inundated with options that let you tweak just about every aspect of the GIF. Luckily, much of this is just replicating the functionality provided in QuickTime, including options to to crop and trim your video. While you don't have to worry about those, if you recorded the full screen, it's a good idea to consider resizing the GIF.
While the app is technically capable of creating GIFs at desktop-sized resolutions, it likely won't be pretty. To do this, navigate to the menu bar, choose GIF and then Simple Resize…. While good rule of thumb for resizing is to drag the slider to about 50%, it's never a bad idea to simply play around until you find what works best.
Choosing the Proper Export Settings
Once the screencast is at the desired size, you can begin the dirty work of adjusting the export settings for the final GIF file. This is a notoriously finicky process so some tolerance for trial-and-error will be required.
To begin, choose GIF Properties in the app's toolbar. While it's possible to manually set the Frame Count and Frame Delay, I recommend letting GIF Brewery do that for you by checking the box labelled Automatically Calculate Count & Delay.
Once checked, choose the number of Frames per Second (FPS). Remember, this is a GIF, not a Hollywood blockbuster, so a meager 10 FPS should work just fine. If that's too choppy for you, try moving to something in the 15-20 FPS range. To preview the GIF in its final quality, press Create GIF in the app's toolbar.
If you're unhappy with the finished product, press Discard and keep fiddling. If, on the other hand, you've found a nice balance between FPS, file size, and GIF quality, press Save… and choose a destination for the GIF!
Sharing the GIF
Fortunately, as I mentioned earlier, there's no shortage of platforms that support animated GIFs. While Tumblr, Dribbble, and Dropbox are safe bets, don't be afraid to think outside the box to find other homes for your GIFs.
For example, you can actually share animated GIFs through iMessage on the Mac. Just open up Messages and choose a recipient. Then, drag the GIF file to the text field and press Send.
As you can no-doubt tell from creating and sharing a GIF, the process to create these micro-screencasts is filled with trial-and-error. The old adage that practice makes perfect really rings true here.
As you begin to share your creations with coworkers, friends, and family, keep experimenting to create the perfect micro-screencasts that will help you become more collaborative and productive than ever.