Step 1
a. Create a new Photoshop Document with dimensions of 200 x 100 px.
b. Create a new layer (Shift+Ctrl+N) and select the Marquee tool (M).
c. Set Style to Fixed Size in the option bar with a Width: 4px and Height: 20px: (As shown like in below imaged)
Step 2
Now just click on the canvas and a selection of these dimensions will be made automatically as 4 X 9 Px:
In The new layer, paint the selection with Black (#000000),
Step3
Now Duplicate The Layer . Select the Move tool, hold Shift and press the down arrow key four or five times – shift will move the layer in increments. We should now have two layers like so:
Merge the layers Select the two layers and press Ctrl+E to merge the layers. Now duplicate the layer and Goto Edit > Transform > Rotate to 22.5 Degrees, and holding down the Shift key, rotate the duplicated layer to 22.5 degrees again do the same until you get the following image .
Now we should have 9 separate layers .
step 4
Next, we will change the color for them.Starting with the first, open up the layer styles and add a color overlay of light gray (#999999). Go for zoom in for a better look. Now right-click the layer you just added a style to and choose Copy Layer Style, then proceed to Paste Layer Style on each of the other, so we have this:
Step 5
Now let’s open up the Animation Window by going to Window > Animation.
You should see something like this.
This is a timeline of our animation. Each frame shown in here will play in order for a set number of seconds.
set the frame to 0.1 Second.
We want to create different frames with different ‘spokes’ colored, in sequence.
So let’s start by changing the colors of the first spokes. Let’s change the color of the first three like so, fading from Black (#000000) to light gray(#999999).
We have our first frame. Now let’s click on the New Frame button and then the existing frame will be duplicated. Making sure our second frame is selected, let’s change the colors again – we can copy the layer styles if we want to move the colors along one spoke: You should notice that frame one remains the same and frame two will accept our changes. Now we only need to repeat this a few more time – one frame per spoke. Make sure you click on the New/Duplicate Frame button before changing the layer styles again!.
Once we’re done, we should have a timeline that looks like this:
We can click the Play button at the bottom of the Animation window to see a preview. If the animation is too slow, we can change the duration in the bottom right corner of each frame. This specifies the duration for each frame to be visible. Let’s try 0.1sec. Hold Shift and select all the frames in the window, then choose 0.1 seconds (or choose Other and try 0.05 – or whatever you want) on one of them. This will change all of them, because they’re all selected.
Step 7
To export, goto File > Save for Web & Devices. Choose GIF from the DropDown menu – 128 being the best quality. And the dither will be 0.
you can also preview it here as well, using the controls buttons near the bottom: Finally, this is what our Animated loading GIF looks like:
