Creating a Website: The Missing Manual, 3rd Edition

Techniques with Graphics

Now that you’ve mastered the <img> element, it’s time to learn a few tricks of the trade. In the following sections, you’ll tour three common techniques that web developers everywhere use to create more polished pages.

Graphical Text

In Chapter 6 (Pixel sizing), you learned that using exotic fonts on web pages can be tricky. Not only do you need to think about font licensing, you also need to create several versions of each typeface to make sure your fancy font works in different browsers.

Figure 7-13. This staring smiley face remains perpetually in the center of the window, even when you scroll up or down. It’s a little creepy.

There’s no way to get around this hassle when you have large blocks of text. However, enterprising web artistes sometimes put the short snippets of text they need for headings, buttons, and logos into picture files. That way, they get complete control of what the text looks like, and life is a lot less complicated.

Here’s a high-level look at what you do to create small pictures with text:

1. Fire up your favorite image editor or drawing program.

   Figure 7-14 shows an example with Adobe Illustrator.

2. Use a background color that matches your web page.

   In some programs, the easiest way to fill a section with color is to draw a shape (like a rectangle), and then give it the proper “fill” color.

3. Choose your font, and then type the text over the background ...