Drawing Simple Banner (Exclusive Tutorial)

Having your own website is a good thing - but a website does not automatically make money for you. You will need to work on your website to develop it, and then monetize it. Exchanging links and banners is a very important step. Learning to create the banners is very useful knowledge. In this tutorial I will tell you how to make a simple banner for your website to link to another website.

Using the example of www.freetemplatesonline.com and its banner for www.webmasterscollection.com I'll demonstrate the whole process.

To start you must choose the banner's size, color, appearance, content, and maybe animation for attracting your visitors' attention.

In choosing the size, I have used dimensions in accordance with the width of the right column. The height was chosen by adding the spce needed for the three elements of the menu. The colors were chosen, blue and white (blue - the color of the header, white - the main color of the site). The banner should look like a blue button with a small image and text inside it. The picture must represent something associated with the website. In this exercise it can be a clipart or collage made from various websites. The text should contain the main contents of the site: Free Templates, Resale Rights Products, Web Scripts, Photos, etc. I think the animation should be as simple as possible - just rotatory text, so that the website doesn't appear pretentious, just informative.

So let's begin step by step.

Open ImageReady and create a new document, size 183x60. Select all and fill it with blue (#225286). Then make border selection, invert the selection and fill it with white (#FFFFFF ). After that Contract 1px and fill it with another blue (#317FBE).

Now find the picture and set it into the button. I've found this collage with some webpages

Drag it onto the document area and place it on the left side leaving some space around it.

And now the text. Write one piece of the advertising text on the right. Just name it " 100000+ Clip Arts " . Use the following settings:

Well, it isn't really impressive. So, select the upper part with the numbers and set the size font at #18.

The first shot is ready. Duplicate the layer with the text and change the numbers and lettering. Write "60000+" and "Web Graphics". Hide the layer with the previous text.

Create the layers the same way with the numbers and texts.

"10000+ Web Templates FREE!!!", "350+ Resale Rights", "1000+Web Scripts", "8000+ Stock Photos", "3000+ Flash Utilities".

So there are 7 layers with the texts in total.

Open the animation window. The first shot: leave visible the first layer with the text, picture and background. Then click Duplicate Selected frame. Hide the first layer in it and the show the layer with the second variant. Go on till you've gotten all 7 shots with the different texts on each.

Now set Delay time at 0.8 sec.

Still doesn't look very good. I'll add some time for the text to disappear. To achieve this, select the animation shots, duplicate each of them and hide the texts. Set Delay time to 0.05.

Now the banner is ready. One other trick I'd add. For the most important text I would set the Delay time a little bit longer. It is almost unnoticeable, but makes a big impression. So select the first shot with "10000+ Web Templates FREE!!!" and set Delay time for it 1.2. Enjoy the result.