Create Web Animations in Photoshop CS3

“How do I create banner ads and other animated Web graphics in Photoshop?” I hear that question frequently, along with the response, “You used to be able to in ImageReady, but Adobe got rid of it; you can’t make animated graphics in Photoshop CS3.”

It’s true that ImageReady is gone, but Photoshop CS3 took over ImageReady’s role as Web graphics animator.

To prove it, I’ll show you how to create an animated banner ad that uses two types of animations: motion, in which one or more objects move, and transformation, during which one or more objects change shape, size, color or are replaced with other objects.

  1. Choose File > New to create a new document.
  2. Choose “Web” from the Preset menu and “Medium Rectangle, 300 x 250” from the Size menu (Figure 1). Photoshop will fill in the rest of the settings, including a white background color. Even if you don’t want a white background, let Photoshop create the Background Layer now to save you the step of turning a filled standard layer into a Background Layer later.
  3. Figure 1. The New Document dialog creating a Medium Rectangle ad.

  4. Name your PSD in the New Document dialog. I’ll name mine “Ad Medium Rectangle”. Click OK to create the new document.
  5. Open the Layers panel from the Window menu. You’ll see a locked Background layer, which, if you kept the default, is white. If you’d like a different background color, use the Color panel to mix up the new color and the Paint Bucket tool to pour that color over the white area. I’m going to skip that because my ad will use a background image I’ll import shortly.
  6. Save your ad as a PSD.
  7. Now you’ll create an object that stays the same shape, size, and color, but moves from one side of the ad to the other.

    Go to File > Place and navigate to the location of the object you’d like to insert. My object is the client’s logo, Logo.ai. Because my image is an Illustrator file, Photoshop prompts me to choose a means of cropping it in the Place PDF dialog. I’ll choose to crop to the “Art Box” — the area of the actual artwork. If you place a JPEG, TIFF, PNG, or other raster image format, Photoshop will skip the Place PDF dialog. Either way, Photoshop inserts the graphic in the center of the artboard, scaled to fit within it (Figure 2).

  8. Figure 2. A placed graphic ready for positioning and resizing.

  9. Scale the object as needed using the control corners and holding Shift to maintain proportions while resizing.
  10. Position the motion object in its starting place. In the case of my ad, the Acme Corporation logo will actually begin outside the image area, below the bottom edge (Figure 3). Note that I also placed a background image, rather than using a solid color Background Layer.
  11. Figure 3. The client logo will begin its motion animation from off screen.

  12. Now begins the actual animation. From the Window menu, open the Animation palette. It will initially display a single layer (Figure 4).

    Figure 4. The Animation palette.

    Photoshop CS3 Extended has two modes — frame animation mode and timeline animation mode. For this project, stick with frame animation mode. If your Animation palette isn’t already in frame animation mode, choose the Convert to Frame command from the flyout menu in the top-right corner of the Animation palette.

  13. At the bottom of the palette, click on the Duplicates Selected Frames button (which looks like a New Frame button) to add a second frame in the Animation palette.
  14. In the Layers panel, select the object to be moved, then drag the object to the place where its animation should end (Figure 5). In my case, the logo moves in a single, straight line; even if you want a more complex path, like an S-curve, leave it as one straight line for now. Later, you can repeat these steps to create several straight-line motion paths that make the complete route.
  15. Figure 5. Frames 1 and 2 showing the object at its motion start and end points, respectively. If you click on Frame 1, the moved object will snap back to its start position; click on Frame 2 to see it immediately move to the end position.

  16. To smooth the motion, you’ll use tweening, which automatically creates frames in between the beginning and end points. Click on Frame 1 to select it, then click the button the Tweens Animation Frames button to the left of the Duplicates Selected Frames button. The Tween dialog appears (Figure 6).

    Figure 6. The Tween dialog.

    To move the “Acme Corporation” logo up into my ad smoothly, I’ll tween With “Next Frame” (Frame 2), add 10 frames, use All Layers, and to consider only the “Position” parameter. When I click OK, my animation increase from two frames to twelve (Figure 7). Click the play button at the bottom of the Animation palette to see your tweened animation.

    Figure 7. Tweened, my motion animation is now 12 frames. Click on the figure to see it full-sized.

    You may notice that your animation stutters, each frame causing the object to seemingly step, pause, and step again (Figure 8). The solution is probably not to add more tween frames, but to adjust the frame delay rate.

  17. Figure 8. My animated banner ad thus far.

  18. At the bottom of each frame, you’ll see a number followed by the word “sec,” which indicates the seconds each frame displays. Because I’m moving the logo to catch the viewer’s attention before showing any ad copy, I want the animation to be fast.

    Click on the first frame in the animation on the Animation palette. Then, while holding the Shift key, click on the last frame to select all the intervening frames. Now at the bottom of any frame, click on the tiny black arrow directly above the current frame delay rate. Up pops a list of common frame delay rates (Figure 9). Choose one or select Other and input your own delay rate in seconds, tenth of seconds, or hundredth of seconds. Your choice applies to all selected frames instantly.

    Figure 9. Adjusting the frame delay rate with the pop-up menu. Click on the figure to see it full-sized.

    After setting the frame delay rate on my first 11 frames to “0 sec.” and the delay on the last frame to “10 sec.,” the logo moves smoothly across my ad and pauses before repeating (Figure 10). That’s all the motion animation I’m going to use in this ad. Now it’s time to focus on the ad copy using transformation animation.

  19. Figure 10. With appropriate frame delay rates, my animated banner ad is looking better.

  20. Because this is a banner ad with a significant amount of advertising copy, I’ll use an object replacement technique to show a single line of copy, pause, swap in a new line of copy, and repeat until everything has displayed.

    Go to the last frame on the Animations panel and create and select a new frame after it. This ensures that you don’t accidentally change the first part of the animation.

  21. On the Layers panel, click the New Layer Group button, which looks like a folder. Name the new group something that makes sense for your ad; in my case, that’s “Copy.”
  22. Inside the “Copy” group, create each of the individual layers of replaceable elements. If, like my ad, yours will use the replacement technique to display multiple lines of copy, create a new text layer for each frame of text to be displayed. You should wind up with a Layers panel that looks something like mine (Figure 11).

  23. Figure 11. My Layers panel after creating the replaceable text layers.

  24. Choose your first line of copy or first layer to display, and then toggle the eyeball layer visibility icon beside each of the other replaceable layers to hide them. Your document should now include all the static elements — for instance, the logo, background, and so on — and one of your replaceable layers.
  25. Return to the Animation palette. Set the frame delay rate on the current frame to be long enough that the average viewer can read or absorb the frame content. (I chose “2 sec.”) You can always change the frame delay rate later.
  26. Create a new frame, freezing the last one with the first replaceable layer active.
  27. On the new frame, hide the first replaceable layer and show the second (Figure 12).
  28. Figure 12. Creating my next replacement frame, I’ve hidden the layer containing the first line of copy and shown the second.

  29. Repeat the last two steps until you’ve created frames to display each of your replaceable layers. You can also create tweens for the object replacement frames so that, for example, one line of text fades into the next. With my ad I’m going to leave them without tweens, keeping a sharp, clean replacement between them.
  30. Now consider how many times the ad should loop. You can change the number of times an animation repeats with the dropdown menu at the bottom-left of the Animation palette (Figure 13). Click the arrow beside the menu to expose a list that includes options “Once” (the animation plays once and then stops), “Forever” (the animation loops continuously as long as it’s on somebody’s screen), and “Other,” wherein you define a specific number of repetitions before it stops and stays on the last frame.
  31. Figure 13. The Animation palette’s repetition menu. Click on the figure to see it full-sized.

  32. Now, preview the ad by returning to the first frame in the animation and clicking the Play button. How is the timing? Does everything move smoothly and quickly enough to be read and absorbed by the viewer? Is there any stuttering? Nothing sits on screen for too long, does it? Is there sufficient pause at the end of the animation before it repeats?
  33. Once you’re satisfied with your ad in Photoshop, it’s time to do a little cleanup and export it to the final GIF for live testing.

    From the Animation palette’s flyout menu, choose Optimize Animation to open the corresponding dialog (Figure 14). For most files, you’ll want to check both Bounding Box and Redundant Pixel Removal. In both cases, the result is a smaller file that downloads faster and plays more smoothly in a Web browser.

  34. Figure 14. The Optimize Animation dialog. Click on the figure to see it full-sized.

  35. Choose Save For Web and Devices from the File menu to open the Save For Web and Devices dialog (Figure 15).
  36. Figure 15. The Save For Web & Devices dialog. .

  37. If you’re not there already, switch to the Optimized tab in the top-left corner. The Optimized view shows your ad as it will appear online, and it updates to reflect changes made on the right side of the dialog.
  38. Begin with a Preset beneath the Save, Cancel, and Done buttons in the top-right corner. For an animated banner, begin with the “GIF 128 Dithered” preset. That will set the file format to GIF, the number of colors to 128 (out of a possible 256), and the dithering option to “Diffusion.” It will also set other options, some of which we’ll need to change.
  39. Try reducing the number of colors in your animation. Often you can produce a beautiful graphic with only 64 or even 32 colors and not notice the difference — except that the file size will drop dramatically. Speaking of which, you can preview the expected output file size in the bottom-left corner of the Save For Web & Devices dialog (Figure 16). The file size and expected download time at the specified speed will update in real time to reflect any changes made to the optimize and export options.
  40. Figure 16. The Save For Web & Devices dialog presents a preview of the file size and approximate download speed of your graphic as you set the optimization and export options.

  41. Make sure that the Transparency option is checked, or you won’t derive any benefit from the Redundant Pixel Removal optimization you did in step 24. I also recommend changing the Color Reduction Algorithm dropdown from the default “Selective” to “Perceptual.” Either will seek to maintain a consistent color palette across all frames of the animation, but “Perceptual” tries to make the output colors look more like the input colors. Leave the rest of the options at their defaults. Figure 17 shows the settings I’m going to use to export my Medium Rectangle ad for Acme Corporation.
  42. Figure 17. My optimize and export settings.

  43. Click Save and choose a location and filename for your animated banner ad.
  44. Once the GIF is saved to your hard drive, save the original document in Photoshop to embed the optimize and export settings within the file.
  45. Upload your ad to a Web server and view it in your browser. Download and animation speeds can vary significantly between files viewed in Photoshop on your local computer, and on a Web server and viewed through an actual Internet connection. Return to Photoshop to make any adjustments in frame delay rates or optimization and export settings.

    In Figure 18 you can see my finished ad, tweaked and tucked, optimized and ready for insertion.

    Figure 18. My final animated Medium Rectangle ad.

    Congratulations! You’ve just made an animated banner ad in Photoshop CS3!

Pariah S. Burke is a design and publishing workflow expert bringing creative efficiency into studios, agencies, and publications around the world as principal of Workflow:Creative. He is the author of Mastering InDesign CS3 for Print Design and Production (Sybex, 2007) and Illustrator CS2 @Work (Sams, 2005); the former trainer and technical lead for InDesign, InCopy, Illustrator, Photoshop, and Acrobat to Adobe’s own technical support team; a freelance graphic designer with 20 years experience; an accomplished online publisher and WordPress expert; and the publisher of the Web sites Quark VS InDesign.com and Designorati. When not traveling, Pariah lives in Portland, Oregon, where he writes (a lot) and creates (many) projects and publications that empower creative professionals.

Tags
Posted on: June 22, 2008

6 Comments on Create Web Animations in Photoshop CS3

  1. Wow, this is a cool tutorial. What I have now is CS2, and it still has an imageready, which i dont use. I havent installed CS3 yet coz i guess i need to upgrade my PC first to P4. And will happen very soon, in a few months. Its is nice to here that CS3 can make animated images like this. Cant wait to upgrade to CS3!

    Home Based Business Books.com

    Where REAL People Can Find REAL Information To Make REAL Money

  2. this is how I always make my animations but as soon as I save them they become pixely they look great in PSCS3 but not after I save.

  3. Thanks so much for this!
    Lori

  4. From the Animation palette’s flyout menu,

    no explanation where this is.

  5. Hi thanks for this helpful tut….I just finished my first ad and it looks great..:)

  6. SUPER THANKS TO YOU!!!its pain in my ass on how to save it…thank you soo much ^^ thaks for the tutorial….super cool~~!!

Leave a comment

Your email address will not be published.


*