GetEasyComputerHelp.com How to Create & Edit Banner Ads in Photoshop

This article covers step by step guide to animate a banner which has been created in Adobe Photoshop.

Note: To make the tutorial practical & easy to understand we have created a banner in Photoshop & Animated in ImageReady Click here to download the Banner.

After downloading the banner follow the steps given below :

Standard Banner Sizes

There are different banner sizes. Some of the sizes are given below for your reference.

Dimensions (in Pixels)	Type
468 x 60	Full Banner
392 x 72	Vertical Navigation Bar Banner
234 x 60	Full Banner
125 x 125	Half Banner Square
120 x 90	Button Banner
120 x 60	Button Banner
88 x 31	Micro Button Banner
120 x 240	Vertical Banner

In this example we will learn to & animate 468x60 Pixel Banner.

Download and open a banner in the Photoshop. (The banner is created using Photoshop & available for downloading with the article)

Note: In this example we have created a banner with different objects and text in separate layers. The color of the Layer Property has been changed for each frame; i.e., first frame in grey, second in light red, and so on.

Make all the objects & texts of the first frame visible keeping the rest as invisible.

Banner in Adobe ImageReady

After opening the banner in Photoshop Jump to Adobe ImageReady.

Choose File > Jump to > Adobe ImagerReady or click on Tools Palette Icon.

If the Animation palette is not visible, choose Window > Show Animation.

Select the first frame in the Animation Palette by clicking on it.

Make all the layers visible which are to be shown in this first frame while keeping the rest as invisible.

Click on the Duplicate Current Frame button in the Animation palette to create next frame.

Select the second frame in the animation palette. Make the layers visible which are to be shown in the second frame while keeping the rest invisible.

Similarly, to create the other frames click the Duplicate current frame button in the animation palette.

Go through the animation frame by frame, making different layers visible and invisible on each frame. Imageready will keep track of what's visible/invisible on each frame.

Note: In this example 13 different frames are created.

Play Animation

Click on the play button in the animation palette to preview the animation. The animation might be very fast as all the frames play at the same speed.

Time Frame

For adjusting the time frames click the time marker below the frames to display a pop-up menu under each frame. Adjust the time period for each frame.

For continous loop of animation select the "Forever" button from the animation palette.

	Selects a looping option to specify how many times the animation seqeuence repeats when played. For Example: Once, Forever, or Other.
	Jumps to first frame in the series of the current frame.
	Selects the previous frame in the series of the current frame.
	Stops the animation.
	Plays the animation in the document window.
	Selects the next frame in the series of the current frame.
	Tween command to automatically add or modify a series of frames between two existing frames.
	Duplicates current frame.
	Deletes selected frame.

Optimizing Banner

To optimize the banner, choose Window > Show Optimize

In the optimize palette you can adjust the settings according to the banner. To decrease the file size, set the color settings accordingly.

Note: Only the .gif format supports frame animation.

Testing it in the browser

To make sure the animation, text and the rest of the elements are properly placed, preview the banner in your browser.

Choose File > Preview In... (select your browser to preview your animation)

After testing the banner save the animation.

For saving the banner choose File > Save Optimize

Note: GetEasyComputerHelp.com assumes no responsibility for problems resulting from using any of these tips or web sites listed. Please read our full Terms and Conditions if you have questions.

Note:
GetEasyComputerHelp.com assumes no responsibility for problems resulting from using any of these tips or web sites listed. Please read our full Terms and Conditions if you have questions.