Basic Understanding: Animation Buttons

An animation button is well … a button that is animated. Companies and advertisers use these to catch the attention of the online users to attract them to their products. This can help you to bring some life to your web site because in the end, an animated site is obviously better than a plain, old site (if the animations are done the right way). Ready to begin? Let’s go …

Picking The Right Button For You

First off, you have to think of what kind of button you want to animate and what you want to be animated. For example here I’m going to show you how to make a quite simple animation (Figure below).

I’m sure everyone has their own way of making animations but I’m going to show you my way.

Once you’ve thought of your button animation idea let’s open up Photoshop …

Preparation For Animation

Before ANYTHING, we have to create exactly what we want to be animated. I do my animations by Layer Groups. If you look up at my animation above you’ll see 3 Text Layers and a Background. Each of those are done in Layer Groups … so there I would have 3 Layer Groups. (Animation Index, Buttons! Buttons!, and Example).

Begin Creating Layer Groups

I started off by opening a new document with the settings below (see Figure below)

Those settings will get you the exact size of my button.

Now you can design your button. Add anything you think will be attractive but simple.

Don’t forget to put each slide into a Layer Group. Here is what my Layer Palette looks like at the end with all my Layer Groups (Figure right)

Begin Animation Sequence

Now that we’ve got our Layer Groups we can begin the animation! Muhahahaha! (Yes, you can also do your evil laugh).

Lets go up top to Window > Animation and the Animation Window pops up.

You’ll only see one Frame for now since you haven’t done anything.

Each frame is going to be something different and the previous frame will transition into the next. On your first frame, have what you want to appear at first and Hide everything else (by click the little eye-ball next to the Group). Then we’ll set up your next frame. Click the ‘Duplicate Selected Frames’ button at the bottom of the Animation window. Now you should have two of the same frames. In that second frame, have everything that you want to appear next (hide everything else by clicking the little eye-ball). Do that each time for each different frame. I only had 3 groups so I only have 3 frames. This is my result at the end of all this.

Transition Effect on Frames:

Select the first frame (As shown above) and click the ‘Tweens Animation Frames’ button, located directly to the left of the ‘Duplicate Selected Frames’ button. When you see the dialog box appear (for best results) use these settings below:

Now you should have an extra 5 frames that transition the first frame to the second. Cool eh? Now do the exact same thing from the second frame to the third. After that you should have a total of 13 frames. Now select the first frame, hold alt and drag it to the end of all the frames. This will duplicate the first frame and put it at the end. Now select the third frame and make it transition to the first frame. Now you should have a total of 19 frames. you can mess around with the Time Delay of each frame to customize it to how you want. Finally to see your master-piece click the ‘Play’ button!

Saving Your Animated Button:

To save your animated button go to File > Save for Web > Save > and save to a location. It’s as easy as that! This is how my button turned out: