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.
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:
