Make An Animation In Photoshop Cs4

Animated graphics can add a lot to a site.

When you are creating a website, it helps to add visually impressive graphics. This helps to draw the attention of your visitors to things you want them to notice, as well as persuade them to return. One thing that you can add that will catch the eye is animation. An animated banner or logo gives your site a truly professional appearance. You might expect that creating this animation would require specialized skills and software, but if you have a copy of Photoshop CS4, you can quickly create your own animated graphics.


1. Decide what you want your animation for and what information or images you want to include. Then storyboard out your ideas for your animation, creating a comic strip describing the action.

2. Load any images that you would like to use in the animated graphic onto your computer. For example, if you are creating a business website and want an animated banner, you could load a photo of your store or your staff.

3. Open Photoshop. Select “File” an click “New.” In the dialog box that pops up, make the pixel width and height what you want for your animation. For example, if you are making a banner animation, the average size for a banner is 468 x 60 pixels, so this might make a good choice. Click “OK.”

4. Use either the “Paint Bucket” tool or the “Gradient” tool to fill the canvas with the color or gradient you want to use as the background for the graphic. As an alternative, open the image you loaded in Step 2 and use the “Copy” and “Paste” functions under “Edit” to place it in the document as the background.

READ  Generate Thumbnails

5. Use the “Text” tool to add any fixed text you want in the graphic. Then select “Layer” from the menu and click “Merge Visible.”

6. Click on the “New Layer” icon in the “Layers” panel. Select either the “Pen” tool set, the fill, or one of the “Shape” tools to draw out a shape that you will animate. As an alternative, if you would like to have scrolling text in your animation, select the “Text” tool and use it to type in some text on the canvas.

7. Select “Windows” in the menu and click “Animation.” A timeline will appear at the bottom with one frame. Click on the “Duplicate” icon to make a second frame.

8. Select the first frame and move the contents of the second layer entirely off one side of the canvas. Then select the second frame and move the contents entirely off the other side of the canvas.

9. Click on the “Tweening” icon and in the dialog, add the number of frames you want in the animation. Click “OK” and the program will automatically create all the frames between the two you have, placing the animated item where it should be in each frame.

10. Select “File” and click “Save for Web or Devices.” In the dialog, choose GIF as the file type, click on “Animate” and set the “Duration” for the frames. Click “Save,” name your file and save it.