GIFs made from screen recordings are awesome, nay vital, for tutorials, demos, and other content. Use this guide to get them down to a reasonable size.
If you’re in the tutorial business, or simply want to learn how to make GIFs from screen recordings that aren’t HUGE, I’ve got a few great tips for you. They’re easy, and using them up front will cut down on the time it takes you to save files and end-users’ browsers to load them.
No longer will you need to reduce the colors and quality to get under 2mb on GIFs, and gradients will no longer look like a Gameboy screen. Read on to see how it’s done.
Select Only the Part of the Screen You Will Use
When you start a new screen recording, QuickTime lets you select only the part of the screen you want to record. (I just had a mental breakdown wondering how to make a screen recording of a screen recording, so I’ll just write out the steps instead of showing you.)
Start a new screen recording in QuickTime, then hit the Record button in the pop-up box. When you see this message…
…select the part of the screen you want to record, which will reduce the file size of the .mov once you save it.
Starting out small will save time later in Photoshop. You don’t want to convert giant images filled with your desktop background or menu windows that don’t support the task you’re showing. Just crop them out right up front.
Crop and Resize to Target Dimensions
Sometimes you have to record a larger-than-necessary area because you’re showing a pop-out menu. If this is the case, try the steps below.
After you’ve made your recording, drag the .mov file to Photoshop. Before you edit or try to save your GIF, crop out the unwanted screen space, and resize the file to the final dimensions.
For example, instead of all using all this real estate to show someone how to build GIF frames in the Timeline window…
I cropped to only the relevant windows:
Now hold down Option + Command and hit I on the keyboard to resize the file to these dimensions.
Trimming off this extra space can ultimately save several minutes of export time. Using the Export window with the pre-crop size file will bog down your machine, so always resize the frame to what you intend to upload first.
Reduce the Frame Rate for a Huge Increase in Efficiency
The biggest adjustment you can make when converting a .mov file in Photoshop is to reduce the frame rate. Photoshop defaults to 60 frames per second when importing a .mov file. That is insane for a GIF, making it way too detailed and big to use enough colors (at the very least 64) to make it look decent.
After making the adjustments above, click on the hamburger menu in the Timeline window. Choose Set Timeline Frame Rate. In the pop-up, enter 15 or choose a rate from the dropdown. I’ve been using 15 fps – I’ve found it perfectly fine for design tutorial GIFs, and it shaves tons of time off processing and saving.
Never Carry Cache
In the old days, when the cache was not regularly cleared, the memory on the Scratch Disk you used for processing would get bogged down. Over the years, Photoshop has gotten much better at clearing its own cache, but there is still an option to clear the Video Cache.
I’ve found that if I’m doing several of GIF exports in a row, my processor starts heating up and the computer’s fan starts up, adding time. Clearing the video cache helps that.
In Photoshop, click Edit in the Application toolbar and choose Purge from the list. Click on Video Cache and it will be cleared. Boom, done.
Looking for more tips and tricks to improve your workflow? Check out these articles.