A Photoshop tutorial by Art Director and founder of Pureworks, Victoria Jordan.

In this tutorial, we’re going to build on what we learned in the first tutorial about animated gifs with more complex movement. We’ll do this using the following two stock images from Bigstock contributors Elenamiv and NesaCera

The first thing I’m going to do is isolate the parts of the images I’d like to animate. With a little silhouetting and cloning, I make one layer for the body of the bicycle, one for the front wheel of the bicycle and one layer for the back wheel, then I’ll place our background image on the bottom layer.

One of the ways I’ll create movement, is by having the background move, so I’m going to make the canvas size shorter than the width of the background.

Now I’ll open the animation panel (Window > Animation) and duplicate the frame.

While I’m in the second frame, I’ll select all of the bike layers and move the bike a bit to the right.
Then I will select the background layer and move it to the left by just a little bit.

I’m going to repeat these steps (duplicate the frame, move the bike to the right and move the background a until) the bike is out of the frame.

Now that we have all our frames created, we’re going to go in and tween between each frame. If you recall from the prior Animated Gif tutorial, you do this by selecting the first 2 side by side frames and clicking the “tween” button in the animation panel. I’m going to stick with the default settings, but feel free to play around and see what works best for you. I’m going to proceed to tween between each of the original frames. (When dealing with a lot of similar looking frames, it’s sometimes easier to start tweening from the last 2 frames and work backwards.)

I’ve tweened between all of the original frames, and I’ve created my flying bike animation. Now all I have to do is Save for Web & Devices as a gif like we did in the last tutorial, and I have my animated gif.

Animated gifs aren’t the easiest way to create animations, but they can be fun! You can couple this type of movement with the opacity based animation we explored in the first Animated Gif tutorial to create some pretty awesome pieces. Enjoy!