Web Shop Design: Using Text with Images in Photoshop

As compelling as a product shot or Web shop photo may be, sometimes an image needs a little something extra — and often that is some text to enhance it. In the realm of e-commerce, text and images work well together.

For instance, they're often used in tandem when creating a logo for your business. In many other cases, you might add text to an image to reinforce the visual message or to explain better the product or service the image is introducing to your audience. Photoshop has tools for working with type on an image and in this article we will look at how to use type for effective messaging and branding.

Editor's Picks

» Web Shop Design: Plugging into Photoshop » Web Shop Design: Tips on Using Color » Prepping Product Shots for Web Shops » Time is Money: Batch Edit Photos, Boost Bottom Line » Web Shop Design: Font Fantastic » Five Photoshop Shortcuts for Quick Image Editing » Web Shop Design: Putting Color into Action

Work with Type

To add text to an image, click the Type tool in the Tools palette. There are four options here: the Horizontal Type Tool and the Vertical Type Tool, which both create type on the image, and a Horizontal and a Vertical Type Mask Tool, which create type selections you can use as masks.

Select the Horizontal Type Tool and from the Tool Options area select a font, font size (72 points = 1 inch) and an anti-aliasing method such as Sharp. To select the color for the type, click the small color swatch and select a color to use. To type a single line of text, click on the image and type the text. If you need a second line of text, press Enter to complete the first and click again in the image and start typing.

Each piece of type is placed on a new layer so you can select the type by clicking on the type layer, click the Type tool and click and drag over the text. Once selected, you can edit the text and change its font, color and size using the tool bar options.

You can create text as a series of lines or entire paragraphs of text on top of your image. (Click for larger image.)

Paragraphs of Type

To create a paragraph of type, click the type tool and set the font, size and color to use. Drag to select a large rectangle on the image — it will have sizing handles and marching ants around it. Start typing and your text will be constrained to fit in the box. When you press the Enter key a new paragraph will be created.

You can find options for your type by choosing Window > Character, or Window > Paragraph to open the respective palettes. Select the type and, for example, in the character palette you can adjust the spacing between letters to make them closer together or further apart, and then adjust the space between lines of text. You can also adjust the character width and height or select a new font size. The paragraph palette has options for adjusting the alignment of text.

Text on a Path

To create custom curved text you can type it along a path. To make the path, select the Pen Tool and click the Paths option on the Tools bar. Click once at one end of the line and click and drag to create the curve. With the path still selected, click the Horizontal Type tool and position the cursor over the line until the cursor displays an I-shape pointer with a small curved line over it. Click and type the text and it will be positioned on the path. The text can be edited the same way as you edit any text.

By drawing a path you can position Photoshop text along that path. (Click for larger image.)

To change the shape of the text, use the Direct Selection Tool to select a point on the path and move it or change the line shape by dragging the node's handles. The path is stored with the type layer, so provided you save the file with its layers intact, you can edit the text or the path at any time.

Type Effects

You can create lots of effects using type and your images. One of them is to cut type out of a photo so you have type filled with an image. To do this, open an image and convert the background layer into a regular layer by double clicking it and click OK.

Type some text onto the image using the Horizontal Type Mask Tool and a nice chunky font. When you do this, you will be typing on a ruby colored mask. Press Enter to finish entering your text.

To move the selection, choose Select > Transform Selection and drag the selection over a good part of the image. Click the Add Layer Mask button at the foot of the layers palette to convert the selection into a mask — now only the part of the image that was under the text will show.

Using the type mask tool you can create a photo filled text effect. (Click for larger image.)

A second text effect works in a similar way, but this time the bottom of the image morphs into the text. For this effect, open an image and convert the background layer into a regular layer by double-clicking it and press OK.

Punch text from the foot of an image using the type mask tool and a Photoshop mask. (Click for larger image.)

Using the Horizontal Type Mask Tool type some text across the bottom edge of the image. Choose Select > Transform Selection and use the Move Tool to move the selection into position at the very bottom of the image and size it to suit.

Click the Rectangular Marquee Tool and from the Tool bar click the Add to Selection button.

Drag a rectangular marquee from the top of the image down to touch the top of the text characters. This makes a rectangle selection with a text selection attached below it.

Click the Add Layer Mask button at the foot of the Layer palette and the image will be clipped to the shape of the selection. You can add a new layer behind the image and fill it with a color to show off the cutout text.

Design should be fun, so don't be afraid to experiment with your images and messaging to see what works for your particular online business.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.

Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!