I still have the chat logs from my endless hours spent on AOL Instant Messenger back in high school (2000 – 2004). I rediscovered them recently and spent about ten minutes reading before I couldn’t go on any further. Every other word made me cringe.

There’s a very specific reason why I was cringing: I remembered exactly what I was thinking as I had those conversations, but that is not at all how it came across as I looked back at things. I thought I was properly communicating my thoughts, but everything was actually coming out all wrong. I wasn’t being witty, I was just being a jerk.

I’ve become slightly better with words since then (I hope!) but there’s only so far that text chats can get you. When you’re trying to explain something to someone, there are times when words aren’t enough. You need to show them.

But when you’re not sitting right next to that person, showing can be difficult. There are a few different ways to solve this problem. Chris Ducker, of Virtual Freedom, crafted what he calls the VA Training Trifecta, in which an entrepreneur can either text, audio, video, or some combination therein to communicate tasks with virtual staff.

But there’s another powerful tool that I use nearly everyday to quickly show people exactly what I’m talking about.

I’m talking about GIFs.

A GIF is the perfect communication tool for describing small bits of dynamic information, like how a button animation should work or the way something is working on your computer. You can guarantee that whoever you’re talking to can see exactly what you’re seeing, and it’s much easier to show rather than trying to describe the problem with words or going through the hassle of creating a huge screencast.

If a picture is worth 1,000 words, a GIF is worth over 9,000!

I’ve perfected a system that lets me make GIFs on my Mac in about 30 seconds. I’m going to show you exactly how I do it.

Tools

Quicktime (free, included with OS X)
GIF Brewery ($4.99)
Reflector ($12.99, optional, required for iPhone or iPad recordings)

Optional Setup for iOS

If you want to make a GIF from an action or animation on your iPhone or iPad, you’ll need to connect your device to your computer before we get started. If the action you want to record is already on your computer, you can skip this part.

In order to get your iOS device to show up on your computer, you’re going to use an OS X app called Reflector. The app basically turned your computer into an Airplay receiver, allowing you to mirror your iPhone or iPad screen on your computer screen.

Step 1 – Launch Reflector

When you launch Reflector, nothing will happen. Do not be alarmed. That is normal.

Step 2 – Connect your iOS device to your computer

Open Control Center by swiping up from the bottom of your iOS device. Select Airplay and choose your computer from the list. Make sure that the switch for mirroring is enabled.

If everything is working, your desktop should immediately show your iOS device’s screen.

Note about making GIFs from full-length movies

Most people are intimidated by the prospect of turning a short clip from a movie into a GIF. They think they’ll need to either download the full movie and use video editing software to pull out the clip, or find the clip somewhere online, download it, convert it to the proper format, and then make the GIF.

What a pain in the ass.

Luckily, you don’t have to do any of that to quickly and easily make a beautiful GIF! All you need is to be able to play the clip on your computer — no downloading, ripping, or converting required. That means you can simply pull up the clip on YouTube, download the movie in whatever format you want, or play it from a DVD.

In the next section, we’re going to be taking a short screen recording using Quicktime and converting that video recording into the GIF. Which means as long as the video is playing on your screen, you can convert it into a GIF.

Capturing a short recording

In this tutorial, I want to communicate the cool mini-menu that pops up when you tap the middle button at the bottom of the Yelp iOS app. Do you have any idea what I’m talking about? Probably not. Let me show you.

Isn’t that much better? I could have described the menu opening as “playful,” but that could mean so many different things. I could have told someone to download the Yelp app and try it themselves, but that’s a lot of work for them, and you can never be sure that they’re seeing exactly what you want them to see.

The first step is to capture the recording, and we’re going to use Quicktime for that.

Open Quicktime, click File and select New Screen Recording.

You’ll get a new window that’s titled Screen Recording with a small round Record button in the middle. Tap record.

This will bring up an overlay with instructions for capturing a new recording.

If you want to record your entire screen, you can click the mouse anywhere. But we don’t need to record the full screen — we just want a small part of the Yelp app.

Click and drag a box around the area you want to capture and click Start Recording. The box doesn’t have to be perfect, but make sure it’s large enough to fit everything you need to record. We can always trim it later, but we won’t be able to make the recording area any bigger.

Now you have to perform whatever action you need to record. For this tutorial, I’m going to tap the middle button that opens the mini-menu. For you, this might be clicking a button on a website to record the behavior, showing a glitch when you try to open a file, or anything else you really just want to show someone.

When you’re done, click the stop button in the menu bar.

Curious about all those other items in my menu bar? Here’s what they are.

Now you have your recording, and you need to save it. Click File, Export, then 480p. Depending on the size of the area you recorded, you may also be able to export in the higher quality 720p. The higher resolution is a bit overkill for our needs, so you’ll be fine if you always select 480p.

This will export your video recording as an .mp4 file. You can name the file if you want, but remember that you’ll only need this movie temporarily — what we really want is a GIF. I usually keep the file named Untitled and save it to my desktop. Once I’m done making the GIF, I’ll delete it.

Now you have a short movie of your desired behavior, it’s time to turn it into a GIF.

Turning your recording into a GIF

In order to turn this movie into a GIF, we’re going to need to use the app GIF Brewery. This little app makes it super quick and easy to make GIFs.

Open GIF Brewery, click File, and Open the movie file you just saved.

Click the Play button in the lower left corner and pause the movie when you get to the point where you want your GIF to start. You can use the plus and minus buttons to move frame by frame until you get it just right.

Click the Set Start button to select this frame as the start of your GIF. You’ll see the yellow flag move to the specified point in the timeline — that’s how you know the set starting point.

Press play again and pause the video at the end of your desired GIF. Use the plus and minus buttons to get it perfect. Click on the Set End button to specify that your current frame as the last frame in the GIF.

Before we export, we need to adjust one more setting: the GIF’s frame rate.

Click on GIF Properties in the top right to open the properties menu. Click Automatically Calculate Count & Display and change the number from 10 to 12.

Now click Create GIF and preview your GIF! Doesn’t it look fancy?

Stop! You’re not done yet!

Before saving your GIF, you’ll want to look at the file size, displayed in the top left corner above the GIF preview.Try to keep this number below 2 MB, and under 1 MB should be your goal.

At 560 KB, size of this GIF is well within those bounds, but I’m still going to make some minor adjustments to make the GIF look better and make the file size as small as possible.

Your GIF may be significantly larger in size than mine — possibly more than double my recommended 2 MB limit. There are three different parameters that you’ll want to adjust, in the order that I show you, to try to get the file size as small as possible. If that doesn’t work, there’s one last setting adjustment that I’ll show you (although I try to use that setting sparingly).

Here are the three parameters you’ll want to adjust, in this order:

1. Crop the GIF smaller
2. Shorten GIF length
3. Resize the GIF

Crop the GIF smaller

The easiest way to quickly drop the file size of your GIF is to trim out any unnecessary parts of the frame. GIF Brewery makes this super easy, and I’m going to do this with the Yelp button animation GIF I’m making. There’s no reason that I need the frame of the iPhone or my desktop background in the GIF, so I’m going to remove it.

Select the Crop button in the top left corner and adjust the box so the part of the image you want to keep is in the center. Then press Enter on your keyboard.

There! That’s much better. Let’s press Create GIF again to see how that affected the file size.

Wow! That made a huge difference.  Before cropping, the file size was 560 KB, now it’s 274 KB — that’s less than half the original size. Fantastic.

But, lets say the GIF size was still too big. The next thing we’d want to do is adjust the GIF length.

Shorten the GIF length

Lucky for us, the animation we want to show in this GIF is quite short, but that might not always be the case for your projects. After cropping your GIF smaller, the next step is to make it as short as possible.

The first thing to do is to see if you can move the GIF’s start frame later, or the GIF’s end earlier. Most of the time, a couple of frames won’t make a huge size difference, but if I had included the animation for two button pushes in this GIF, instead of just one, I’d crop out the one that doesn’t look as good.

If you really can’t shorten the GIF any more than it already is, see if the animation would work as two GIFs. Move the GIF End marker to the middle of the animation, export the GIF, and then set the GIF Start marker to the frame that the previous GIF ended.

The viewer will still understand what’s happening if they view both of these GIFs right on top of to each other, and you’ll be able to keep things small and fast-loading.

Resize the GIF

One last way that you can try to shrink the GIF’s file size is to make the entire GIF smaller. Keep in mind, however, that this doesn’t always reduce the output file size.

The reason why a smaller GIF sometimes has a larger file size has to do with the way the GIF is algorithmically encoded. If you didn’t follow that, don’t worry. Just keep in mind that resizing your GIF may not have the effect you want — but it’s still worth trying if you need a smaller file size.

But if your GIF is larger than 500 pixels wide, you definitely need to shrink the size. Your final GIF should be no larger than 500 pixels in height or width. This limit actually comes from Tumblr — users can’t post GIFs larger than 1 MB and 500 x 500 px — and while you can create and share larger GIFs on other platforms, using Tumblr’s rules as your own rules is a great way to ensure your GIFs are convenient for everyone and easily sharable.

Plus, small GIFs are just as effective as large GIFs.

The reason why you’re creating a GIF is to showcase action, or motion, not to show off small text or fine details. The good thing about animation is that it’s really easy for the human brain to understand what’s happening even without lots of fine details.

My Yelp button animation GIF is way larger than it needs to be. In fact, it’s significantly larger on my computer screen than it is on my iPhone. I don’t really need to make my GIF smaller, but I like trying to get my final file size as small as possible. Let’s shrink it.

First, click the Resize button on the top left. Your GIF will automatically shrink in size slightly, but now you have full power to adjust your GIF by inputing the desired pixel size or dragging the resize bar left or right.

Resize your GIF however you want. I’m going to make my GIF 300 px wide. When you’re done with that, click on Create GIF to see how the resizing has affected your file size.

The output GIF file size is 285 KB. Shoot. That’s larger than the file before resizing. I’m going to Undo (⌘Z) to revert back to the slightly larger GIF.

Reducing colors: the last resort

If you’re making a GIF from a button animation or some other short clip, you shouldn’t really need to reduce colors in order to shrink the file size. However, it can come in handy if you’re making a GIF from a longer clip from a movie or viral video.

Reducing colors can often have undesirable effects on the quality of the GIF, which is why I only use it sparingly. However, sometimes, reducing the colors in a GIF can have a massive impact on file size without distorting the image quality substantially.

If you want to test it out yourself, click the check box next to “Reduce the number of colors in GIF,” make sure Adaptive Palate is selected, and set it to 256 colors.

You’ll notice that there are a lot of options in terms of the number of colors in a GIF. I’ve found that using fewer than 256 colors doesn’t have much effect on file size, but makes the GIF output exponentially worse. If your GIF is still too big after reducing colors to 256, you should split your GIF into two different files.

With reduced colors, my Yelp button animation GIF shrinks all the way down to 124 KB!

I’m also excited to see that the GIF quality isn’t noticeably worse with reduced colors, so I’m going to keep that enabled for the final product.

Saving and sharing your GIF

In order to save your GIF, all you need to do is press Create GIF in the top right corner, confirm the GIF quality and size, and press Save. Name the file something relevant and choose the directory you want. You now have your very own GIF!

The best way to use GIFs is inline, meaning sandwiched inside your message instead of an attachment at the end. Describe what the animation or action that you just captured into a GIF, and then show what you’re talking about with the GIF.

With a little practice, the act of making a quick GIF will become second nature. It takes seconds, and is one of the most effective ways to illustrate you what you’re trying to say. Before I had the ability to make quick GIFs, I spent so much time trying to describe the most basic animations — writing and rewriting my words and never quite happy with how they turned out.

You, too, can now harness the power of the GIF. Use it well.