How to create a glowing sphere of GIF animation in Photoshop CS5

In this tutorial, I will create a simple sphere of animation GIF as stories and pulses of light for use on the web. With this tutorial, you'll have the chance to see how easy this process is and make the adjustments for future projects.

I start with the choice of a new document in Photoshop setting my Web preset. I will mine name Web sphere.

Under the rectangle tool, you will find the ellipse tool. Choose the color of your sphere using shaders or the color picker, then while pressing the SHIFT key, click and drag to create a circle. Double click on the name of the layer and rename this layer Orb.

Then, we will change the appearance of our sphere by adding some effects. Click two times on the the layer, and then choose inner glow. Under the structure section, double click the color square to open the color picker. Here, you must check the box only Web colors. I chose the white as my color. Then, choose source Center and increase the size of the subject to Midway and modify the range to about 60%.

Now, we can add an inner shadow to create depth. Here, we can change our opacity of the default to about 35%. I put my distance at 5px and my size to 13px, but you can adjust yours depending on the size of your sphere.

Now we're somewhere. Then, I duplicate the layer, so that I have two of the same. Hide the first Orb, rename the second a Bright Orb and in it we double click on the inner glow effect and increase the resistance. I changed my size to about 1/3 this spread of light on a large distance. Under filter, render, Lens Flare, I choose 85% for brightness and type of lens 50 - 300 mm Zoom left and the place of light close to the Centre of my orb.

We are now ready to animate. Make sure you that you have the animation Panel open, by going to the window, then click on the Animation. Below, you will see the animation Panel. In the bottom right of this Panel, we want to click on the button that takes us to the image by image animation.

We start in frame, so we want to display only the original Orb at this stage. Hide the Bright Orb and show the Orb. Now to add a framework we are going to click once on the image 1 and then click duplicate a selected frame.

This will give us two frames with the same Orb. Now, click once on frame 2 and hide the original Orb in your layers panel and show the Bright Orb. Once more, we will click on duplicate button selected Frame, and here we will hide the Bright Orb and display our original Orb. This will give us the three points in our transition and create a nice effect loop.

This is the easy part. Click on frame 1, hold the SHIFT key and click on the image 2 and click Tween button.

A dialog box will appear, and here, we select managers how to tween. I chose 5. Leave the other settings as they are and hit OK. Now, PS takes a frame and fades in the other, but it is not what we want. We want to beautify our first orb in our next orb. I do this by selecting each frame between our two original images and by increasing the opacity of the layer of Orb at 100. In this way Bright Orb overlays the original Orb of layer-Layer and causes beautify, not just melted in.

Now do us the same on the last 2 images by selecting, interpolation, them and changing the opacity of the layer of Orb at 100, reversing indeed our lightening effect. Make sure that set you the calendar at the bottom of each picture on the amount desired time between steps, I chose to 0.1 sec.

Finally, we will save this file as an animated gif file! Go to the file menu, select Save for Web and devices. If necessary here, you can change the size of the image or on which we have. Make sure that the type is GIF, and click Save. We have created a very simple brilliant web sphere of animation gif for use on your Web site.

Joshua Bulman is a time full web designer and specialist of referencing for a company that provides custom USB drives via the web market. He enjoys reading fiction, write anything and discover new technologies.