Professionaly looking animated progress bar
- By Vlad Studio
- Published 04/30/2007
- Animation
-
Rating:




OK we are done with the graphics, but how do we make it rotate? Very easy - instead of rotating entire graphics, we will only rotate the gradient.
Now we need to create another document, where each layer will represent one animation frame. After document is created (make sure dimensions are the same), return to original document. select all (Ctrl-A), copy merged selection to clipboard (Ctrl-Shift-C), switch to new document, paste (Ctrl-V), then return to original document again. Then, select gradient layer, rasterize it (layer menu -> rasterize), and rotate entire layer 30 degrees. Then, well, repeat 12 times :-) Result - a new document with 12 layers where each layer is the frame of our future animation.
![[!] Please Wait animation - Step 11](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-12.gif)
You can
save original document and close it. Then, jump to ImageReady (Ctrl-Shift-M) and hide all layers except layer 1. This will be our first frame. In the screenshot, frame delay is set to 0.2 sec, however, i found it too long and changed it to 0.1 sec later.
![[!] Please Wait animation - Step 12](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-13.gif)
Create new frame, then make next layer (layer 2) visible. Then, uh, repeat 12 times :-)
![[!] Please Wait animation - Step 13](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-14.gif)
Now we need to create another document, where each layer will represent one animation frame. After document is created (make sure dimensions are the same), return to original document. select all (Ctrl-A), copy merged selection to clipboard (Ctrl-Shift-C), switch to new document, paste (Ctrl-V), then return to original document again. Then, select gradient layer, rasterize it (layer menu -> rasterize), and rotate entire layer 30 degrees. Then, well, repeat 12 times :-) Result - a new document with 12 layers where each layer is the frame of our future animation.
![[!] Please Wait animation - Step 11](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-12.gif)
You can
![[!] Please Wait animation - Step 12](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-13.gif)
Create new frame, then make next layer (layer 2) visible. Then, uh, repeat 12 times :-)
![[!] Please Wait animation - Step 13](http://www.illustrateddesigns.com/img/VladStudio/tut6_PleaseWaitAnimation/8-14.gif)
That's all. Now you can preview the result (Ctrl-Alt-P) and save it (Ctrl-Alt-Shift-S). I hope these little tips were useful to you.
Author: Vlad Gerasimov
Author: Vlad Gerasimov
Spread The Word
3 Responses to "Professionaly looking animated progress bar" 
|
said this on 08 Nov 2008 3:42:03 AM CDT
Very efficent
|
|
said this on 17 Apr 2009 2:32:58 AM CDT
Hi Vlad, Really Great.. Appreciated.. Please, write more articles like this.. it would be really helpful for beginners like me.. (shakeel.22@gmail.com)
|
Author)