[Coder-san]

[Photoshop Tutorial] Animated Loading image

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.

---

Step 2

Now choose Custom Shape Tool.

---

Step 3

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

---

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

---

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.

---

Step 6

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

---

Step 7

Do exactly as instructed in the image below.

---

Step 8

Do exactly as instructed in the image below.

---

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.

---

That's it. I hope you like it.