Considering doing banner advertising for your Snap! Website?

Alexis Wilke's picture

Whenever someone thinks of creating a banner ad for their Snap! Website, they think they need to hire a graphics person to do all the work. Truly, if your banner looks 100% like an ad, it is likely to not be clicked very much (unless you have something that's anyway really hot and always generates clicks...) On the other hand, a banner that looks like text being part of the website where it is shown has a greater chance of success. So? Why not create it yourself?

I use many totally free tools to create and manipulate my graphics. All are available under Linux, Mac OS/X and MS-Windows. The first one is OpenOffice which is now 10 years old. OpenOffice is not only free, it also creates files that are easy to share, contrary to Microsoft Office which has been creating proprietary file formats. By the way, it is owned by Oracle so it ought to be good quality!

OpenOffice is a suite of tools. There is even one to write Math Formulae... But I won't talk about that one today. At this time, what we want is the Drawing feature. This one lets you place graphics on your screen and move them around until they are arranged exactly the way you like it. This makes it one of the best tool to create mostly text based banners.

Drawing your banner

So, once you downloaded and installed the software, start OpenOffice and create a new Drawing document. At that point you have an empty page in the workbench area (on the right) and a small version on the left. The small version is used to navigate between different versions. You may create new versions as time passes and it is often a good idea to keep the old one in the same file for reference.

Sample banner ad for Snap! WebsitesThe objects used to create your ad are found at the bottom of the page. I generally use rectangles, stars, arrows and text. And when I want a logo or some other image, I import that from a file. All of those features are available as a button at the bottom of the page.

For the example1 here I used a rectangle to show the edges of the banner ad. If possible, create ads without edges so they better blend with the environment (note that most pages use a white background.)

Notice how I used the blue color and underline to pretend that the text is a link. 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 in a box. You can edit it as much as you want by clicking on it later to reselect it. OpenOffice will also underline words with red when it can't find them in its dictionary.

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 shown at a 1:1 scaling factor. You have to remember that because you are including text and you do not want to rescale text2.

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. Although it is possible to take a screen grab, if 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 screen shot probably won't be practical since it will include all of those artifacts3.

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 better. Go to the File menu and use Save As ... to at least save a copy of your work as a Draw Document if you hadn't done so already. Then use the Export ... option, also 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 important aspect 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 things on your page.)

Now you have a high quality image on your hard drive! However, it probably has the wrong size.

The Gimp

The Gimp Spash Screen of Version 2.6There is another free tool, it is called Gimp and is an advanced Photoshop like tool. No! We're not going to learn too much with this one. One single trick today: how to crop your banners to the right sizes.

Cropping Images4

As you will see, your exported image is either a full page, so really big, or it was already cropped as small as possible around your Drawing banner (it will depend on the options you use when exporting.) Either way, it probably isn't the exact size you need it to be.

From the Gimp you want to do the following (that's the easiest I know of):

  • Load the banner image you just saved (File » Open)
  • Create a new image with the exact sizes for your banner (File » New...)5
  • Now go to the banner image you created and hit R or click on the Rectangle Select Tool (top-left icon in the Toolbox window,) when you hover the mouse over the image it should appear as a + sign
  • With the + sign click at the top-left and hold the left mouse button, move to the bottom-right corner of your ad and finally release the button (see result in the figure below)
  • Type Ctrl-C or go to Edit » Copy, now your ad is in your clipboard
  • Go to the white image you just created and hit Ctrl-V or go to Edit » Paste
  • The image will be centered for you, however it often won't be at the right position, go over the image, left click, hold the button and move the mouse, the image follows
    WARNING: If the image from the clipboard doesn't fit your banner, then it was created too big in the OpenOffice Drawing tool. Although you could take a shortcut and resize that image here really quick, remember that it won't look sharp if you do that. It is better to adjust the ad in OpenOffice and you'll have all the right sizes in there for next time!

Banner ad sample with dashed lines showing the area to be copied to the clipboard.
The Gimp draws dashed line around the area that will be copied to your clipboard

If you want, you can copy and paste different parts of your banner to test things in different positions6. This can be useful if you placed your logo a little too far and need to move it within the banner ad edges.

To erase an area, you can again select the area and then type Ctrl-X or go to Edit » Cut. This will fill the area with your background color and in effect erase that area of your image.

If you are an advanced user, you probably want to look into using layers. I'll let it to you to discover how to do that. It is not otherwise required. Although it is practical to quickly test different configurations, but it is an advanced subject.

Now, you want to save your new properly sized banner. Use File » Save and enter a filename. For instance "snap-banner-468x60.png" would be good in my case. Notice that

  • I use dashes to separate words, not space nor underscores, and
  • I use .png as the extension.

For the Internet, there are only 3 types of files you want to use JPEG, PNG and GIF7. Only PNG keeps the full resolution (loss less compression), the other two formats transform your image in some ways (lousy compression.) For images with text, DO NOT USE JPEG. GIF is a good way to compress your image more, however, you may lose some quality. Try it and look closely to see whether you detect too much blur.

If you do not add the extension, the Gimp will save your image in a .xcf file. This is fine, but only the Gimp can load those files. So unless you created layers and you want to work some more on your image later, just save as .png.

You're done!

  • 1. Click on the figure to see a 1:1 version of the image.
  • 2. Scaling the font used to render text is fine. Most fonts will work from about 6 or 7 points to 36 without much of a problem. Only good quality fonts will work with sizes larger than 36 points. However, once you transformed a banner ad or anything including text into an image and resize the image to a smaller (or worst larger!) scale, then the text gets blurry. Pretty much all image scaling will blur everything. For photos and other colorful images, it generally isn't a problem. For text, it makes it hard to read which for banner ads is not a good idea!)
  • 3. Speaking of artifacts, for fast drawing, all the anti-aliasing features available are not always used on-screen. So depending on your computer hardware you may not be seeing the best quality on your screen until you export your work as an image.
  • 4. As I mentioned in another comment, you want to avoid resizing. You only want to crop and position. This is why there is no talk about resizing images here.
  • 5. By default, the background should be white. You can click on the advanced option and choose the Fill with: Background color to make sure. The background color should be white by default, although you can change it by clicking on it in the colors in the Toolbox window.
  • 6. If you are using your banners for Google AdWords or the Yahoo! or Bing equivalent, you may want to create all the possible sizes of banners! That way you'll appear on all websites that may accept your keywords instead of just a very few ones.
  • 7. The SVG format is gaining a lot of traction these days, but so far I've not seen that as a choice for banner ads. Also BMP generally works, but it uses a pretty big footprint (large files) and is rarely used on the Internet.