Graphic Titles

The HTML language has one large drawback... it was not developed originally to make fancy webpage designs. It was originally meant to put just text and hyperlinks up on your screen. In order to create a nicely laid out page with photos, designs, and formatted text exactly where you want them, you have to be a little crafty about how you use the commands.

HTML will let the webpage designer specify different fonts, but this is not very useful if the person reading the page doesn't have that font on their computer. Worse, if their computer substitutes the wrong font, your nice design may end up looking pretty stupid. To get around this problem, some titles, headings, or banners are made using a graphics program, which will let you use any font you want. In effect, you are making your title a rectangular 'picture' with text. This title graphic is then saved as (or converted to) a GIF image, and used on your page.

For example, here is some text without any font specified, just using large bold type:

Just plain text!

Here is the same text, with the font specified as 'Girls are Weird'.

Text with font specified.

Since you probably don't have the font 'Girls are Weird' installed on your computer, what you see above is probably plain old 'Times New Roman', the same as all the other text on the screen ... and the size will be different than I expected it to be. I have no idea what you're seeing, nor how big it is! My efforts at using fancy fonts, (and arranging things on the screen to fit them), would be totally wasted.

It would be nice if everyone could use the same browser, too, since browsers present information differently on a webpage. However, that is out of your control as a webpage designer. The best you can do is to test your pages in different browsers to make sure everything at least looks OK, if not exactly the same.

Anyway, what I'm about to do is to make a small picture with text on it, in my special font, and save a .gif picture of it. You'll see this:



Since pictures are always rectangular, my graphics program also conveniently lets me make the rectangular background of the picture transparent if I need to. In this case, though, I just put it on a white background. Here it is with a border so you can see that it really is a picture, and not text, on the page:



This is what you should have seen when I specified the font earlier, but probably didn't. Using these .gif pictures of text, I can make text appear just the way I want it, and I know you'll see what I want you to. The program allows for lots of variations, too. It will produce drop shadows on the text, textured text, and other fancy effects:



A GIF editor program like 'GIF Construction Set' is also useful for making animations. These are a series of individual frames that you've drawn, copied, scanned, or otherwise altered, that will produce an animation effect when run together. The program collects the images for you, makes a single .gif file, compresses it, and will let you adjust the timing.



You might check out GIF Construction Set (the registered version is less than $50); visit their site.

BACK