Alexis Wilke | snapwebsites
Working on a new website now... If you've not seen it yet, check out and next check to send faxes from your browser (although, I'm still working on it!

Considering doing banner advertising for your Snap! Website?

Oct 27th 2010 at 12:31 AM

Thinking of creating a banner ad for your Snap! Website or other website? Will you need to hire an artist to do all that work for you? Artists are likely to create a banner that looks 100% like an ad, and those are most likely not clicked by anyone. On the other hand, a banner that looks like text merge with its surrounding and look like it is part of the website where it is shown. So? Why not create it yourself?

I use many free tools to create and manipulate my graphics. All are at least available under Linux, and many also run under Mac OS/X and MS-Windows. The first I want to mention is 10 years old OpenOffice. It's not only free, it also creates files that are easy to share between applications. Oh! And it's owned by Oracle so it should be good quality, don't you think?

OpenOffice is a suite with many tools. At this time, we want to use the Drawing feature. This one lets you place text and graphics on your screen and move them around until you love the way your banner ad looks like. This makes it one of the best tool I know of to create banners composed of multiple graphics.

Drawing your banner

Once you've downloaded and installed the OpenOffice, open it and create a new Drawing document. At first you have an empty page on the right and a small version of your page on the left. The small version is part of the navigation system. You may create new versions of your banners as time passes and it is a dead good idea to keep the old one in the same file as a quick reference.

Sample banner ad for Snap! WebsitesThe objects used to create your ad are found at the bottom of the page (see the icons?) I generally use rectangles, stars, arrows and text. And when I want a logo or some other image, I import that from a file.

In my example I used a rectangle to show the edges. If allowed by your ad publisher, create ads without any edges so they better blend with the rest of the pages. Remember that most pages on the Internet use a white background.

Did you notice how I used an underline and blue to pretend that the text is a link? In the end it is part of an image so the whole image is a link, but that way it looks like regular text in the website where the banner appears.

With OpenOffice, you can insert text on all the shapes, including arrows. However, to properly place your text, you want to use the text feature:

OpenOffice Drawing Add Text Icon

Click on that icon, then once on the screen and start typing. The text appears right there in a box. You can edit it later to make corrections by clicking on it to reselect it (you may have to double click.) OpenOffice also underlines words with a red wave when it can't find them in the dictionary helping you fix your English a bit.

Two more important things: your banner is probably going to be much larger than you expected. Unless you have a really big monitor, the drawing area is not likely going to be shown at a 1:1 scaling factor (at least, not by default.) You have to remember that because you are including text and you do not want to rescale text, ever!

Transforming your Drawing in a High Quality Image

Once you are ready to create the actual banner, you need to save the result in an image. Of cours, it's possible to grab a screenshot, but when you have many words not found in the dictionary, used limit lines (to define an area or a position to align different objects), or whatever else, then your screenshot will include ugly artifacts.

Instead, I suggest that you use the Export feature. That way you get your picture with all the best possible anti-aliasing features used which makes the result look a lot better. To that effect use the Export ... option found in the File menu. In that window, choose PNG as the file format. DO NOT USE JPEG! Text based graphics look really bad when compressed using the JPEG scheme.

One interesting option when exporting: the software offers you to save the Selection. This is a good way to only save the banner (assuming you have all sorts of other things on your page.)

Voilà! You now have a high quality image! Yet it's probably the wrong size...

The Gimp

There is another tool, it is called ...

... to continue reading, please checkout my blog on Snap! Websites and don't forget to click the Facebook Like button at the top! Thanks guys!

Please to comment
Oct 27th 2010 at 1:41 AM by snapwebsites
Ha! Macs are a bit pricey though... saving on software is a good idea. 8-)
Oct 27th 2010 at 12:42 AM by stephaniebeth
Good idea! Open office is a great alternative program, and I plan on installing it on my Mac when I get one.

sign in

Remember Me

New to IM faceplate? join free!

Lost Password? click here