Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How to Create Micro-Screencasts With GIF Brewery

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

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.

Why GIFs

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.

Screencast

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.

You can either record your full screen or a single, specified region.

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. 

  1. You can choose to either record the entire screen by clicking anywhere on the screen, or 
  2. 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.

QuickTime includes a simple editor that will let you trim your screencast.

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

Frame Count and Frame Delay can be set either manually or automatically within GIF Brewery.

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

You can share screencasts using Messages.

Fortunately, as I mentioned earlier, there's no shortage of platforms that support animated GIFs. While TumblrDribbble, 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.

Go Further

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.

Advertisement