How to Make an Animated Step By Step Progress of Your Artwork

This tutorial will show you a quick and easy method to make an animated gif image in photoshop showing the progress of your work.

The images used in this tutorial are from the guide of an entry named Eyecon, which finished first place in the Icon design contest of Pxleyes,

The GIF files in this tutorial are quite large, so the intermediate gifs are listed as links.

Let's get started!

End result:

Step 1

Program: Photoshop CS2 to CS5
Before Photoshop CS2, you could make an animated gif by an application named ImageReady, but from Photoshop CS2, animation was included in Photoshop.
Start by opening the animation window (the location is indicated in the figure)
There are 24 layers, each layer is the intermediate step that I saved during the time I worked on my image. The first layer I name "Step 1", the second layer named "Step 2", so on and so forth.
All layers now are in the visible mode and the output image is just the final one, you can't see the under layers.
Animation window has 2 modes: Frames mode and Timeline mode. In this tutorial I'll show you the creation of animation with Frames mode because Frames mode bases on separated layer, only changes the opacity and fill of the layers.
To switch between these modes, you can use the button on the right bottom of the animation window as I indicated in the figure.
In Frames mode you can see each frame with its thumbnail, it's the result of how you combined the layers with different opacity and fill. Under the thumbnail are some parameters that you can alter later such as delay time and looping option.

Step 2

Edit the first frame
Basically, what we will do is showing each layer by the order of time, so the first frame will show the first layer, the second frame will show the second layer, and so on.
Now we have to hide all the layers except the first one. The fastest way to do it is use the combination of Alt+Left mouse click on the eye icon of the layer you want to keep, the others will become hidden.
Now you can see, the first frame shows only the first layer, which is visible.

Step 3

Edit the second and the remaining frames
Now you need to insert one more frame after the first frame. To do that, go to the small icon on the right corner of the animation window (I indicated in the figure of step 1, which can help you expand the task bar) or just click on the icon on the left of the dust bin icon in the bottom row of this window.
At first, the second frame is just another copy of the first frame. To change it, you click on the second frame and select the eye icon of the second layer (you can keep the first layer visible or not, it depends on you, in this case it's not important because the higher layer will cover the lower layer).
So, the two frames are different in the visibility of the layers. Repeat this step until the last layer.

Step 4

Finish making the frames
I have 24 layers and make 24 frames for them.

Step 5

Edit the time delay between frames
You can choose the delay time between two layers by clicking on the option just under the thumbnail of the frame and select the standard ones or by your desire (In "Other...").
If you want to select the same delay time for multiple frames, just click on the first frame, hold Shift, then click on the last frame as you want, all these layers will be selected at the same time. Now every option you change with one frame, it will be applied to all frames that you chose.
In my case, I chose 0.2 second as the delay time between two frames, except the last frame I chose 2 second (the viewer need to look the result a bit more before the new loop started).

Step 6

Reduce the image size
My original photos are pretty large, so I don't want my animation image to be heavy with more than 10Mb or something, so I need to reduce the size.
Go to Image -> Image size (or Ctrl+Alt+I) to change the image size. I chose 400px for the width. This option will be applied to all layers and frames without selecting all of them.

Step 7

Rendering
Go to File -> Save for Web & Devices (or Alt+Shift+Ctrl+S), then you can see the new window as in the figure.
The main image is the preview image.
On the top right, you can select the format of your image, in this case we choose GIF (Graphics Interchange Format), which is the only format allows monitoring the sequence of images or animation. Beside GIF, there are different kinds of image format used for website, and all of them are compressed image. GIF image is a 8-bit format, so the maximum number of colors it can show is 256. Reducing the color number is a way to reduce your file size.
Under the format option, there are different parameters which define the distribution of colors: Color reduction algorithm, Specific dither algorithm, and color number. As my experience, you should choose Selective - Pattern, respectively, for the first two to have the best compromise between the quality of your image and file size. If you didn't use much colors in your image, you can reduce the color number to decrease the file size.
You can select the Transparency option or not, depending on you used transparent layers in your image or not. In my case, it's not necessary because every layers are solid.
The last option in the bottom (Looping option) is selecting whether your image is repetitive or not (Once or forever or any number of time as you want), and of course, we should choose Forever, otherwise viewers have to refresh the page to see the progress again, very inconvenient.
You can preview your animation by the play button.

Step 8

Now we have the first "raw" animated image. You can see, with 0.2 second of delay time, it runs quite fast. We will have to optimize that.


View the animated GIF.

Step 9

Optimizing your animation
First, I increase the delay time to 0.5 seconds per frame.
Second, I make one new layer on top of all other layers for the water mark because I don't want anyone take my SBS to prove their authority if they steal my work. If you like this water mark you can download it here http://i53.tinypic.com/svngya.jpg.
To make new layer, hold Shift+Ctrl+N, name is as Water mark or whatever you like, and put the transparent water mark from png file to the desired position on your image.
This new layer will be visible in all frames, since the default option is New layers visible in all frames as you can see in Step 3. You can deselect it, so it only visible in the frame that you currently select.

Step 10

Now we have the other version, which is smoother and more secured.

View the animated GIF.

Step 11

Increase the quality of the animation
If the created animation is not desirable to you, you can improve it by a tool called Tween effect.
Back to Step 1 you can find the location of this tool as I marked.
Tween effect will make the transition between two frames and you can define how gradual it changes from the first frame to the last one.
In my case, I will make more 2 transition frames between each two frames. To do that, keep Ctrl or Shift and select any two preceding frames, then click on the Tween button.
I selected the number of Frames to add is 2.
I did the same thing to other frames, finally I have 100 frames in total (correspondingly, the file size will be increase considerably).

Step 12

Since there are too many frames now, I reduced the delay time to 0.3 seconds per frames, except the last frame will stay for 2 seconds.
The improved animation looks much smoother now.
However, the file size is quite large now (around 900Kb)

View the animated GIF.

Step 13

To reduce the file size without considering each parameter, you can let the program optimize it for you by defining the file size.
To do that, after you Save for Web & Devices, the new box appear (as in Step 7) you can find a small button on the top right, click on it you can see the box as in the figure here, now choose Optimize to File size...
In my case I chose 700Kb, then press Enter, the program will calculate the optimum setting for you.

Step 14

Here is the animation with pre-defined size (700Kb). Obviously the quality was reduced, but it's better that many people can see it with different bandwidth.

View the animated GIF.

Step 15

Here is the last product. To make it more interesting, I made more 3 frames (it's not important with this tutorial, just my personal improvement). The first two frames are the two layer I applied the motion blur filter on my final image, to make it disappearing, and the last frame is just the black background with some words.
Hope you understand well my tutorial and be able to make awesome tutorials for everybody.

You are done............