Need a loading icon? go Ajax style, its cool
you will need Photoshop and Image ready installed to complete this tutorial.

loader2

Here’s how we do it.

MAKING THE SHAPES >>

Open Photoshop and start with a blank canvas about 100 x 100, once you have learnt how to do it you can change the size to suit your need.

Make some rules on the canvas at 50px on Y and 50px on X (so we know the exact centre of the image).

now, with your canvas set up, lets start drawing.

Grab your rounded rectangle tool (U) rounded i have set the radius to about 10px for now, and draw 3 vertical shapes, just touching top to bottom.

Like so

image1

Note: the middle shape will be removed, its just for a measurement.

Duplicate all 3 shapes and turn them on a 90 degree angle, Edit > Transform > Rotate and set the rotate option at the top of the screen to 90 rotate .

Alright! now you can get rid of centre ones.

Ok so grab the 2 horizontal shapes and rotate them again at 45 degrees, then grab the new shapes and duplicate them and rotate 90 degrees.

after you have done that you should have this.

basicx

ADDING THE GRADIENTS >>

So now we have got our shapes we need to add a gradient over the image to create the fading effect as it turns around.

Hit D to set your colours to black and white and swap your foreground to the white.

Make a new layer and grab the gradient tool gradient and set it to angle gradient, and foreground to transparent.

gradset Like so…

Make your gradient from the centre of the canvas to the outer edge.

image2

Rotate the gradient layer (edit > Transform > rotate). Move the gradient just around enough so the line is in between 2 shapes.

duplicate the gradient layer and turn off the old layer by hitting the eye next to it.
eye

on the new layer, rotate it again to sit in between the next shape.

continue these steps until you have come all the way around to the start.

LIGHTS, CAMERA, ANIMATION!!! >>

Ok so now we are ready to hit up Image ready and start animating it.

Shift + Ctrl + M will take your image straight to image ready, if its not already set up, you will need you layer palette and your animation palette. These can be found in the Window menu at the top.

NEXT!

So you should have all your layers from photoshop and an animation dialogue box on your page as well as your image. imageready

turn off all your gradients besides the first one, and to animate the picture all you need to do is hit the duplicate current slide button on your animation box, turn off the current gradient and select the next one in line. Do that until you have one slide for each gradient made. and hit play on the animation box and watch her go!.

Save optimised as and that’s all there is to it!

Pretty easy huh!

loader

Hint for next time >

once you have all your shapes in place, flatten them into one layer and select them all by Ctrl + left click on the layer thumbnail and then add a radial gradient to it from the centre.

Advertisements