Looking to add some spice to your customer emails? Learn how to make simple animated .gifs in Adobe Photoshop with this easy tutorial.
No matter how you pronounce the file’s acronymic extension, .gifs are one of the oldest, yet still very contemporary, ways to make web and email designs zing with jazzy animations. Fortunately, we’ve come a long way from the bedazzled, rotating, low-res bling of sites like angelfire.com and geocities.com.
In an email header mod environment, we’ll build a simple composition to show how to move a smart object.
Build Your Static Image
A typical email is 640px wide by however tall you want it to be. Since we want to maintain sharpness across 4k or 5k monitors and modern smartphone screens, we’ll build it at 1280px wide.
Build an email module how it will display in a static, non-animated environment, or when finished with its animation cycle. This static frame displays the email message for users who don’t have a device that properly displays animated .gifs.
Build the Frame in the Timeline Window
In the menu bar in Photoshop, click Window > Timeline, then click Create Frame Animation.
Now we will place the objects we want to move at their starting points. The bee goes off the canvas, in order to emerge as the animation progresses. The “button” layer is turned off so it can appear to fade in at the end.
As described above we’ll make the first frame the static layout, and set it to play only .01 second. Our first animation frame is actually the second frame in the sequence. Think of the frames as the “major moments.” We’ll fill in the gaps in the next step.
- Place the elements in the layout and hit the “new frame” button at the bottom of the Timeline window (which is called “Duplicate selected frame,” and looks like a piece of paper.)
- Move the bee off the canvas to its origin point, and hide the “Shop Now” button’s layer.
- Hit new frame button and move the bee to the flower.
- Hit new frame button and show the button’s layer in the layers palette.
Now, we set the time for these frames. I choose two seconds for the first animation frame. That will give time for the recipient of this email to open and acclimatize to the layout before it begins.
The third frame is one second. Since we’ll populate transitional frames, it’s not necessary to let this sit too long, but we want a short pause before the next action.
The final frame, when the button appears, gets a 10-second assignment. We won’t set this image to loop, but in the case that their device loops it anyway, this longer pause will ensure they see the full layout before it starts over.
Tweens: The Key to Animation
Now that we’re done with the frames showing the start and end points, we’ll “tween” the frames to populate the frames in-be”tween”—get it? TWEEN. The bee’s movement and the button’s appearance will now play as in-transition.
Click on the second frame (remember, it’s the first frame of the animation), and then click on the Tween button. The default is 5 transitional frames, which is fine for this.
The highlighted frames are the tweens. They’re at 2 seconds long, which is too long for our purpose. With all of them still highlighted, click the down arrow and change the time to “Other,” and type .01 for the time. They will all change to this much shorter time for a quicker, smoother movement.
Click frame 8 and do the same so the button appears to fade in.
That’s it for the build. Just Save for Web and choose .gif as the file type. Because we used vector smart objects, this piece won’t be too big and mess with quality settings.