You can enter text directly into a Web page and format text with any font on your computer. Unfortunately, for the text to display in the font you desire, that font has to be on your user’s computer also. Using text on a Web page works fine when you aren’t too concerned about the font or you’re using common fonts, such as Times or Arial, but if you want to create beautifully designed banners with more unusual fonts, such as Papyrus (shown in Fig-ures 6-21 and 6-22), you’re better off creating a banner or button as an image.
That way, you can guarantee that your text will display on a visitor’s computer exactly as it did when you created it. You can also use colored backgrounds, or even images as backgrounds, as shown in the examples in this section.
Why not create all the text for your Web pages as images? For one thing, it takes a lot more time to create images than to just type your text into a page in a program such as FrontPage. But more important, images take longer to download than text. You should use this trick sparingly and save it for text that really matters, such as the banners at the top of your pages or the but-tons that you use to navigate your site.
Before you start creating a banner or button, select the color you want for the background in the default foreground and background box at the bottom of the toolbox (labeled in Figure 6-2). When you create a new file, you can apply only the Background color choice.
To create a button or banner graphic for your Web pages, follow these steps:
1. If it’s not already open, launch Photoshop Elements.
2. Choose File➪New➪Blank File.
The New dialog box appears.
3. In the Name box, enter a name for the button or banner.
4. Specify the width and height.
If you’re creating a banner graphic, most Web designers recommend that you create a banner that is 700 pixels or less wide because it will display well on most computer screens at that size. If you’re creating a button, consider making it 150 to 300 pixels wide, depending on the design of your page. In Figure 6-21, I created an image that is 200 by 80 pixels.
The height of your banner and buttons can be anything you like, but remember you’re using up real estate on your page, and the bigger you make these images the longer they take to download.
5. Set the resolution to 72 pixels/inch.
If you’re creating an image for print, you should use a much higher reso-lution. When you’re creating an image for the Web, however, the graphic will be viewed on a computer monitor, and most computer monitors
display only 72 pixels/inch. The more pixels, the larger the file size and the longer the file takes to download.
6. If you haven’t already set the background color (see the tip preceding this set of steps), specify the color now.
Your options are White, Background Color (which uses the background color selected in the toolbox), or Transparent (which creates an image with no background). The Transparent option is a good choice if you want your words to look like they float on a page. (Don’t worry if you haven’t preselected the color you want for the background color; you can change it in Step 12.)
7. Click OK.
The blank image is created with the background color specified in Step 6.
8. Select the text tool in the Tools palette.
9. Use the text formatting options in the options bar at the top of the screen to specify the font face, size, style, and color.
10. Click to insert your cursor on the new blank image, and begin typing to enter the text you want on your button or banner.
If you want to change the font or other text formatting options after you add text to an image, make sure the text tool is selected from the Tools palette, click and highlight to select the text you want to change, and then make an adjustments in the options bar at the top of the screen.
Figure 6-21:
You can use Elements to create custom banners and buttons for your Web site.
11. If the Layers palette is not already open, choose Window➪Layers.
Notice that the text appears on its own layer, separate from the back-ground of the image, unless you created a transparent backback-ground, which is not treated as a separate layer.
12. Edit the background and the text layers independently.
Click a layer to select it. For example, if you want to change the back-ground color, select the backback-ground layer and choose Edit➪Fill. In the Fill Layer dialog box, use the pull-down menu in the Use box to specify the background color (the color represented by the swatches at the bottom of the toolbox). A transparent background can’t be edited inde-pendently, so you can’t fill it with a color without affecting the text, but you can edit the text without altering the transparent background.
13. Choose File➪Save For Web.
The Save for Web dialog box appears.
14. In the Optimized File Format list, choose GIF.
GIF is the best format for images that use only a few colors, such as logos or banners.
15. Set the number in the Colors box.
Limiting the number of colors helps reduce the file size and make the image download more quickly. For an even smaller file size, reduce this number as much as you can without affecting the appearance of the image too adversely.
16. Save the button or banner and give it a new name.
Repeat these steps for each button or banner you want to create.
Make sure you save the original Photoshop Elements image as well as the optimized GIF or JPEG image you create for the Web. When you save an image for the Web, the layers are compressed. If you keep the original, layered image, you can make changes later more easily.
As you see in Figure 6-22, you can also create banners or buttons by inserting text over a photograph. Simply open an existing image, and follow Steps 4 through 15. If you use a photograph, also change Step 13 to save your image as a JPEG and Step 14 to specify your preferred compression option instead of reducing the number of colors.
Figure 6-22:
Add text to a photograph.