Animated Icons

This tutorial will show you how to animate any type of icon using PhotoShop and ImageReady.

Lets get started, open a new document, 50 x 50 px with white background.

Double Click on the layer to unlock it.

Give that layer a cool black stroke, use the following settings:

Now use the Erase Tool on Block mode, start slowly erasing the middle of the document until you get a nice double layer like this:

Now use the Custom shape tool, pick your favorite shape, and draw the shape [with black] inside your document. Remember to leave some white space on the sides.

Now copy the shape layer 4 times. So you should have a total of 5 identical shapes [each within a different layer].

Change the Fill of each of the layers like so:

Layer 1 [original]: 100%
Layer 2: 85%
Layer 3: 70%
Layer 4: 55%
Layer 5: 40%

Now you should have 5 shape layers, each one with different fill [the numbers above]. Lets go ahead and Jump to ImageReady [bottom of the toolbar button].

Once you get to ImageReady, duplicate the first frame 7 additional frames.

Click to enlarge

Set each frame like below:

Frame 1: Layer - Shape1; 0.5sec
Frame 2: Layer - Shape2; 0 sec
Frame 3: Layer - Shape3; 0 sec
Frame 4: Layer - Shape4; 0 sec
Frame 5: Layer - Shape5; 0 sec
Frame 6: Layer - Shape4; 0 sec
Frame 7: Layer - Shape3; 0 sec
Frame 8: Layer - Shape2; 0 sec

That's about it, now just save it!

Here are a few examples: