Home

Banners For Beginners (Part 3) Creating Banners

Welcome to Part 3 of this Banner Tutorial, which is all about creating banners for your website!

If you recall from Banners For Beginners (Part 2) - Choosing Banner Making Software, you now have an idea for a good banner that will really make your website shine, and you've acquired some software that will let you translate your idea into reality.

Now what?

Well, now it's time to actually start creating your banner.

Firstly, you need to create a new, blank banner (or image) of the required size. This will usually be a menu option called File / New, just like many other software programs.

Next, you will want to make sure that the background colour of the overall image is set, typically using a Flood Fill tool (if you didn't select the required colour when you created the original image). You also need to be aware that not all colours that are available in your software will display exactly the same on all browsers; there is a subset, of 216 colours, that are deemed "safe" (i.e. they should always look the same), and if the exact shade is important to you (e.g. for branding reasons), then you need to bear this in mind.

Thirdly, you need to start adding the various components, starting with the graphical elements, and then inserting whatever text you want last of all.

And here's a useful tip: keep all of the components that you use as separate images, and save them, because you never know when you might need them again (e.g. to create a different sized banner).

What happened?

This may sound obvious, but you'd be surprised how many websites fall foul of this, but please make sure that your colour choices lead to a banner that is readable (i.e. the colour of the text and the colours on which that text sits provide sufficient contrast).

You will want to add each individual element on a separate "layer", as this will allow you to manipulate your banner in various ways (e.g. you can alter the order of the layers, so that different components end up on top or below others, you can alter the transparency of layers - as in the banner on this website -, you can move layers around without affecting other parts of your banner). If you don't do this, you will find that editing or changing banners is unnecessarily difficult.

Here's another tip learned the hard way: many software packages will allow you choose text styling such as font, font size, bold or standard, etc., but if you subsequently edit the banner, you won't necessarily be able to find out what you used, so, always make a note, in a separate text file, of the settings you used (e.g. Times News Roman, size 24, bold).

One last thing, before you can publish your banner. Many popular software packages (e.g. Adobe Photoshop and Paint Shop Pro) can save images in their own proprietary format that will retain, for example, the separate layers. So, you should always save your image in this format first, because if you want to change it later, you'll be very glad that you still have the separate layers that you can change, move, delete, etc.

(If you are creating an animated banner, you will need to create a separate image for each "frame" of the animation, before you then use the animation software to "stitch" them together to produce the final, animated banner.)

Only when you have saved your banner image in the software's native format can you then save it in a web-suitable format. But which one should you choose?

• GIFs are better for images where there are large areas of the same colour, as they will require less space and therefore display faster, but they shouldn't be used for complex images (e.g. photos), where the storage requirements are much greater. Also, if you are creating an animated banner, this may be your only choice.
• JPGs (sometimes known as JPEGs) are sort of the opposite of GIFs (i.e. they are better for more complex images). However, the disadvantage of JPGs is that they do lose a bit of detail when you compress the image. (Compression is a facility in many graphics packages that will allow the image to take up less disk space, and therefore load more quickly, at the expense of some quality / fine detail.)
• PNGs, which are a relatively new format that was mainly designed for use on the Internet, but you need to be aware that not all web browsers (i.e. some of the older ones) will display such image types.

All you need to do now is upload it to your website, probably using an FTP program, or to a banner exchange service.

There's just one more thing I'd like to talk about, and that's what size to make your banners. To find out more, read Banners For Beginners (Part 4) - Banner Sizes.

About The Author:

Mark Farrar has been building websites since 1997, both for personal and business use, and is the co-founder and webmaster of www.WealthyTeddy.co.uk, incorporating www.AllKindsOfShiznit.com, amongst many others.

Please visit our Store Front Links, where we have a range of special product selections for you. homefocuscatalog Get Organized at Home Focus Office Depot Office Depot Weekly Specials Relax The Back Relax The Back Office Chairs Sharper Image Innovative Gadgets at The Sharper Image Travel well this year - Get Sharper Image travel gear! Tech Depot Tech Depot Weekly Specials TigerDirect.com Tiger's Storefront

Find Great Deals Today! Printers Scanners Memory PDAs UPS Monitors Cameras Networking Software Desktops Notebooks

Copyright 2010 © AllKindsOfShiznit (Technology4U) from WealthyTeddy