Step one:
Open Adobe Photoshop and create a new document, the file size does not specifically matter but the closer it is to the size of the animation the better. Resolution should be set to 72 DPI and I've gone with document size 4 X 4 inches.
Step two:
In this tutorial we will be using a circle and chaning the color from green to yellow and back to green again. Use the marque tool and create the shape. The first layer I will rename "A", and the color will be color number #007a3f, but in reality the color does not really matter. Next create new layers for each of the "frames" of your animation, this animation will have four layers, name them accordingly A, B, C, and D.
Step three:
On layer B change the color of the circle to a lighter more yellow shade of green, I used color #79c419, the easiest way is to keep the original selection selected throughout the entire tutorial to change the color on each layer. The third layer, layer A, will be the middle frame and will be yellow, I used color #f8e507. Layer D will be the same color dot as layer B either duplicate layer B or use the eyedropper tool to get the each shade. By doing this the final animation will transition smother. These will be the only layers in the animation.
Step four:
Now its actually time to animate. In the window menu click on the animation button.
Once the animation window is open use the drop down menu and choose "make frames from layers"
This will create new frames for animating from all layers within the document. This is where our animation comes from, essentially a gif animation is a flip book, hiding and showing invisible layers in a sequence.
Step five:
This is the acutal animation process. With your newly created frames, you need to set the time delay between each frame. For this tutorial we will be setting the delay to .2 second intervols, which can be found on any of the individual frames. Select all frames be selecting the first frame and holding the shift key and selecting the last frame, and then changing the delay in the drop down menu. To create a loop set the drop down menu on the far left side of the animation screen to forever instead of once, and oh boy! We have an animation!
Step six:
This is the last and final step. Saving your image for the web. In the file menu select "save for web & devices" make sure to save it as a gif or else the animation will not work at all. It should look like this.
