[Photoshop Tutorial] Animated Loading image

Coder-san · 05-22-2011, 05:08 PM

Hello people, today we'll be making an animated loading image.

Step 1

First start your new Photoshop document with a square dimension. Keep it big, we can resize it later.

[Image: nl5PQ.png]

Step 2

Now choose Custom Shape Tool.

[Image: oViu4.png]

Step 3

Find and choose Circle Frame (looks like a black "O")

[Image: gd1uy.png]

Step 4

Now create a selection to cover the whole document.
Click from top left corner, hold Shift, and leave cursor hold on the bottom-right corner.
Right-click and click Make selection

[Image: heS7e.png]

Step 5

Do exactly as instructed in the image below. You may change Gradient colours to any you like, but one of them must be the same as your background's.

[Image: PUYdV.png]

Step 6

Open Animation Panel. Change to "Frames" view if not already.

[Image: vw3bz.png]

Step 7

Do exactly as instructed in the image below.

[Image: pg3jb.png]

Step 8

Do exactly as instructed in the image below.

[Image: YDeuR.png]

Final Step

Go to File -> Save for Web & Devices.... Choose GIF preset, choose your desired dimensions and save to your desired location.
You will get a similar output.

[Image: Vfr2A.gif]

That's it. I hope you like it. Smile

DeffoN · 05-22-2011, 06:02 PM

(05-22-2011, 05:21 PM)The 7th Sage Wrote: Epic tutorial Coder san. Could you please add a text "Please Wait" will use it for hc. =]

:O Rly epic man Thanks !
too bad that i quit photoshop 2 mounts ago Sad

1234hotmaster · 05-22-2011, 06:09 PM

really nice coder! i learned alot of gradient :O

PartyPaint · 05-22-2011, 06:12 PM

very nice tutorial, easy to understand, thanks!

Shadow Hunter · 05-22-2011, 07:15 PM

hell awesome tutorial.Now i can do animation a bit i guess. one thing? where did u get so many custom shapes? :0 did u install them separately or they were already there?

PartyPaint · 05-22-2011, 07:59 PM

(05-22-2011, 07:15 PM)shadow hunter Wrote: hell awesome tutorial.Now i can do animation a bit i guess. one thing? where did u get so many custom shapes? :0 did u install them separately or they were already there?

i recommend that http://scriptmafia.org/multimedia/51646-...-pack.html

1234hotmaster · 05-22-2011, 08:59 PM

(05-22-2011, 07:59 PM)Pwnisher Wrote:
(05-22-2011, 07:15 PM)shadow hunter Wrote: hell awesome tutorial.Now i can do animation a bit i guess. one thing? where did u get so many custom shapes? :0 did u install them separately or they were already there?

i recommend that http://scriptmafia.org/multimedia/51646-...-pack.html

since that is surveyed ill post the download link:

Spoiler: Download

PS: tnx alot for the pack pwnisher Smile

Coder-san · 05-23-2011, 06:57 AM

(05-22-2011, 07:15 PM)shadow hunter Wrote: hell awesome tutorial.Now i can do animation a bit i guess. one thing? where did u get so many custom shapes? :0 did u install them separately or they were already there?

Click that small arrow -> All -> Choose "OK" on Replace dialog.

Jacob · 05-30-2011, 02:37 AM

you're a fucking beast at everything..hacking...coding..tuts...graphics.

marry me?<333

Jacob · 05-31-2011, 12:02 AM

So i did this..and did something wrong obviously... what was it?
if you could help, thatd be greatly appreciated! This was my first time ever trying to make a GIF. Thanks!

ps: your numbers don't add up? That or i suck at math...you cant subtract 22 from 90 until you get -90...the closest you get is -86. Nor can you add 23 to -90 and get 67, the closest you get is 71....So my math is wrong...your math is wrong..or i misunderstood what you were trying to say.

[Image: QJK8n.gif]