How to Create an Animated GIF

You've seen them on the interwebs: little boxes in the margins of your beloved blog pages, moving and flashing, just begging for your attention. But what is a GIF, really?

A .gif file is a form of computer image that moves as an animation, because it consists of frames, like a movie with no sound. Just a few frames can help tell a story, express an emotion, or demonstrate some instructions. Usually people make these because the file size is small.

While some GIFs can be used to depict a short video clip, they’re more commonly used to add motion to type and graphics. The DIY that follows is a simplified demonstration of how to make that kind of GIF. Although there are other programs for making GIFs, this demo was created using Adobe Photoshop CC, which you will need to create yours.

ONE

Open Photoshop. Create a new document or open an existing file. Simple, right?

How to create an animated GIF

TWO

Put each frame of your desired animation on a different layer. This is where things get creative, but we'll leave that part up to you.

How to create an animated GIF

THREE

Open the TIMELINE palette and set the view state to Frame Animation (vs. Video Timeline). Then, using the SHIFT key, select all the layers you wish to animate. Using the TIMELINE flyout menu, choose Make Frames from Layers. An animation frame will now be created from each layer.

FOUR

Modify each frame as desired by selecting the frame in the Animation palette and editing it in the main Photoshop window or layer palette. Click on the arrow head under each frame to display and modify each the timing of each frame. Select a loop (repeat) rate for your animation. Click the PLAY button to preview your animation.

How to create an animated GIF

FIVE

From the FILE menu, select SAVE FOR WEB; a Settings Window will appear. Set the output to GIF and choose the optimal color profile (at this time you can adjust other settings for best performance and file size). Press SAVE. Now, simply name your GIF, file it on your computer, press SAVE again and *BOOM* you're done.

How to create an animated GIF

Congratulations: you just created an animated GIF. While most GIFs are designed to be simple, you can make yours as complex as you wish. Keep in mind the more complex the animation, the larger the finished GIF file size will be.

How to create an animated GIF

Blog Author: Trey Sprinkle, Former B teamer

Put our experts to work

Contact Us