Many people over @ digitalpoint pay $10-20/a banner with animated text(which i also did till i figured out how to do it) and they don’t even realize that its a 5-10minute job. How does that sound? 20 bucks for 10minutes of work.

This is my first tutorial of this type(not GFX), i tried to explain it as clearly as possible, if you didn’t understand something feel free to ask in a comment.

First of all begin with selecting the banner size

Here are the most common standard sizes that clients require banners in:

Leaderboard (728 x 90)

Banner (468 x 60)

Button (125×125)

Skyscraper (120×600)

Wide Skyscraper (160×600)

Now that you decided which banner size you want to use create an empty photoshop document:

In this tutorial i will create a banner (468×60)

First of all you need to decide what base color you want your banner to have(the background, because everything will be made to fit the background’s color(fonts,gradients,styles)

By pressing SHIFT+F5 fill the background with the desired color(i used #1c1d1e)

On the left or right side of the banner put the client’s logo but make sure it doesn’t use more than 35-40% of the space( i created a fast text logo for this tutorial)

Next up add some colors to the banner(Add elements, use the gradients from dezinerfolio if your a newbie BUT DO NOT EXAGERATE!), if we just put the animated taglines the banner will look very empty.

Make sure the colors BLEND! if they won’t blend together your banner will look like a circus.

Also add as many taglines as possible to fill the space, or add renders to the banners(the best free renders resource is located at www.sxc.hu ) also make sure the render fits the niche, here i used a random render

As you see i used 3 taglines, group them then duplicate the group and rasterize it by pressing CTRL+E , hide the original group(untick the eye) .

Now its time to define the other 3 taglines and do the same(make sure they are in the same position as the first taglines were).

Now press the transfer to imageready button to transfer your document to Adobe Imageready.(by using this button all the layers/blending options will be transfered and opened in imageready - also the document will be cleared from photoshop)

Woohoo! If you made it this far than don’t give up because there is just a little road to go till you get your cool animated banner!

Remember when i told you to duplicate the tagline groups? Well this is the time when you will use them, but before everything go to Window menu and tick Animation option

The animation bar should appear in the bottom of your screen:

Now its time to play with the 2 rasterised layers(Tagline 1 group rasterised and Tagline 2 group rasterised)

For each layer apply a Motion Blur of 10 px and angle of 0 degrees by going to Filter menu -> Blur -> Motion Blur

The layers should look something like this:

By pressing the button next to the trash can in the animation bar you can create new animation layers.

1. In the first animation layer put the Tagline 1 group
2. In the 2nd animation layer put the rasterized and motionblurred Tagline 1 layer
3. In the 3rd animation layer put the Tagline 2 group
4. In the 4th animation layer put the rasterized and motionblurred Tagline 2 layer

You can do this by ticking/unticking the eye in front of the layers on each animation layer.

Now by pressing the arrow that points down next to “0 sec” for animation layer 1 and 3 set “1.4 seconds” and for others set “0.1 seconds”

What? Are you expecting more steps? If so i hate to tell you that this was the last step.

Here’s the final product:

And to repeat what i said at the beginning of the tutorial:

This is my first tutorial of this type(not GFX), i tried to explain it as clearly as possible, if you didn’t understand something feel free to ask in a comment.
If you are looking for professional banners at a very reasonable price i suggest you check out MinibannersZen