Create an Animated Fake Progress Bar using PS and ImageReady

Creating a fake progress bar with JavaScript will be secondary method if you try this method once, because you need a fake one not a real.The way we are going to use now must be the easiest way. If you already know how to animate using Imageready then I am sure that you know how to do, if not then take a look at the image, here we shall call the blue boxes as Progress bar on the following steps though its a fake one. Now I am sure that you have figured how does it works. Lets start,

• Run Photoshop.
• Create a new transparent image (150x50px)
• Draw a small, blue box using Rectangular Tool as shown in the above screen shot.

You may change the color of the box according to your will.
Do not bother yourself by drawing new boxes each time, as it is loss of time and they may not be identical to each other, so use Alt+Left Click and drag forward to make identical boxes.

• After creating few such boxes, duplicate the image by right clicking on the title bar of the image as on the screen shot.
• Merge the layers of the duplicate image.(Use Shift+Ctrl+E shortcut)
• Now left the merged one and start working on the another one.

You may ask,"What working?"

The work is expanding your Progress bar, we need several more images for our Progress bar to complete, isn't it?

• Use Alt+Left Click again and drag forward to add other blue boxes to expand the Progress bar.

Following the steps up to here, I think now you are aware of the concept we are using. That is,"Expand the Progress bar > Duplicate the image > Merge the duplicated one > Expand the Progress bar again".
Now, your job is to expand the Progress bar till the end. Just use the concept above and remember each time you merge the image, the progress bar should be expanded a while, the expansion of the progress bar can be according to your will.(i.e. how speed you want your progress bar completed)
Let us consider, we ended the Progress bar with 5 different(merged) images as on the screen shot below.(click to enlarge)

 

• Create a new image of same size(150x50px).
• Now select Move Tool from the Tools window.(or press V)
• Drag and drop the merged images just one above another in ascending order.

Didn't get? Do it as below:

• First drag and drop the First step image.

Here the First step image is the first merged image of Progress bar.

• Again drag and drop the second one just above the first one....and so on.

It will form an individual image with several layers. Here the layers are the images of the Progress bar we created by merging the small blue boxes in previous steps.

Proceed to Animating
Congrats!! You successfully completed the steps in Photoshop and now its time to animate our Progress bar using ImageReady.

• Just click on Edit in ImageReady icon at the bottom of the Tools window.
• Go to Window and click on Animation.
• Click on the small arrow button at the top right side of the Animation window and click on Make Frames From Layers option.

You are done!! Click on the Play button at the bottom of the Animation window to check the result.
Does it works ?
If yes then, Go to File and select Save Optimized option to save the image.
If no then, Go to the top of this post and start reading again. Thank you.

Guest Post in PC Hacks