Join Sue Jenkins for an in-depth discussion in this video Saving time using text wrap as padding, part of Productivity Tips for Web Designers.
- Hi there, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I'll show you how to use the Text Wrap feature in Adobe Illustrator to emulate CSS Image Padding. In graphic design, when you add a rectangular image to a block of text, it's really best to include a little bit of space around the image so that the text doesn't butt up directly against the edges of the image. Not only does having this little bit of space make the text easier to read, but it also adds a sense of unity between the text and the graphic so the two together become this unified block within your overall design.
InDesign users will be familiar with this concept as Runaround text or text that runs around a wrapped object. Web Designers know this as CSS element padding which involves creating a style that adds the space between the image and the surrounded text. In Illustrator though, we can use this tool called Text wrap. So before I show you how to do it, I wanna show how not to do it. Because before Text Wrap, a lot of designers would manually position their text around images when laying them out like this using threaded text boxes and all, assume that you know how to do threaded text, so it's essentially two text boxes that are connected by a thread.
One is narrow more than the other so that the text doesn't touch the edges of the graphic. This is not what I want you to do because there's a easier solution. Instead, what you'll be doing is using the Text Wrap feature so I'm gonna hide my NO layer and turn on my YES layer so I can show you what I mean. So here is a single block of text. No threading, here's my image. The image was placed into Illustrator. And what I would do is set it on top of the content, the text, where I want it to go.
Now with the image selected, you'll go up to Object, and choose Text Wrap, Make, and this makes the copy wrapped. You see this double border here around the outer edges of the graphic? That's what we call the wrap space. And by default, that's set to six pixels but you can override that setting if you go back up to the Object menu, Text Wrap, and then choose Text Wrap Options. Here you'll get a dialog box. Turn on your Preview where you can increase or decrease the amount of Wrap.
Now, if you're used to working in HTML and CSS, you'll know that when you add padding to an object, you can add your padding to any or all of the four sides of an object. In Illustrator, Text Wrap uniformly applies to all four sides. So if you knew you wanted to have 10 or 20 pixels of space between your object and your text, what you do is you'd set that here. So if I want 10 pixels for instance, I'm gonna leave it set to 10 pt because it converts automatically to 10 pixels and then click OK.
Now just a word of note here. This image is not embedded. If you click the Embed button, then the text will wrap all the way around the edges including any transparent areas and this is not what you wanna do for web because you can't do this yet for the web. So I'm just gonna undo with my keyboard shortcut and put it back the way it was before. And just remind you that what you wanna do is not embed the image. Just place it in so it's a link file. And then, you'll notice too that I have the image edge aligned with the left edge of the text so that padding along the left extends passed the left edge of the text and the same goes on the top.
The padding, in this case, the wrap space extends above the top of my text line. So really, when I convert this into HTML and CSS, all I really need to be concerned with is this wrap space. And in this case, it's 10 pt or 10 pixels so that when I go to my CSS, I just plug in 10 pixels to the right and the bottom of this particular image and I get instant wrap as long as I insert my image within my paragraph text. While the image has Text Wrap on it, you can move or reposition the image.
So if I chose instead, for instance to move my image over to the right, and I'll try to line it with the right edge of the text, I still get the same wrap feature which is pretty amazing. And then all I have to do is go into my CSS and adjust the sides that the padding was on. So in this case, now I only need padding on the left and the bottom but not the top and the right. Now, if anytime that you're working with this technique in Illustrator, you wanna let go of the Text Wrap feature, you can release it by going back up to the Object menu, choosing Text Wrap and Release and then it goes back to the way it was.
So the next time you're mocking up a document in Illustrator for the web or a mobile layout, try using the Text Wrap feature to make your text flow gracefully around your images.