Home »

Creating professional animated ad banner using photoshop

Friday, November 12, 2010
Many of us waste our money for the blog expenditure. Advertising is one of the most popular way to uplift our business. Especially, we use graphical banners in advertising platform. The most attractive, professional looking, and animated banner can impress any person that who see the banner in your website. You can make your own professional banner with out wasting your money even you are not skilled in banner designing.

We can design our banner in photo shop, it just take about 20-30 minutes. This step by step tutorial helps you to create professional, attractive and animated banner.


So, let's start with new document. We will use standard sized banner which is 468X60px. File > New. Type width 468px, height 60px and Resolution 300px.

I am creating banner for hacktutors.info So, you have to include your own site brand.

Use the text tool to create your site logo.



Now, we use Ellipse shape tools and create round shape to give a proper looks on the right hand side of the banner.


Give it some color by applying Gradient. Layer > Layer Style > Gradient Overlay.


Apply Inner shadow and Drop shadow as default option. But, you have to change both opacity in 25%.


You can also use white color gradient in background. Add the rounded corner shape tool and created a shape just below your logo for the tag line. Appliy a gradient layer style with the following colors.


Also, apply 2px white color stroke. Layer > Layer Style > Stroke. Then, type you website tag.



Now, you banner is ready to animate. Use Type Tool and type a text for the first frame.



Now, hide that text by click on eye icon.



Again use Type Tools and write your second line. Second line must be in same line as you type in first line.

Now, banner looks like this:



It is ready to animate. Click "Switch to ImageReady" button below the left tools box. But, it is not available in Photo Shop CS4. For the CS4 users, Go to Windows > Animation.

Click the new frame icon. It is also use to duplicate the last frame.



Select the second frame and select the visible text layer and press up arrow twice. It will move the visible text 2 pixel upward.



Now, Duplicate the last frame. Move the text down about 10px. Or press 10 times down arrow. Set the layer's opacity 70%.



Duplicate the last frame. Move the text layer by 12px. Or press down arrow 12 times. Set the layer's opacity 40%.



Again, Duplicate the last frame. Now, hide the current visible text layer and make other text layer visible.



Move the text layer down at same position as other text was. And set the opacity 40%.



Again, Duplicate the last frame. Move the text by 12px upward by pressing uparrow 12 times. And set the opacity 70%.



Duplicate the last frame. Now, move the text by 6px up by pressing up arrow 6 times. Set opacity 100%.



Duplicate the last frame. Move the text by 2px down by pressing down arrow twice.

At the bottom of each frames, you will see "0 sec.", this is the time between each frame. We have set all of these to "0.05" OR "0.1", any, depends on how fast you want it.

To make it good, try to put time to "0.1" to all frames except first and last frame. You have to put "2.0" seconds in the first and last frame time. And it will looks like this:



And finally your banner is ready,


Now at last, Save it for the web with suitable banner resolution.

You can design your own banner by showing your result different from this. This is just an example for you.

So, how is it? Hope this was not so difficult. Feel free to give your suggestion and your opinion. If you are confused in any step, then you are most welcome to ask me any question via comment. You can show me your result after you have done :)
Tags: , , ,

Comments[ 0 ]


Post a Comment




/