Guide to GIF Making: Part Two

Okay, now that we have our GIF moving, let’s try to take our animation a step further. To go further, naturally, we start by taking a step back.


Step 1: Open it again (in Photoshop)

First things first, open the PSD file in Photoshop (again). We will start by re-separating our groups into individual layers.

Delete “Cat Group 2” and ungroup “Cat Group 1.”


When you move a group of layers into After Effects (which is where we will be going next), the program recognizes grouped layers as one single layer—by separating it out again, we will be able to manipulate each layer individually once we’re in After Effects.


Step 2: Save (again—as another file)

Make sure you are working in RGB.


Step 3: Open the new file in After Effects

When you open the new file in After Effects, it will appear in your project window. Click on the composition file within this window. It will be located beneath the folder of your layers. Once you click on the composition file, your layers will move into your composition window, where we can begin our animation.


Step 4: Making it move

The first part you want to move are the legs. We are going to move the legs by anchoring our movement to different points the timeline.

Each layer has an anchor point to your art board. When you first bring your artwork into After Effects, it automatically sets these points to the center of the board. Before making any layer move, you are going to want to shift these points to where the movement should originate from. Think of it as a hinge. Do this by hitting the "Y" button on your key board, clicking the point with your mouse, and then dragging the point to the appropriate location.

For each layer, set your starting angle such that your layers are positioned in a way that looks the way you want your GIF to start. Then, in your timeline, move the time marker forward slightly.

Using the same rotation points, alter the angle slightly. Over the course of time that elapses from your first time marker to your second, your animation will move from how you have it first positioned, to how you have it positioned now.

In the case of this cat, we will simply alternate between these two points (just copying and pasting, moving the time marker ahead as we do so). For more complex motions, you will need to add more markers along your timeline with additional rotations and adjustments.

We have now done what had previously been accomplished in Photoshop, only now we have the ability to take it a few steps further.


Step 5: Parenting the layers

Now that we have the legs moving, we want to have the cat walking across the screen, rather than just walking in place. Before moving any layers, make sure that all the layers will move together. We accomplish this by “Parenting” the layers to the main layer (in this case, the cat’s body). This makes it so that when we move our “main layer,” the corresponding layers move as well.


Step 6: Change the position

Now that we have the legs moving and our layers are parented, click on the body layer and drag the cat to the left side of the screen (off the art board).

Make sure your time marker is at the beginning of your timeline, then click the “position” button for the body layer. This anchors the first position.

Next, move your timeline marker to the end of your current animation. With your right cursor arrow, move the cat off screen to the other side of your art board. Now click “position” again. This anchors the second position.


Step 7: Looping

Move the timeline ruler to the end of your animation’s movement. If you want the animation to loop endlessly, you want your final frame to match your initial frame. For us, this means the cat should start fully off frame to the left, and end fully off frame to the right.

Hit the spacebar to play your GIF to make sure everything is moving smoothly and as you would like it to. If everything looks good, you’re ready to save.


Step 8: Saving (part 1)

To start the saving process, add your new animation to the render queue. To do this, you go to your main tool bar, click file, export, add to render queue.

Then, your composition palette will be replaced by your render queue. Here, all you have to do is click “render.” Your computer will chime when your rendering is complete.

After the rendering has completed, your GIF will save as .MOV.


Step 9: Saving (part 2)

Open Photoshop again (yes—Photoshop). Go to file, import, then click “video frames to layers.” This will prompt the open window, from which you can import the .MOV into Photoshop.

Once your file has been imported, you will notice that you have all of your layers. From here, you can go back and save as a standard GIF.

We covered this in part 1—but as a recap: go to the main tool bar, click “File,” “Export,” and then “Save for Web (Legacy).” On the save out menu, choose what size you want your GIF to be (try to do 128 dithered, if possible).

And now you have a GIF! Now go post it around the internet and watch it go viral!