تسجيل الدخول اعربي

دروس الفوتوشوب 

[!] Please Wait animation

For a serious interface project, I needed to create a nice Please Wait animation. Here is the result - I think it turned out quite nice. Below you'll find that it  is very easy to do.

1

Start with new document, let's backgound color be white. Important - document should be square (not required but will help us later).

2

Select Shape tool (U) to draw a little circle on top of document. You can of course use any other color from blue.

3

We want to have many circles within one shape layer. First we need to duplicate this circle. To  do so, drag it down holding ALT key.

4

Nice! We have a shape layer containing two identical circles. Now we need to align them relative to each other and to document. First, select both circles using shape selector tool (A). You will notice that buttons on top toolbar are enabled. Click the Align Horizontal Centers button. Next, select Layer 1 (white background), link it with shape layer (notice the chain link icon next to shap layer), then select Move tool (V) and again, click Align Horizontal Centers button. The result - our shapes are perfectly aligned!

5

We need 12 circles, but we only have 2 now. Duplicating shapes is super easy - select them (dont forget about shape selector tool, A key), copy (Ctrl-C), Paste (Ctrl-V) and rotate (Ctrl-T). After you hit Ctrl-T, you will get some input fields on top toolbar. Find Angle field, and enter 30.

6

Now we need to make this shape fade". For this

8

It will be gradient layer with the following settings: - white - to - transparent - style: angle - angle: 75 (well, 77, nevermind :-)

9

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.

10

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.

11

Create new frame, then make next layer (layer 2) visible. Then, uh, repeat 12 times :-)

12

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.

13

pstut-8-14

14

← Metal Cant Sleep: Making of →

تعليقات {70}

CubidoN منذ وقت طويل
Wow COOOOL!!!

apon منذ وقت طويل
i am gay

abee02 منذ وقت طويل
DUDE! ok maybe im a newb but u seriously need to make the tut a little clearer! (if thats' even a word!) i got seriously confused at the gradient part. i made the circle and everything but after that, with the gradient thing u just lost me!

Oleg منذ وقت طويل
What i meant in last post is that you should use last balls with the same opacity. Also complete circle with balls. Don't reduce balls to empty space. There shouldn't be empty space. It will reduce flickering.

Simone منذ وقت طويل
Thank you very much, it's been a great help! (Y)

Ingielu منذ وقت طويل
Where have you been all my life? ;-) I love what you've done here. Made it easy to understand. Keep up the good work! (Y)

iMP منذ وقت طويل
Êëàññíî ... ýòî æå êàê íàäî äóìàòü, ÷òîáû äî òàêîãî äîäóìàòüñÿ :)

zilchjr منذ وقت طويل
great

adoh منذ وقت طويل
Now we need to make this shape "fade". For this, we will use Fill layer. Menu Layer -> New Fill Layer -> Gradient.???? Ok I can not do this...actually I did but the whole page , change the color not just the Circles.. :( anybody can help me plzzzz ?? thanks

prashant منذ وقت طويل
Its really great, thanks.

Swapnil منذ وقت طويل
:-D I am really happy and enjoyed Thanks a lot, Nice work (y)

Paulino منذ وقت طويل
Excelente! the tutorial was great! :-D(Y)

dave منذ وقت طويل
You can also use an adjustement layer for the gradient, this way you can change the balls anytime without having to do all the work all over again...

Jules Manson منذ وقت طويل
I love this animation. I will create one but perhaps a bit smaller. Do you have a javascript for MSIE and Firefox that will make this image disappear once page has completed loaded? If so please add to this tutorial and/or email me at sahidsteinberg@aol.com.

1deg2kol منذ وقت طويل
Thank You for taking the time, really good examples....

Mansoor_nazari منذ وقت طويل
(Y)Wow. tanks we want more...!!

Ditza`H منذ وقت طويل
Well it kinda' looks like the Firefox "please Wait" (upper right corner), but the tutorial is great. 10x a bunch dude!

pwnerer منذ وقت طويل
N tahts ql (Y)

Pilou منذ وقت طويل
Yeaah thank you very much for tips ;-)

Artem منذ وقت طويل
Класс! Думаю будет отлично смотреться на мобильнике в качестве screensaver'а!

EricRed منذ وقت طويل
Àáàëäåòü. Êòî áû ìîã ïîäóìàòü, ÷òî âñ¸ ãèíåàëüíîå ïðîñòî.

amit منذ وقت طويل
Simplicity at its best ; great stuff man thank u

Cool منذ وقت طويل
Coool!!

ds منذ وقت طويل
thanks it was really helpful!!

El Tigs منذ وقت طويل
I commend you for your genuine contribution in making the internet a positive and knowlegable experience gained with pleasure. Well done and do keep up the good work. Tigi.

yeah منذ وقت طويل
nice, really cool 8-)

shannon منذ وقت طويل
Ican't make heads from tails from this site.ir sux :(

marcel 28 يناير 2008
Great tutorial Thanks!

Tuncay Türk 5 مايو 2009
Thank you so much!

cmmx 28 سبتمبر 2009
great

pepsiyong 29 ديسمبر 2009
It's will be hard, because I don't understand

Masoud 2 أكتوبر 2010
Many thanks dear author ! :)

Владимир 16 يناير 2011
Эту же анимацию можно сделать с одним слоем. При этом в каждом из 12 кадров ставим в Стиле слоя Наложение градиента. Градиент конический черно-белый. Режим наложения - Screen. Для каждого кадра градиент смещаем на необходимый угол (около 25º). Оптимальная длительность кадра - 0,15 сек.

Moony منذ وقت طويل
No you are gay

WeDe منذ وقت طويل
Woow, that's perfect ;-)

guoshuang منذ وقت طويل
i love this artilce.nice!

Mitul منذ وقت طويل
This is Mitul from Www.DesignWebGraphic.Com - This is a nice t utorial.

Razorfold منذ وقت طويل
Excellent man :)

Oleg منذ وقت طويل
Last balls look flickering. Flickering is not pleasant. To avoid this flickering effect, just add more balls to complete the circle. Also would be better if instead of gradient for entire image you use different balls with reduced opacity. It will look more professional. Otherwise it is a pretty good idea. Keep up good work! :)

Nico from Italy منذ وقت طويل
you are great man!

secret say منذ وقت طويل
nice to know

rainier منذ وقت طويل
great! :-)

ctenhxbcax منذ وقت طويل
Hello! Good Site! Thanks you! oenbeiccrje

egx منذ وقت طويل
anladın sen onu

Rahul منذ وقت طويل
simple & awesome. Thanks!

budewa منذ وقت طويل
no comment, it's too good.

MaKo منذ وقت طويل
a ne proshe li sdelat' zagoguliny s gradientom i povrashat' ee v imageready? Namnogo menshe telodvijeniy :)

Sergio منذ وقت طويل
W?O?W......that was great man keep working (Y) :-) :-D

d5bup3WRs1 منذ وقت طويل
Hi! Very nice site! Thanks you very much! BmoK3a39cg

Christoph منذ وقت طويل
Thank you for that really nice example. have joy to write new tutorial :-)

Jen منذ وقت طويل
Thanks so much for this clear and lovely tutorial! Your efforts are appreciated.

Charlyk-Marlyk منذ وقت طويل
i don't like it very much. maybe it looks great on those PC but default mac bars are better(N)

rushdy0974@yahoo.com منذ وقت طويل
thanx what to explain really great

vlad gerasimov منذ وقت طويل
To Ditza: and the Firefox animation is in turn looks very much like Aqua (Mac OS X) ! So the roots are deeper...

Anonimus منذ وقت طويل
Cool. Êðóòî! (Y) Where did you learn it? Ãäå òû âûó÷èë ýòî? :-S

opus285 منذ وقت طويل
I like spheres, and the glassy look. this is the first round progress bar I have see.. totally like it.

Vitaly منذ وقت طويل
Просто Отлично!

Amoo منذ وقت طويل
Pretty Cool, guy! Thanks 4 ur teaching. good tut. I am gonna try it.!!

Amoo منذ وقت طويل
Pretty COOL ,dude. thx 4 ur teaching, and a nice tut. cool .

Famme منذ وقت طويل
Privet vlad! Otlichnaya robota! I really enjoyed this Tutorial. Have a nice day. Poka.

PS User منذ وقت طويل
Great tut man. thanks!

EmpireMW منذ وقت طويل
Amazing! :-)

kymera منذ وقت طويل
very cool and useful i feel so much better about doing things in ImageReady now :-)

Almo منذ وقت طويل
Hey Thank you very much !

shannon منذ وقت طويل
Ican't make heads from tails from this site.ir sux :(

Cyrus Poonawala منذ وقت طويل
Thanks for this amazing tut!

## 12 سبتمبر 2008
Thank you for this great tutorial. Could you have a logo tutorial also. Great job. Keep up the good work.

miele 10 يوليو 2009
>> To do so, drag it down holding ALT key. dont forget to select the "path selection tool" (A) and NOT the move tool!! otherwise you'll get 2 layers.

Ivo Dojchev 3 يناير 2010
Да! Просто отлично!

Hasib 18 ديسمبر 2010
CooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooL

Show all comments

إضافة تعليق

1 2 3 4 5 6