Creating a Refreshing Animated GIF from Shape Layers in Photoshop

Tutorial

It's the weekend, and I'm in need of refreshment and dekeCompression. To that end, I've put together some of the things I've learnt on this very site over the past few weeks and whipped up my very own animated mojito.



I created this project with a combination of advice I got from Deke's Techniques on Creating an Animated Movie in Photoshop and some things I discovered when working on my own Five Useful Observations for Understanding Photoshop Shape Layers post a few weeks back.

The result was a fun, easy project that's almost as refreshing as a real mojito. And creating digitally means no crushed mint leaf particles or freshly squeezed lemon pulp getting in your hair. (Yes, this really happened. In a previous life, I had to make gallons of mojito mix at a time. Probably why I switched to concocting clean, sleek martinis.)

Anyway, you should try it out, especially if you're new to animation or want to post a hilarious GIF on your website. Here's my general recipe you can adapt to your own animation:

1. Plan the content.
My creation started as a full cocktail, made when a friend of mine teased me about my over-reliance on martinis. I started with a simple rectangular document and added shape layers for each component.



No drawing involved (the way I prefer it). The green liquid and the straw were simple rectangular shapes. I drew the ice cubes with the same rectangle shape tool with the Shift key held down (to make a square). And the mint leaves are variations on a shape (Leaf 3) that's available from the Custom Shape picker. Choose the Custom shape amoeba icon in the toolbox then click the down pointing arrow next to the current shape to see the variety of pre-fabricated shape options you have in Photoshop.



I put every item on its own shape layer, even when they were filled with the same color, so I could easily move the forms around independently. Despite Photoshop's new abilities to combine multiple paths on one shape layer, this overly cautious approach was better for my inexperienced mind. Then I selected all the shape layers and grouped them together by choosing New Group from Layers in the Layers panel flyout menu.

2. Create the incremental stages that will eventually become frames.
For Deke's flying falcon animation, he used Puppet Warp to make incremental changes to the bird's wings, each on a separate layer. In my case, I duplicated the Full layer group en masse, and named the new group 75 (as in, someone just drank a quarter of my mojito). Then I adjusted each shape layer in the new group, letting the ice cubes and mint leaves float artfully down the glass as the liquid receded. I repeated for each increment.

(Technically, I could have just used one set of shapes, changing the position of the various pieces in the timeline, and using the frames to capture each configuration as I'll mention below. But this is my first animation, and I'm trying to work carefully.)

3. Create a New Frame Animation in the Timeline Panel.
When you open the Timeline panel for the first time, there's an oddly placed popup menu right in the middle of the horizontal panel. The default setting is Create Video Timeline, so I changed it to Create Frame Animation. (It appears this setting is sticky, so the next time you open the panel for a new document, it will be set where you last left it.)



Photoshop automatically creates the first frame from the layers that are visible, which in my case was the Full group. It also automatically sets the time at 5 seconds, which, if you've ever seen an automated GIF in the wild, you know is too long. We're thirsty. So I changed it to 0.5 seconds in the popup menu just below the frame. Changing this now means every new frame will be set to 0.5 seconds as well.



4. Add the other frames.
There are multiple ways to add frames, but again I chose the slow-and-steady approach for this first foray. If you click the page icon at the bottom of the Timeline panel, a new frame appears and immediately reflects whichever layer(s) you have visible in whatever state (position, opacity).

The key to working with frames is to think of them like very sensitive layer comps. Each frame is a snapshot of the layer visibility, position, and opacity you have going at any moment. But be careful, if you have a frame selected, it's going to change to whatever is going on in the Layers panel.

In other words, maybe snapshot isn't the best term. The frames aren't set permanently like a snapshot, and any time you have one selected, its content is subject to change. I set up frames that corresponded to each of my layer groups. (Turning off all the other layer groups for each frame.)

Again, you can use one set of layers, moving the pieces around and capturing their state for each frame. As you return to each frame, the layer configuration will return to how it was when you last had the frame selected.

5. Run the animation from the timeline panel and adjust to taste.
Here's where I contemplated how artfully my ice cubes and mint leaves should sink to the bottom. Just push the Play button triangle in the Timeline panel to watch your animation.




6. Export as a GIF.
The key to exporting a GIF is to use the Save for Web command (File > Save for Web). In the dialog box, I naturally chose GIF from the format popup menu (easy choice). But the more complicated decision here is the number of colors. You want to get it as low as possible to keep your file size small. The key is to find the minimum number of colors that still keep your image intact. In my case, things looked pretty good at 16, but when I tried setting colors to 8, the edges got ratty. So 16 it is.



The other key choice to make here is whether you want it to run Once or Forever. I originally chose Once, but on second thought a bottomless mojito might be the better call. Cheers, my dekeCompadres!

If you'd like how Deke put his animation together, be sure to check out Deke's Techniques 227 and see Deke and his falcon (and his falcon's menacing squawk) in action.