Get Our Free Ebook
Beginners Guide to HTML

  Tutorials Photoshop ImageReady Animation Loading gif animation

Loading gif animation

Create new document (Ctrl + N) with your desired width and height size. I will start with 200 x 200 pixels.

Creating element

1. Create new layer (Shift + Ctrl + N).

2. Rectangular Marquee Tool (M).

3. On the middle top of the new created layer, make a selection of long box like shown.

image 1

4. Smooth the edge of the selection by 5 pixels (Select > Modify > Smooth. Enter 5 for Sample Radius).

5. Fill it with black color or whatever the color you want (Shift + F5).

6. Deselect the selection (Ctrl + D).

7. Move Tool (V).

8. While holding Alt, click and drag the thick black line you just created to middle bottom of the layer.

This will duplicate the layer and move the object in that layer to your desired position.

image 2

9. Merge the two layers together as one single layer.

You can select multiple layers in 'Layers Window' by holding down Ctrl button. Then, right click on one of the layers to select 'Merge Layers'.

image 3

10. Duplicate the merged layer (Ctrl + J).

11. Free Transform the layer (Ctrl + T).

12. While holding down Shift button, rotate the layer so it looks like:

image 4

13. Press ENTER button when you done.

14. Repeat step 9 to 13. When you done, the picture will look like:

image 5

15. Merge the two layers as one single layer.

Creating gradient

1. Change your background and foreground color to default (D).

2. Switch your background and foreground color (X).

3. Goto Layer > New Fill Layer > Gradient...

4. Click on OK button.

5. Edit the gradient by double click on color bar

image 6

6. Choose the second preset

image 7

7. Change the location of the left Opacity Stop and Color Stop to 12%.

image 8

8. Change the Gradient Fill setting to the following:

image 9

9. Click OK button.

By creating Gradient Fill with Fill Layer, we can easily modify our gradient. All we need to do is rotate the gradient by changing its setting.

Creating the frames

1. Create new document (Ctrl + N). The new document has to be same size like your previous document.

2. We are going to create each frame of animation from previous document. So, arrange the window next to each other for easier navigation.

image 10
Click to enlarge

3. From previous document, merge the Gradient Fill layer and element layer by selecting both layer with Ctrl, right click on one of them and choose 'Merge Layers'

4. Select All (Ctrl + A) and paste it in new document.

image 11
Click to enlarge

5. Go back to previous document and pull out your 'History' panel if you don't have it on your screen (Window > History).

6. On 'History' panel, right click on 'Merge Layers' and choose 'Delete'.

image 12

7. Double click on Gradient Fill layer

image 13

8. Change the 'Angle' to 16.

9. Repeat step 3 - 8 until you have 8 layers in your new document.

image 14

Creating the animation

Now that we are done with our element, it's time to create the animation.

1. Jump to Adobe ImageReady (Ctrl + Shift + M).

2. In ImageReady, open 'Animation' panel (Window > Animation).

3. On the 'Layers' panel, hide all the layers except for 'Background' and 'Layer 1'

image 15

4. On the 'Animation' panel, change the 'Frame Delay Time' to 0.2 second.

5. Click on 'Duplicate Current Frame' button.

image 16

6. Back to 'Layers' panel, un-hide layer 2.

7. Repeat step 5 and 6 until you have 8 frames in 'Animation' panel.

8. Save Optimized As... (Alt + Ctrl + Shift + S).

Loading GIF Animation


Webzo Studio is a web design company located in the United States. Webzo Studio was founded in August 2005. We are a small team of designers that just love our job. The love of doing what we do is what makes us not doing our job as a job, but as an enjoyment.
read more about this author

subscribe to newsletter