Somewhere on the internet, you’ve come across a GIF. I mean, they’re everywhere—whether it’s photo based, an adapted video clip, or just a short animation that eventually snowballs in popularity to become an oh-so-entertaining meme. But, have you ever thought to yourself, “I wonder if it’s hard to make a basic GIF?” Well, good news! The answer is no, it is not difficult! With a little patience and a couple tutorials, you too can animate your own GIF.
First things first: What is an animated GIF? GIF stands for Graphics Interchange Format or, in simpler terms, a moving graphic image that lives on a Web page. GIFs can be simply created by having a single file of set images that are played in a specified order (think “digital flip book”). For the most part GIFs are looped endlessly so it will cycle continuously until you decided to move on.
There are two programs I use to make the most of a GIF—Photoshop and After Effects. Photoshop is where we get the bulk of the groundwork done—but After Effects is where we can make these GIFs smoother and cleaner.
In this post, I’ll go through the Photoshop process first so we can get down the basics. Next week we’ll talk more on how we can push these GIF animations to be even better.
Step One: Figuring out your artwork
There are endless possibilities when making your GIF. To demonstrate the two different methods, I created this easy little cat illustration in Illustrator.
Step Two: Creating layers
Separate your image into individual layers. Be sure to name them as you go (head, eyes, legs, etc.)—this will be infinitely helpful later on when we start moving.
Step Three: Group your layers
Once you have all your layers separated and named, arrange them such that your image (in this case—our cat) looks how you want it to look at the start of your GIF. Now group these layers as one. Let’s call this group of layers “Cat Group 1.”
Step Four: Copy your group
Now create a copy of “Cat Group 1.” This grouping we will call—you guessed it—”Cat Group 2.” If I’m trying to make this cat walk, I will want to move its legs. I will move the leg layers in “Cat Group 2” so that they look different than in “Cat Group 1.” Because our cat has such short, stubby legs, we will only need 2 groups to make an animation that works. We have “Cat Group 1” showing the first part of the cat’s step, and “Cat Group 2” showing the second part of the cat’s step.
Step Five: Make it move
Now it’s time to start making this kitty walk. Within your timeline window (if you do not have it open, go up to your main finder in Photoshop, click on window, then click on timeline and a box should appear at the bottom on your screen), you want to create a frame animation. Timeline shows you each page of your digital flipbook, so to speak. Cue up “Cat Group 1” in frame one by clicking off of the “Cat Group 2” layer (making it invisible). Now, cue up “Cat Group 2” in frame two by clicking off of the “Cat Group 1” layer (making it invisible).
For more complex GIFs, you can change the length of time for each frame—making your animation move more slowly or quickly as you need.
Congratulations—you have the very first steps of your GIF together!
Step Six: Make it loop
On the bottom of your timeline window, change “once” to “forever.”
Step Seven: How to save
Save out that main file as a PSD.
Now save it as a GIF. To do this, go up to the main toolbar, click “File,” “Export,” and then “Save for Web (Legacy).” Once you have reached the save out menu, choose what size you want your GIF to be. I try to do 128 dithered, allowing for the highest amount of color. However, sometimes the size restrictions (especially on social media platforms) do not allow for that, so choose what works best for your situation!
Next week, I’ll dive into part 2 of our GIF Guide Tutorial—in which I will share some tips for how to leverage After Effects to really bring your GIFs to life. But for now—keep playing with Photoshop and your newfound ability to make your images move.