[Photoshop Tutorial] Animated Loading image

[Photoshop Tutorial] Animated Loading image - Printable Version

+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Tutorials (https://sinister.ly/Forum-Tutorials--78)
+--- Thread: [Photoshop Tutorial] Animated Loading image (/Thread-Photoshop-Tutorial-Animated-Loading-image)

Pages: 1 2 3 4

[Photoshop Tutorial] Animated Loading image - Coder-san - 05-22-2011

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

RE: [Photoshop Tutorial] Animated Loading image - DeffoN - 05-22-2011

(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

RE: [Photoshop Tutorial] Animated Loading image - 1234hotmaster - 05-22-2011

really nice coder! i learned alot of gradient :O

RE: [Photoshop Tutorial] Animated Loading image - PartyPaint - 05-22-2011

very nice tutorial, easy to understand, thanks!

RE: [Photoshop Tutorial] Animated Loading image - Shadow Hunter - 05-22-2011

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?

RE: [Photoshop Tutorial] Animated Loading image - PartyPaint - 05-22-2011

(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-designers-mega-pack.html

RE: [Photoshop Tutorial] Animated Loading image - 1234hotmaster - 05-22-2011

(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-designers-mega-pack.html

since that is surveyed ill post the download link:

Spoiler: Download[link=http://www.filesonic.com/file/864662911/DesMegaPack-by-Wapmaniac.zip]Here[/link]

PS: tnx alot for the pack pwnisher Smile

RE: [Photoshop Tutorial] Animated Loading image - Coder-san - 05-23-2011

(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.

RE: [Photoshop Tutorial] Animated Loading image - Jacob - 05-30-2011

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

marry me?<333

RE: [Photoshop Tutorial] Animated Loading image - Jacob - 05-31-2011

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]