Use Adobe Photoshop Elements to Create an Impressive Animated GIF in 5 Simple Steps

Whether you are a social networking nut, or a seasoned artist, making an animated GIF using Adobe Photoshop Elements is an easy and visually striking project. In this tutorial I am using Adobe Photoshop Elements 6. The GIF you will learn to make is a simple color cycle, however, the concept can be used to make other simple web animations. The finished product will be a black and white image over a colored background that cycles in a rainbow effect through the colors and loops perfectly.

Step 1- The Animated GIF Foreground

You will need to prepare a photo for the animation foreground. First, import a photo into Adobe Photoshop Elements. An ideal photo should have one item, or person, that will be cut out to be the focus of the GIF. This picture should convert well to black and white.

First, using the selection tools cut out your object and delete the background. If the picture is of a person or a complex object this could take a little while. This step is the most time consuming part of creating the animated GIF.

Next, convert the image to black and white. This can be done by going into Adobe Elements "Enhance" menu, then the "Adjust Color" menu, then select "Adjust Hue/Saturation." Take the saturation bar down to -180.

Then adjust the brightness and contrast if necessary. The goal is to simplify the image slightly, and make it appear more dramatic. However, you still want to be able to identify the subject.

The last part of preparing the foreground image for the animated GIF is to apply the "Glowing Edges" filter. If you would like to use any other Photoshop Element filters by all means please express your creative freedom. Just make sure the image remains in grayscale.

Photoshop Stock Taking Tip-

If you are taking the photo try to take pictures with a backdrop that is of solid color and not predominate in your subject. For example if your subject is a baseball take the photo in front of a black curtain or comforter. If your subject is your black and white dog, try to take the picture with a blue or green backdrop. This way cutting out the subject of the photo with the selection tools will be easier once you import it into Adobe Photoshop Elements.

Step 2- Designing the Animated GIF Background

The next thing that you will need to do is create a background. This will be the portion of the GIF that will be animated. The background is going to cycle through the colors of the rainbow. The easiest way to create one is to choose a gradient. I chose a noise gradient. If you have Photoshop Elements 6 the exact gradient that I used was "Deep Sea." I then applied a blur effect to the layer. I also adjusted the lighting so that it appeared lightest around the subject of the GIF. Again, feel free to use whatever Photoshop filters you feel comfortable with or you could draw something.

The trick to this background is you want it to be a vague and interesting pattern. The background should also relate to or affect the impact of the foreground image.

Step 3- Creating Frames for the Animated GIF

Now that you have reached this far save, and save a new copy. In the new copy you want to merge the image so it is a grayscale subject on top of a colored background. After the layers are merged you should only have one layer left. This layer and the additional layers you create from here on out, will be frames that will be part of the animated GIF.

When you create the frames you must consider a few things. If your image is too large or if you have too many frames you will not be able to save it. Standard internet size is 72 dpi. My image was roughly four inches, by four inches, at 72 dpi, and I had 21 frames. Each frame I named 180 through 0 and then 0 through negative 180 in increments of 20. Naming the Adobe Element layers helps with the next step, when it is crucial to keep them straight.

Step 4- Change the Hue

Now we go back to the same menu in Adobe Photoshop Elements that we used to change the image to black and white. Go into the "Enhance" menu, then the "Adjust Color" menu, then select "Adjust Hue/Saturation." This time we will be altering the Hue level. Using the layer names as a guide, change each layer's Hue value to match the layer name. Each layer the hue will vary by 20. Once this is complete from top to bottom the layers will appear to be gradually changing in color. When these frames are viewed in the animated GIF they will cycle through the different colors.

Step 5- Saving an Animated GIF using Photoshop Elements

The last step is to save, first save a backup copy in case you need to go back and adjust anything. Now save as, select "CompuServe GIF (*.GIF)" from the "Format:" pull down menu. Then check the box under the "Save:" section that says "Layers As Frames". Once you select that another menu will open, and you can select "Loop" and change the rate at which the frames display I chose the fastest setting. Once you save you can upload your file to various websites such as myspace. This is a fairly easy animation to make, but the effects are impressive.

Other Possible GIF Ideas-

Using this same process you could easily create an array of different projects. Try another GIF where only a subjects eyes are colored, and then they would appear to change. Another, possibility would be to make the background of the GIF black and white, and make the foreground in full color.

I hope that you enjoyed this simple tutorial. If you are interested in making a Mandala in Adobe Photoshop Elements please check out my tutorial here: http://www.associatedcontent.com/article/1840547/photoshop_mandala_tutorial.html?cat=15