• Introduction
• Magic Code
• Banner Form Summary
• Mounting Your Banner
• Mount Form Summary
• Discarding Your Banner
• About the Banner Generator
• About RGB
• About Special Characters
• Details about Advanced Algorithms
• Frequently Asked Questions

Introduction

You can use The Banner Generator to create title banners for web pages, hyperlinked buttons, or banner ads. Simply fill out and submit The Banner Generator Form. After you submit the form, it will take about five to ten seconds for your banner to be generated.

You will see a page called "Banner Created." It will tell you the URL of your banner on our server, which is of the form:

http://engine.coder.com/creations/banner/tmp/banner_tmp_####.xxx

where: #### is the magic number of your banner, and xxx is the filename extension (i.e. gif).

After you create your banner, you may download the banner by holding down the right mouse-button (for PCs) or the mouse-button (for Macs) on top of your banner and when a pop-up window appears, selecting the "Save as..." option (for Netscape and Internet Explorer).

You may also select the [View Inline] link to view your banner inline on a colored page, the [Mount Your Banner] choice to mount your banner on a colorful banner blank or texture, or the [Make Another Banner] link to create another banner and erase the one you just made.

Use the following graphic to let people know you're Banner Generator - enabled.



To insert this, simply download this graphic, save it as saved-name.gif and put the following HTML code on your pages:
<ALIGN=LEFT><A HREF=http://www.coder.com/><IMG SRC=saved-name.gif></A>

Magic Code

For your convenience, when you create a banner, it will remain on this system for a day. You must download your banner because we cannot store banners for longer than a day.

You may download your banner at any time. You may also make new banners without destroying banners that you have stored on our system. Make a new banner by reloading The Banner Generator Form page. Doing so will assign you a new magic code.

However, if you wish to make modifications to the banner that you have created or you have already downloaded it, either use your browser's back facility to return to The Banner Form page, or select the [Make Another Banner] from the Banner Created or Banner Mounted page. This will keep the same magic code and you will write over the old banner.

Your magic code will be displayed on the bottom of The Banner Generator Form right below the Submit Banner button, and it is also incorporated into the URL of the banner after it has been created.

Form Summary

• Font Selection To accommodate having over one hundred fonts, the form has eight selection boxes for fonts. You may choose your font from any of these boxes. Important: Do not forget to select the radio button in front of the selection box that has the font you want to use.

  The Utopia fonts are copyrighted by Adobe. The Courier fonts are copyrighted by IBM Corporation. The Charter fonts are copyrighted by Bitstream Inc.

  For more information see the font examples.

• Foreground Color This is a short list of the possible foreground colors. You may get any color you wish using its #rrggbb hexadecimal code. To do this select rgb from the Foreground Color selection box and fill in the #rrggbb value of the color you want in the adjacent entry field. You may look at this Color Table to find the color you're searching for. Or, if you need to convert the color from a decimal (rrr,ggg,bbb) value, you can use the public-domain RGB-to-Hexidecimal Converter. You may make a banner with the foreground transparent by selecting transparent from the Foreground Color selection box.

• Background Color This is a short list of the possible background colors. You may get any color you wish using its #rrggbb hexadecimal code. To do this select rgb from the Background Color selection box and fill in the #rrggbb value of the color you want in the adjacent entry field. You may look at this Color Table to find the color you're searching for. Or, if you need to convert the color from a decimal (rrr,ggg,bbb) value, you can use the public-domain RGB-to-Hexidecimal Converter. You may make a banner with the background transparent by selecting transparent from the Background Color selection box.

• Image Format Select from the common image formats from the list of available formats. Of the available formats only gif and png (coming soon) allow transparent colors. If you need a image format not listed here please let us know.

• Rotation You may select how you want your banner oriented by specifying a Horizontal or Vertical rotation. Vertical orientation is rotated 90 degrees counter-clockwise.

• Font Size Font Size specifies how big your font will appear. Typical text is roughly 12 or 14. You may specify as big a size as you want, however excessively long banners will be truncated.

• Banner Text Here you may enter any string of characters. They will be interpreted using iso8859-1 special character escapes. See special characters for more information. This is the text that will appear in your banner.

• Border Here you can change the default border width that will surround your banner. You can change either the X or Y value or both to adjust the amount of space around your banner. You can use this to center small text in a wide banner. Examples are available.

• Transparency This selection box allows you to specify which portion of your image you want transparent. The options are None, Background, and Foreground.

• Interlace This selection box lets you choose whether to have .gif or .png format banners interlaced or not. Interlaced banners appear to load faster than non-interlaced banners.

• Quality This selection box lets you choose between Low and High quality banner output. Please note that low quality banners are faster to make, and can have smaller file sizes as well.

• Advanced Algorithms Here you are supplied with six boxes in which you may select from various advanced algorithms to run on the image. These algorithms are run in the order that you select them, and the order can be important. See the examples pages for edge detection, emboss, and blur for examples of the importance of how you order your Advanced Algorithms. More detailed descriptions of these algorithms are available. We have generated many examples for your convenience.

Mounting Your Banner

Mounting your banner on a color graphic blank or a repeating tile is a simple process. After you create your banner (when you are on the Banner Created page) you may select the Mount link to mount your banner. You may mount your banner on any of the banner blanks or tiles provided in the list of blanks. You will need to remember the name of the banner blank you choose.

To start, enter the name of the blank you choose in the Mount on Graphic field. This may be filled with any of the Banner Blanks in the list of blanks. You may enter none to specify that you do not want a background.

Next, choose the position of your text on the banner blank. You can choose any combination of Left, Center, Right, and Top, Center, and Bottom. The default is "Top Left".

Next, fill in the Name your Mounted Banner field with a name that you can remember easily. Now submit by selecting Mount Banner.

You will get a screen that is very similar to the Banner Created page, only this page will let you view your mounted banner or discard it if you do not like the results.

We have extended this service to allow you to mount more than one graphic banner on a blank. This is why you chose a name for your mounted banner, so you can choose your named banner on the Mount on Graphic field.

To mount multiple banners on the same blank, you should go back to The Banner Form via the Back button on your browser or follow the [Mount Another Banner] link from the Banner Mounted page. Back at The Banner Form page, you may create another banner to mount onto the banner you previously created.

Hints:

• You can use the Position option on the Mount Form to properly locate your text. Or, for more precise locations, you can use the Border option on the Banner Generator form.
• You should choose your blank first, and then make a banner that fits well in the blank!
• If you wish to mount multiple images without a graphic blank, this can be done simply by choosing none on the Mount on Graphic field.

Mount Form Summary

• Name your Mounted Banner This field allows you to give a name to the mounted banner that you are creating. This name allows you to refer to this mounted banner if you wish to add another banner on top of this mounted banner. You can add on to this mounted banner by filling in the Mount on Graphic field with this name after you create another banner.

• Mount on Graphic This is a multipurpose field. You may use this field to select any of the banner blanks available for mounting. To do this, just enter the name of the banner blank into this field. For example: rapid-blue.

  Or, you may specify a graphic that you have already created. You may do this in two ways. If you specified a name for a previous mounted banner then you may use that name. For example: mygraphic. The Mounting program will try to find the graphic that you want to mount your banner on. You can may specify the full file name of the graphic (no path is necessary) For example: banner_tmp_3456_mygraphic.gif.

  If the Mount program can not find the graphic that you specified then it will give you an error screen and you may select a different graphic.

  For more information see the mount example.

Discarding your Banner

If you are using Mount to mount many banners onto one blank then you might add a banner to the blank and decide that you do not like the latest. If this is the case then you should choose [Discard This Banner] from the Banner Mounted page. By doing this the mount program will know that the next time you want to mount a banner, it should use the previously mounted banner and not the one you just made.

About The Banner Generator

This generator is driven by perl code writen by Jason Hartline and Daniel Allen that utilizes the ImageMagick utility written by John Cristy. ImageMagick is a phenomenal package and without it The Banner Generator would not exist.

Note on rgb

You specify a #rrggbb color with a hash (#) followed by a six digit hexadecimal number. You may look at this Color Table to find the color you are searching for.

Note that a specific color will look different on different platforms. For example, a PC running Netscape(tm) only has 216 colors when in 8 bit color mode. Each color red, green, or blue may only take hexadecimal values 00, 33, 66, 99, CC, and FF and it dithers between all the rest. This is better documented in Netscape Technical Note 10117

Details about Special Characters

The Banner Generator now supports iso8859-1 characters, including accents and other symbols. You can use this feature by using the html format for specifying special characters in the Banner Text field. For example, you may use either Ä or © to get the © character. This is just one of the many characters you now have access to with The Banner Generator. Special thanks go to Joergen Lang and and a person who has chosen to remain anonymous for suggesting this improvement. Note that not all fonts support all the special characters; we are actively soliciting information about which fonts support which characters! Tell us what you discover!

Details of Advanced Algorithms

• Blur 5 %, Blur 50 %, and Blur 75 % This will blur the image with a given blurring factor. The higher the number the more blurred the resulting image will be. This option may reduce jagged edges on certain fonts. Here are examples of Blur in action.
  
  Note that when using Blur and Transparent images, the color you select to replace with the transparency is important. Blur uses this color to "round" the edges of the font. You should choose a color to replace with transparent that closely approximates the background that your banner will be displayed over.

  Edge This does edge detection on the image. The resulting image gives a hot outline of the banner text. The difference between the colors used as foreground and background is important to this algorithm. Here are some examples of Edge Detection in action.

  Emboss This embosses the image. The resulting image has a feeling of depth. The font will normally appear to have shadow and stick out of the image at you. Here are some examples of Emboss in action.

  Flip This flips the image by rotating it around a horizontal center line. The resulting banner will be upside down.

  Flop This flops the image by rotating it around a vertical center line. The resulting banner will be backwards.

  Paint This gives the image an "oil painting" look.

  Raise This option raises the whole image off the page. It will make the banner look more like a button.

  Swirl 20 % This performs a swirling effect on the image. The effect is more pronounced at the center than at the edges. Here are examples of Swirl in action. To get a more pronounced swirl use two advanced options with Swirl.

  Frame 5x5 This option will frame the image with a beveled edge. It is useful for certain buttons.

Frequently Asked Questions

If you have a question about The Banner Generator, be sure to check this page first for a quick answer.