Creating An Animated Web Banner in Photoshop & ImageReady
Learn how to create a simple animated web banner In this Lesson you will use the animation program that comes with Photoshop, (called Image Ready), to create ananimated banner, which is begun in Photoshop, then set up to animate using Image Ready.1. Open Photoshop and create a new document that is 468 wide x 60 pixels tall, and 72 dpi. You can use the preset size for this on the “Preset Sizes” pop-up menu.
Remember to use preset sizes to save time when you open a new document.
2. Get the “building.jpg” image open… you are going to use it in your banner.
3. Move the building.jpg image into the new banner document using your favorite method (ie. you may copy and paste it, or you can simply drag its layer name from the layer palette over the banner image and drop it in). The building.jpg appears in a new layer, but it is much larger. Close the building image.
Above, the building image has been moved into the new banner document by dragging the layer it is in (“background”) over and onto the new banner document. Note that this places the image in a new layer in the destination document. You can use this method to quickly move any layer from one document into another.
4. Use the “Free Transform” tool under the Edit Menu to size the building image so it fits at the left side of the banner you are creating.
Above, using the Free Transform tool, you resize the image of the building by clicking and dragging on a corner box (circled above). Hold down your shift key while you resize to keep the image proportionate (so you don’t stretch, or squish the image). Note also, that after the last step, the image to resize is in a newly created layer, and that this must be the active layer when you use the Free Transform tool.
5. Now create the first of two text layers by getting the text tool (“T” on the tool palette) and clicking in the empty space to the right of the building, “Have fun shopping”. Choose a type font, size and style so this fills the available space. Set you type in a dark red color.
Illustration above shows the text tool (T), has been used to type the words, “Have Fun Shopping.” The Character Palette is also shown with the type settings used: Comic Sans, Bold, 33pt, Dark Red color, and Italic style (secont button at bottom of palette is depressed to slant the text).
TIP: Note that using the Character Palette as shown above, gives you a number of type setting controls that are not available on the tool options bar (the row of controls that appears at the top of the screen with different options for each tool in Photoshop).
6. Duplicate the text layer — this saves production time since the type is already positioned and in the same style. You can duplicate the layer a number of ways using the menus, or dragging the layer name over the new layer icon at the bottom of the palette. Select the type in the new layer and type “in Victoria B.C.” Your finished banner is going to animate back and forth between the two text layers you have created. For contrast between the two type messages, set this second layer of type in a dark blue color.
Above, the new layer of type was created (shown with red arrow), and the words were typed in a dark blue color. The type is set in with the same parameters because the first layer was first duplicated, retaining the type settings you used in the preceeding step.
7. Open ImageReady (click the bottom right button on the Photoshop toolbar to go to it).
8. Once in ImageReady, you will work with the animation frame palette at the bottom of your screen to determine what appears in each animation frame, and the timing between frames.
9. For the first frame, turn off the second type layer (“in Victoria B.C.”) in the layer palette so it does not appear in that frame.
Above, Image Ready is open with our Banner in the foreground (labeled #1). Note that the second type layer is turned off (eyeball clicked off in Layer Palette — circled in red). This determines what will be seen on the first frame of your animation, which will be shown in sequence in the Animation Palette (#2 above). In the background, the original Photoshop document is still open, though it is greyed out to show it is inactive.
10. Now create a new animation frame by clicking on the new Frame button at the bottom of the animation palette. Turn off the first text layer (eyeball in layer palette), and turn on the second text layer.
Above, first a new frame for the animation was created by clicking the Duplicate Frame button at bottom of the Animation pallette — circled with arrow pointing to new frame. Then the first type layer was turned off (circled in red on the Layer Palette), and the second type layer was turned on so that the new frame shows the second message in blue type.
11. Create a transition effect between the two layers by first selecting both of them in the animation palette –hold down Shift and click on first one then the other. Then click on the “tweening” button at the bottom of the animation palette and type 3 for frames to add. Leave the other defaults as they are. Finish your tweening work by selecting the first and fifth frame (the original two frames) by clicking one, then command-clicking (control click on Windows machines) the other frame, then click tween again and add three more frames. This adds a new transition sequence between the “in Victoria B.C.” frame and the first frame — “Have Fun Shopping.”
After selecting the two frames in your animation, the tweening button is clicked (circled in red), which opens the Tween specifications control box in which you type 3 for the number of in between frames. On clicking OK, you will see three new frames appear which will make a smooth blend between the original two frames.
After you add the first three frames between the original two, you select the first and fifth frame, then use tweening controls to add three more frames. The new frames appear after the last frame, but since your animation plays in a loop sequence, they are in effect between the last and first frame.
You usually want to minimize the number of frames in an animation to make sure the file size remains small to download faster for those on slower internet connections.
12. Test your animation by clicking on the play button in the animation palette.
13. Your animation runs fast with no time between frames. Stop it by clicking the stop button on the animation palette. Select all of the frames and set a new transition time by clicking on the small popup arrow beneath one of the frames. Choose .5 (one half second). All of the frames should now show this timing beneath them. Run the animation again.
The Play Button on the Animation Palette (circled above), also serves as the stop button when your animation is running. Since he frames are initially set at 0 second intervals (shown under each frame), your animation runs too fast. To slow it down, first select all of the frames, then click on the small black triangle under any of the selected frames (red arrow points to one), to get a pop-up menu that allows you to set a slower interval — we choose 0.5 as shown.
14. Stop the animation. Use the Optimization palette to select a lesser number of colors for this image so you will have a smaller file size. Try 64, then 32 colors. 32 should look ok, and give you a smaller file size. In Photoshop 7 and higher, you can view your animation 4-up to compare different color number options and see how that affects download time. Choose “Save Optimized” under the File menu as”VicShoppingBnr.gif”, and quit from Image Ready.
The Optimization palette is used here to control the number of GIF colors used in the image — the lower the number of colors, the smaller your file size is for downloading.
TIP: When you don’t wish to view the Four-Up choices, return to “Optimized” view using the tab at the top of the screen. This view will always show you the results of any changes you make in the optimization palette.
Above, the “Four-up” view is selected using the tabs at top of screen (red arrow), so you can compare different optimization settings. Note that the bottom choice shows too few colors used, and so your banner does not display properly.
15. Back in Photoshop, save the master file for the banner as “BannerMaster.psd.” This retains the layers in case you wish to open and edit in Photoshop later. Close this file.
16. Open the gif file animation you just saved in Image Ready, and the Home Page design file you have been working on. When the Gif Animation file opens, Photoshop gives you the first frame only — change its Image Mode to RGB color so it may be moved into your Home page document to replace the black placeholder you created earlier. Throw away the previous banner layer and move the new banner into the best position at the bottom of your web page mock-up.
When you open the banner you must change its image mode to RGB (from Index), so you will be able to move it into your Home Page document which is also in RGB mode.
Above, after changing the banner file to RGB mode, it is moved into your main page by dragging its layer over the top of the destination image window (the page mock-up) and releasing it. This creates a new layer with the banner image in it.
17. Save these changes.
About the Author: Scott Frangos is a web developer, college instructor and graphic designer. He is Managing Editor for WebHelperMagazine, and is also writing two forthcoming books for Web Masters. He lives in Portland, Oregon with wife and partner, Pepper, and their three dogs: Wisdom, Spirit, & Steggman. © by Scott Frangos, Managing Editor of WebHelperMagazine.com. All rights reserved.
Next Art For Web Tutorial: Creating a Thumbnail Image in Photoshop