Tips & Tricks: Text Wrap in Photoshop CS5

A few weeks ago, I was working on some new site designs for the Bartolotta Restaurants, and I ran into a problem. The client thought that certain pages were too text-heavy. Which, to be fair, they were:

(You can click on any of these images to embiggen them, by the way.)

So let’s throw some imagery in there to break up the text. But here at fathead, we do most of our web designing in Photoshop, and Photoshop’s not a large-blocks-of-text layout program. I know how to do text wrap in InDesign. I know how to do it in Illustrator if I have to. How do you do make text wrap around placed photos in Photoshop? You could make several text boxes, and break up the text, but that makes any future text edits a headache. As it turns out, there’s a slightly more elegant solution.

First, let’s copy all that text from the text-heavy page. Keep that copy in your clipboard. Don’t go losing it by copying any YouTube links your friends are sending you.

Next, hide or delete the old text layer, and drop in the images you want to use.

Now, we’re going to use the Shape tool to draw a rectangle back in for our text box:

And here’s the trick. Using the same Shape tool, select “Subtract from shape area” in your toolbar, and draw subtracted rectangles around your images.

The rest is easy! Select the text tool and click anywhere in your shape area – it will create a text box from the new shape you’ve created. Command-V your text right back in there. You can even edit your new text box shape by dragging the points with the direct selection arrow. You can delete the original shape layer, too, if you feel like it.

Victory! Ok, it’s a little complicated. But isn’t that better than duct-taping a handful of differently sized text boxes together?