In this article I will show you how to create banners with multiple background colors that blend into each other.

First visit the banner creator at CreateBanner.com and select the banner size of your choice. Then scroll down to the background color choice and select "gradient color".

That will give you two color selection boxes, one for the upper background color and another one for the lower background color. As default they two colors are gray and white, which is kind of boring.

It's easy to select the background colors to use, just click on the colors you want and the banner will be updated with the background color you clicked on . If you know the HTML code for a color you would like to use just fill in the color code in the boxes under the color tables. That will update the background on your banner to use the color code you selected instead of one of the pre-defined in the color table. This option is great if you already know the color code, or if you want your banner to match your company colors or web site design.

By playing around with the color tables you can create some nice and "interesting" backgrounds for your banners. Just look at the examples I created:

What kind of backgrounds did you create?

Post from: CreateBanner.com

How to use multiple background colors

How to tweet about your banner

Inside the banner creator when you've successfully saved your banner you simply just click on the Twitter icon.

A special link (a really short one) will be created thanks to our partnership with 2ve.org and you'll be taken to the Twitter homepage where you can fill in a message to acompany your banner.

Once you've tweeted about your banner anyone of your followers can follow the link to CreateBanner.com to see your banner and to get the needed HTML code. They can't change the banner or copy it to the editor, but they can use it on their homepage for example.

How to email your banner

When you've saved your banner you can send it to someone by email. By using the email icon in the toolbar you'll be taken to the email form:

Once you've filled in the email addresses and a short message to your friend, you can send the email. There's no need to include the link to your baner since that's done automatically.

Post from: CreateBanner.com

How to spread the word about your banners

It's really easy and you can add borders on all banner sizes. In the banner creator tool you just change "No border" to the size you want on your border:

One pixel is the smallest border you can have and 15 pixels the thickest border possible. When we use borders on banners we usually use just 1 or 2 pixels, but if you're creating a big banner (for example 728×90) a thicker border could look nice. Since it's so easy to change border size, we recommend you to try different sizes before you decide.

When you're happy with the size of your border then it's time to select a border color. Select the color you prefer in the color selector table by clicking on the desired color. As default the border color is black, but that may not always work out great depending on the background colors on your banner. Black may also be too dark for your banner.

If you can't find a color you like you can also write the HTML color code value directly into the text box to use that color instead. For some example color codes, please have a look at html.xaviermedia.com.

This is how the banner we've created during this tutorial using a 4 pixels border and #6699FF as border color:

Post from: CreateBanner.com

Use borders on your banners

Select a banner size

The first thing you need to do is to select a banner size. We got the most common sizes you your need, but we're planning to increase the number of sizes in the near future so if you got suggestions please let us know.

The most common size for banner exchanges is the 468×60 banner and the most common sizes for blogs and blog banner exchanges is the 125×125 Medium Button 3.

When you've selected the size you want, just click on the "create banner button" to go to the next step.

Write your text

Click on the banner where you would like to start writing your text. You may add up to 15 lines of text per banner by just clicking where you want your text to start.

For each line of text you can select a font, font color, size, angle and many more settings. You can also use the checkbox to add shadow to your text if you like.

If the banner is not updated with the changes you do hit the "Update preview" to redraw the banner.

When you're done with the first line of text you just click on the banner where the next line of text should start.

Banner colors

You can select to have just one background color (solid) or you can choose two colors that will blend into each other (gradient):

When you select the color you can either click on the color tool to select a color, or you can write the HTML color code in the text field. Easiest is of course to click on the color tool box. If you've selected gradient color as background you will have two color toolboxes so you can choose which colors should blend into each other.

This is an example of a banner with solid background color:

And this is an example of a banner with the above background color blending into a white color (gradient):

Border

You can add a border to your banner too is you like. First you select the size of your border (in pixels) and then you select the color you want on your border. The color selection tool is the same as above so if you know the HTML code for the color you want you can fill it in instead of clicking on a color.

Save your banner

When you've created a banner you want to use on for example your web site, Myspace page, in your blog or in a banner exchange you press the "Save banner" button. You will then be taken to the HTML code you need to use your banner, or if you like you can save the banner to your own computer and upload it to your own hosting account but more about that in a later tutorial.

Good luck creating your banners!

Post from: CreateBanner.com

How to design a banner for free