After you get a good handle on where to use graphic text in your Web page layout, the next step is to dig in and create the graphic text. Graphic text is a cinch to make: Simply launch your favorite graphics program, wield the Text tool around a little, and add any effects as needed.
In this example, you use Fireworks to create a heading for a Web page, complete with drop shadow. The steps are pretty much the same if you use Photoshop:
1. Launch Fireworks.
Fireworks appears, as shown in Figure 8-13. Note the location of the Tools panel, Property Inspector, and other panels.
2. Choose File➪New from the menu bar.
The New Document dialog box appears, as shown in Figure 8-14. You can also create a new file by pressing Ô+N (Mac) or Ctrl+N (Windows).
3. Specify the dimension, resolution, and canvas color for the new file, and then click OK.
Figure 8-13: The Fireworks interface.
Figure 8-14: Use the New Document dialog box to specify dimension, resolution, and background canvas color for your new file.
Tools panel
Property Inspector
Panels
To give yourself enough room to work, enter 500 pixels for the width and 300 pixels for the height in the Canvas Size area, and choose 72 dpi. If you export without trimming it further, the graphic will be 500 x 300 pixels in size. This size is too large for a header, but I like to start with a big canvas.
Later in these steps, you will crop the canvas to match the size of the header. Cropping the canvas to the size of your graphics is always best.
Smaller dimensions result in a smaller file size, which in turn speeds up download performance.
Please note that while the figures shown in these steps show the Macintosh interface, Fireworks works the same on both Mac and Windows. Windows users can follow the steps equally well.
For this document, I want to build a heading for a Web page with a white background (the color of a Web page is set in the HTML code for the page), so I leave the Canvas Color (or background color) white. When building graphics, you should always use a background color that matches the color of your Web page background.
When you build graphics in Fireworks, you work in Original mode (note the tabs at the top of the document shown in Figure 8-15).
Later in these steps, you’ll use the Preview mode to see how your palette and file format choices affect the quality of your design.
Figure 8-15: Build graphics in Original mode. Click the Preview tab to see how it will look when exported. Click the Original tab to continue editing.
Original mode
Preview mode
4. Select the Text tool from the Tools panel (it looks like the letter A), and click anywhere in your document to begin typing. When finished, click the black pointer tool in the Tools panel (upper-left) to exit typing mode.
5. Apply font, size, and color settings to your text.
With the pointer tool, click your text object to select it. In the Property Inspector (the long horizontal panel shown in Figure 8-16), select a font from the menu, and then enter point size (to the right of the font choices).
Click the color swatch to the right of the point size and select a color from the pop-up palette.
Figure 8-16: Use the Property Inspector to apply color, size, and font choices to your text.
6. Add effects to your text.
While the text object is still selected, follow these steps:
1. Choose an effect for your text by clicking the + symbol on the right side of the Property Inspector and selecting from the list of choices.
2. After you select something (such as Shadow and Glow➪Drop Shadow), a small dialog box appears where you can adjust set-tings. Play with the settings until you like the result. You’ll notice that as you play, the text on-screen dynamically updates.
3. To keep your settings, simply click anywhere outside the dialog box.
4. If you ever want to update your drop shadow settings, click the i icon next to the Drop Shadow effect. You can add multiple effects.
Just click the + icon and choose another effect.
5. To remove effects, highlight it in the list and click the – icon.
7. Trim the canvas to just the text.
When you finish with the design, you can prepare it for Web export.
If you don’t trim the canvas, all the surrounding space gets included when you export the file, making the graphic a big white block with a piece of text swimming in the center. To trim the canvas size, choose Modify➪Canvas➪Trim Canvas from the menu.
8. Choose a file format.
Before exporting this heading, apply a Web file format setting. In the Optimize panel, shown in Figure 8-17, choose the following options:
1. Choose GIF from the first list and Adaptive from the second list, as shown in the figure.
2. Next to Colors, choose 128.
This limits your heading to no more than 128 colors. To optimize the image further, you can enter less colors.
The fewer colors you use, the smaller the file size is and thus, the faster it downloads on the Web. Choosing too few colors, however, can degrade the quality of the image.
In Fireworks, you can preview how your color palette and file type settings will look by clicking the Preview tab at the top of the doc-ument window. While in Preview mode, you can try different Web
file settings in the Optimize panel to see how each look and how long each will take to download (the Preview mode tells you). When you have a setting that you like, click the Original tab.
9. Save the editable file and export the heading.
That’s it! Before exporting for the Web, save your work in the native Fireworks format by choosing File➪Save from the menu bar. In the Save dialog box, enter a name and keep the .pngextension after the name
Select GIF format Select Adaptive palette
Figure 8-17: Use the Optimize panel to specify Web export settings for your graphic.
(such as myfile.png). Save it wherever you like on your hard drive. By saving the original PNG file, you can always reopen it, make changes to the design, and then export it once again as a GIF or a JPEG for the Web.
To export this heading to the Web, choose File➪Export. In the Export dialog box that appears, select Images Only (next to Save As). Enter a name for your file (keep the .gifor .jpgat the end), select a folder on your hard drive, and click Save.