Image
Top
Navigation
May 24, 2011

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:
Bartolotta Restaurants

(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.
Bartolotta Restaurants

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

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

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.
Bartolotta Restaurants Bartolotta Restaurants

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.
Bartolotta Restaurants Bartolotta Restaurants

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

Comments

  1. Most Excellent. Thanks for the tip!

  2. I have tried this trick over and over, and every time i get to the text part (where i am trying to paste in a pre-typed block of text from text editor) the text does not stay in confines of the container, but spreads out across the whole page. What am i doing wrong?

  3. Amy

    LOVE this trick! Working on new email template and had same issue that you had and didn’t feel like making a gazillion linked layers. Saved lots of time too. Thanks for sharing!

  4. Son Nguyen

    Thanks! Great help. I use PTS for long but really dont know this trick!

  5. Chris

    Jae, in the layers panel, you need to unlink (click on the “link” icon) of the shape layer you’re using as a template for word wrapping. Then click back in the shape and paste your copy.

  6. Thank you so much for this! I’ve been so sick of having to switch over to InDesign or Illustrator just to wrap text around an image!

  7. Whit

    Excellent! And a great help! Thank you so much!

  8. katie

    YES you just saved my life with this tutorial. works just the same in CS6! thanks for posting!

  9. omg! this tutorial is a life saver, thanks a lot. like WOW! works with CS5 like great

  10. Thanks It works just fine!

  11. Thanks for the tutorial, absolutely fantastic… Only downside is that the subtract area MUST be touching the outer edges of the initial rectangle/shape or it will not work and the text will go over the picture… If there is a way of having a subtract area in the middle of the shape then please advise..

    • Oooh – good point… we’ll take a look at that and update the post when we find that solution. Thanks for the comment!

  12. Barry

    Super awesome. So helpful. I will use this 4 times a week.

  13. Great, thanks for sharing, nice tips

  14. Emma

    Amazing! I had no idea I could do this, makes perfect sense though. Thanks so much for helping me out!

  15. Hi,

    A useful idea, but I ran into a few problems, some of which were experienced and explained by others in the comments.

    Like Jae, I struggled to have the text keep inside the new vector mask, it kept making a new text layer.

    Like Paul, it took me a while to realise the wrap vectors had to touch the outer box. This was by trial and error I eventually found one that worked, then read Paul’s comment later.

    This means I have lots of useless rectangles hidden on my mask, is there a way to highlight and delete these? And how can I edit the shape after, there seems no way to select the subtract wrap area to change it’s dimensions?

    Finally, is it possible to use a rectangle box, and then use an ellipse box as the subtract mask?

    Thanks!
    Andy

    • I’m thinking some of the steps here have changed slightly since we first wrote this tutorial. Which version of CS are you using?

  16. Thanks!

  17. Angie

    This is great. Thank you!

  18. Nice Text Designing Photoshop tutorial

Submit a Comment

Posted By

Categories

blog