Part 1

In this tutorial, i'll show you how to create a professional animated ad banner which you can follow and create your own banner to advertise your site. .

We will be creating a standard banner size, which is 468x60. So start a new document File » New, you can type in the width and height yourself, or you can select "468x60 Web Banner" from the "Preset Sizes" drop down options.

PS. If you want professional banner design, take a look at 20dollarbanners.com - they do great banner design work at affordable prices

The first thing we want to do is create a 1px border around the banner.

- So Create a New Layer and name it "Border"

- Press CTRL+A to select all. Then go to Edit » Stroke. Apply the following Settings:

Width: 1px. 

Color: Black. 

Location: Center. 

Blending Mode: Normal. 

Opacity: 100%

This gives us a crisp 1px border around our banner. Now, every other layers we create through the tutorial will need to be placed beneath this border layer on the layers pallete, this is to make sure the border will always be visible.

This gives us a crisp 1px border around our banner. Now, every other layers we create through the tutorial will need to be placed beneath this border layer on the layers pallete, this is to make sure the border will always be visible.

Now, the design of the banner itself is really up to you, the important thing about this tutorial is the animation technique which I will show you later, but you can read on if you want to follow this tutorial and make a similar banner to mine.

I will be creating a banner to promote tutorialwiz.com, so i'll include its logo for branding purpose. So I open up my logo and copy and paste it into my banner, and resize it down to fit the banner. Now I use the eclipse shape tools and create a large round shape to right. This is where my promotion text will go. You will need to make it larger than the banner size so it has a nice curve in the middle.

Now I want to give it some color, so I apply some gradient to it, go to Layer » Layer Style » Gradient Overlay. I used the default settings, with the following colors:

I also applied some drop shadow and inner shadow using all the default settings, just change the opacity down to 20%

I used the rounded corner shape tool and created a shape underneath my logo for my tag line. Applied a gradient layer style with the following colors.

Then I applied a 2pixel white stroke to it. (Layer » Layer Style » Stroke)

I also added a grey to white gradient to the background layer so it doesnt look too flat.

Now theres my banner design (yes, its simple, but thats all we need really..). Now comes the fun part. Animation.

To make the tutorial simple, I will rotate only between 2 lines of text, you should then get a fairly good idea of what to do, then you can apply it to create more text rotations.

- Use the type tool, and create your first text (one that will appear in the first frame.

- Now hide the text layer . then use the text tool again, and type your 2nd line of text, in the same place as your first text.

Now you should have the following in your layers pallete:

and the banner look like this:

Part 2