Create An Animated Background

Animated backgrounds are very useful for both websites and your personal computer screen. They add a bit of pizazz and interest to what otherwise might be just a dull monotone. While you can go online to download these animated backgrounds, if you have Photoshop and ImageReady, you can easily create your own personalized animation that expresses your style, or better conveys the purpose of your site.


1. Open a new document in Photoshop. Make the sure you set the size settings to suit your final purpose with the animation. If it is going on the web, you might want to go with 1024×768. But if you are putting it on your own desktop, use the same size settings you are using for your screen. Now go to the “Tools” panel, and select the “Fill” tool. With the foreground color set to what ever color you want, click on the canvas.

2. Change the foreground color to whatever color you want for the animated object. Now, in the “Tools” panel, select the “Custom Shape” tool. Go to the top and change it to “Fill” pixels, and then select the type of shape you want. In this example, it is a leaf.

3. Go to the “Layers” panel and create a new layer. Using the “Custom Shape” tool, draw a leaf on the canvas. Use the “Magic Wand” selection tool to select the leaf. Now go to the “Tools” panel and choose the “Gradient” tool. Then go to the top and and pick a gradient style you like. Now drag across the leaf to apply the gradient. Deselect the leaf. Click on the “Move” tool.

READ  Make A 3d Diamond Shape In Adobe Photoshop

4. Move the leaf about 10 percent of the distance across the canvas and about 5 percent down it. Now go to “File” and click “Save for Web.” Make the setting “JPG High,” and save this and the following images to their own folders.

5. Repeat Step 4 until you reach the far side of the canvas. Then, still using Step 4, have the leaf float back in the other direction, step by step, until it totally disappears at the bottom. Then close Photoshop.

6. Open ImageReady. Go to “File” and click “Import Folder As Frames.” Select the entire folder where you saved the images you made in Photoshop.

7. Go to the “Timeline” and make sure that the images are in the right order, since ImageReady sometimes mixes them up. If they need to be rearranged, you can click on the triangular drop-down menu at the corner of the “Timeline,” and cut and paste things where they should be.

8. Go to “File” and select “Save as Optimized.” Make the file type a GIF, and click “OK.” You now have an animated GIF you can use for your computer screen or your website.