Photoshop is the industry-standard photo editor, but it also does a pretty good job of manipulating text. The program adequately handles vector images, which are graphics comprised of lines, and such is the case with text. As a result, Photoshop can dynamically resize text characters without harming their image quality.

With Photoshop's Type tool and a little finesse, you can incorporate decorative text into graphics. This month, we'll practice using the Type tool by creating a Web banner. (This tutorial assumes familiarity with Photoshop layers.)

Gather Your Resources

A good Web banner usually includes an image. Copy a promising photo or two into a temporary directory and open the photos in Photoshop. Then create a new file that's 600 pixels wide and 200 pixels high. Specify that the file be 72ppi (pixels per inch) with a transparent background. Save the file in the proprietary Photoshop format, PSD, in your temporary directory. If you don't see the Layers palette in Photoshop, open the Window menu and select Show Layers.

It's time to add the image to the banner. If you need to resize your image to make sure it fits within the Web banner, do so now. Next, use a selection tool to copy all or a portion of the image and paste it into an empty PSD file. Move the image to the left side of the banner.

Focus On Banner Text

From Photoshop's Tools bar, click the Type tool. From the Options bar, make sure the Create A Text Layer icon (on the far left side of the bar) is selected, as well as the Horizontally Orient Text icon.

From the Options bar (the version you'll see after you select the Type tool from the Tools bar), select a font, font size, and color. We designed our banner for a literacy campaign, so we chose text which says, "It's never too late to learn to read." We're using the Perpetua font, a bold style, and a dark brown color.

Click inside the space where you'd like to place the text, and Photoshop will automatically create a new layer. Now type your text in the area. To start a new line, press ENTER. Depending on the font and its size, the second line may overlap the first line. One way to address this kerning problem is to press ENTER again, creating more space between the lines. Or, after typing your text-bad kerning and all-click Palettes from the Options bar and select the Paragraph tab. Here, specify 2 points (2 pt) in the field next to the Add Space After Paragraph icon. If the line spacing is still too narrow, add another point.

Text Effects

To see how well Photoshop can manipulate type-based graphics, click the Create Warped Text icon from the Options bar, and when the Warp Text dialog box opens, select Twist from the Style drop-down menu. If that's too drastic of an effect, play with the sliders to tone it down. You can experiment with other warping effects, as well. When you finish experimenting, you can click Undo from the Edit menu.

You also can resize the entire text box. First, click the text layer. Note that the text has a bounding box, which looks like a dotted rectangle surrounding it. By grabbing an edge or corner of the bounding box with your pointer, you can enlarge, stretch, or shrink the text. To resize the text box proportionally, hold down the SHIFT key and pull on a corner of the bounding box.

New layers. When adding more than one line of text, it's often useful to make each line a new layer. Having text in several movable chunks gives you much more control over text placement, text color, and text size. To do this, simply click the Create A New Layer icon in the Layers palette for each line of text.

Moving text. To rearrange text on the banner, select the Move tool and use the pointer to place the text more precisely.

Reformatting text. To change font type, size, or color, use the Type tool pointer to select the text and then make your changes in the Options bar.

Special effects. You also can add a shadow, a bevel, or other layer effects to the text. Select the layer you'd like to change and click the Add A Layer Style icon.

After playing with various text effects and achieving the look you want, save the file. To keep the banner with all of its layers, we recommend duplicating the file (click Duplicate from the Image menu) and closing the original PSD file. With the duplicate file open, click Flatten Image from the Layer menu. Then click Save For Web from the File menu. (We recommend saving the banner at a size of 15KB or smaller.)

Now that you've created one banner, use your skills working with text to create buttons and other Web graphics.