240 HOW: Visual Tools: The ABCs of Web Type

The logo, if not preexisting, will be designed in Adobe Illustrator or Macromedia Freehand, just as it would be in print projects. All we need to say about that is to remember to start with web-safe colors, keep your design simple so it can reproduce at small sizes (32 x 32 web buttons, for instance), and pay attention to the following discussion about serif versus sans serif faces in the limited 72ppi screen environment.

Remember the VisiBone color palette we mentioned earlier in this chapter? Download the Illustrator version and use it to develop logos and other graphics intended for the Web.

Before copying Illustrator artwork to Photoshop, convert to RGB via Illustrator’s Filter, Colors menu. The process is not perfect; web-safe colors may shift, and you might need to select large areas in Photoshop and refill them with web-safe colors.

The main thrust of our look at typography will not be body text (covered in Chapter 10) or logo design (covered previously in this chapter). Instead, we will discuss the basics of using Adobe Photoshop and ImageReady to create typographic GIFs for the Web. We’ll also further examine how antialiasing can work for or against your web designs.

THE ABCS OF WEB TYPE

As you know, Photoshop and ImageReady let you add horizontal and vertical type to any image. As of Photoshop 5.5, you can specify the typeface, leading, kerning, tracking, baseline style, size, and alignment of the type and edit its characters. Photoshop 6 improves on its predecessor’s already remarkable power.

Previously, such details as leading, kerning, and tracking were the exclusive province of Illustrator, and most serious web designers would create their typography in Illustrator and then cut and paste it into Photoshop. Some still do that, and you might prefer to as well. Illustrator offers useful keyboard shortcuts for kerning and other typographic functions. Many of those keyboard shortcuts are missing from Photoshop, making the process a bit less streamlined.

Taking Your Talent to the Web

241

But keyboard shortcuts aside, Photoshop has advanced tremendously in its handling of type and now offers essentially the same typographic functionality that Illustrator does. As a result, many designers use Photoshop for everything.

Photoshop 5.5 and higher also allows you to select an anti-aliasing option for type, apply simulated styles to type, and turn off fractional character widths to improve the appearance of small, bitmapped type displayed at low resolution.

Anti-Aliasing

As all designers know, anti-aliasing enables you create the appearance of smooth-edged type by partially filling in the edge pixels with intermediary colors. For those who don’t know, we provide the following handy exercise.

Exercise 4: The Great Intermediary

Launch Photoshop and create a new blank document with a white background. Work at 72ppi. (We always work at 72ppi on the Web.)

Select the type tool. Click in the image to set an insertion point.

Enter some text in the Type Tool dialog box (Photoshop 5.5) or directly on the image (Photoshop 6). Format the text however you like. For the sake of argument, we’ll type our names in black, 24pt. Helvetica. “Crisp” anti-aliasing is chosen by default. (If it is not, choose it now.)

Close the Type dialog.

Go to Photoshop’s Navigator menu and blow up the image by 400%. Look at the edges of any letter. Those soft gray pixels are anti-aliasing. Now you know.

The purpose of anti-aliasing is to fool the eye into seeing type as smoothly rounded in spite of the low resolution of computer monitors.

Anti-aliasing is also used for images unless you’re deliberately going for a bitmapped, pixellated look. And you’re usually not. Whether for type or images, it can cause problems when working with GIF transparency.

242 HOW: Visual Tools: The ABCs of Web Type

Exercise 5: Match 'Em Up

Open Photoshop and create a new blank document with a white background.

Choose any two web-safe colors from the Photoshop Color Picker or the VisiBone web palette. For the sake of argument, we’ll choose a dark purple and a light green.

Select a circular area and fill it with the foreground color (dark purple).

Save the image as circle.psd.

Hide the Background layer so that it becomes transparent.

Save for Web.

Choose GIF (choosy mothers choose GIF) and click the Transparency checkbox.

Select the background (light green) color as your transparency color.

Optimize at 16 colors with dithering on and the web-safe slider dragged to about 40% web-safe.

Save the image as circle.gif.

Open BBEdit or your HTML editor of choice.

Create a new basic HTML document with a background color to match the light green (transparent) background of your GIF image.

Save the file as circle.html.

Open it in any web browser.

The circle should look good and should have a soft edge thanks to antialiasing.

Return to the HTML document and change the <BODY> background color to a new, contrasting color. Say, black (#000000).

Save the file and reopen it in the web browser.

The circle should be surrounded by an ugly light green halo.

That is improper anti-aliasing. What have we learned? Always anti-alias against the color you expect to use in the finished web page.

How do you anti-alias a transparent type (or image) GIF when the site uses a gradient background image or a random texture?

You can’t. So avoid using those types of backgrounds unless you never need to set transparent GIFs in the foreground.