Photoshop is a terrific tool for creating Web signage, from banners and advertisements to buttons and labels. To learn ways with words in Web art, you must first master the text tool.

As an introduction, we’ll create a simple Web banner this month. We’ll show you how to create and manipulate text layers and how to format the style, color, and size of your text. You’ll even do some fancy tricks.

Get Started

From the File menu, select New. Specify the width of the new file as 500 pixels and the height as 200 pixels. Make sure the Mode of the file is RGB (which stands for red, green, blue). The Contents should be Transparent.

Before starting with text, let’s give the banner a color. Click the foreground color square in the Photoshop tool bar. Select a color from the Color Picker, then click OK. From the Edit menu, select Fill. Under Contents, select Use Foreground Color. Then click OK.

Add A Text Layer

When adding text to an image, it’s best to work with layers. Layers let you experiment with phrases and easily remove mistakes. If you do not see the Layers palette, choose Show Layers from the Window menu. There you should see one layer, the color you just used to fill the banner.

To start a new layer, from the Layer menu, select New, Layer and click OK. Alternately, click the little square notebook icon at the bottom right of the layers palette. To delete a layer, from the Layers menu, select Delete or drag the layer from the palette into the trash can icon.

Adjust Text Settings

Now click the Text tool (the big letter T in the Photoshop tool bar) and click anywhere in the image. In the horizontal menu bar at the top of the screen, you should recognize some options from your word processing program. Before you write, you need to specify formatting, including a suitable font, font size, and color. For starters, choose Times New Roman, Bold, 36 point. Specify Crisp from the Anti-aliasing field. (Anti-aliasing removes jagged edges.) Then choose a text alignment: left-justified, centered, or right-justified. Finally, choose a color by clicking the small rectangle.

Write

Now, type in a two-line phrase, such as Welcome, Martians, (press ENTER) To Planet Earth. You may notice a large space between the lines. To remedy this, you will adjust the leading, the space between lines. Use the text tool cursor to highlight the words, just as you would in your word processor. Then click the Palettes button in the Text menu bar. The leading option is on the right, under the font style option. Click the drop-down arrow and select an appropriate size.

Now let’s add another line of text. Open a new layer. Reduce the font size to 24 point and select Bold Italic as the style. Then type in a new phrase, such as The coolest sphere for oxygen. Because this line is in a new layer, you can manipulate it separately from the other text.

Move & Manipulate

Go to the Layers palette and click in the layer with the new line of text. (A selected layer is blue.) Now, click the Move tool and place the second line of text where it looks best. Then click the text tool again, highlight the text, and click the Create Warped Text button in the Text menu. Under Style, select Flag, then click OK. (If you like, experiment with other styles, such as Fish Eye or Bulge, and play with the sliders to enhance the warping effects.)

Save The Banner

From the File menu, click Save As and save the image in the native Photoshop format, .PSD. The .PSD format preserves the layers, so you can come back and update your banner easily, without having to guess the fonts and colors you used in the original. If you’re prompted to commit your text to the layer, select Commit.

Then you must save it in a format suitable for the Web. With the file still open, from the Image menu, select Duplicate and then click OK. Close the original file. Now, you must “flatten,” or merge, the layers of the copy. Choose Flatten Image from the Layer menu. From the File menu, select Save For Web. Specify settings as GIF, Web color, and No Dither. Then click OK and click the Save button.

That’s it. You now have a way with words in Photoshop.