Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
In this movie, let's take a closer look at some of the benefits of using the area type object inside of Illustrator. Area type is really far more structured, and it's used more in an environment where we have some kind of flow happening with the text itself, which is quite common when designing a web page. I'm going to start by creating a new document here. Let's just create a new web document. I'm going to use the default settings here. We discussed before that if I take my Type tool, and I just click and release my mouse on the artboard itself, I create a point text object.
I'm going to press Undo, and instead of just clicking on the artboard, I'm going to click and drag to create a rectangle. I'm doing this now with the Type tool. So when I release the mouse now, I end up with what we call a text frame, and I now have a blinking cursor inside of that text frame. The benefit of this is that as I start typing some text here, as I get close to the edge of the boundary of this frame, you'll see that Illustrator will automatically wrap that text to the next line. So this is what we're refer to as something called text flow. The real benefit of having this text frame is that I can resize the frame at anytime, and the text will automatically reflow to fit that frame.
So, for example, in this case, now I am going to go back to the Arrow tool, and I'm going to take this frame rate right now. I'm going to turn on, on the View menu, the Show Bounding Box option, which gives me the handles. You'll notice that if I click and drag on this, as I click and drag and I make this a more narrow text frame, the text now reflows to now fit that particular frame. If I make this a lot wider, you can now see again how the text flows as well. In fact, the Illustrator gives me a nice little preview, in this blue color right now ,so I can see exactly how the text is flowing as I go ahead and make the changes in real time.
Now, in reality, there are a lot of benefits to working with area type; however, we don't have that freedom that we normally get with point type. Point type is really easy to kind of just quickly throw on a page, move it around, and you kind of treat each text object as if they were their own little objects. However, when we think about text within some kind of a frame, we can either have one large text frame on our page, for example, something like this, and we can style our text differently within it - maybe have paragraph after paragraph - of course, we can also create columns and do other things as well.
So let's take a look at some of the advanced features that we have available to us when we start using the area type feature inside of Illustrator. I am going to start by going over here to the Type menu. I'm going to choose this option here called Area Type Option. Again, this is available only for area type objects, not for point type objects. I have a dialog box here, which I'll click on the Preview button, and you can see that right over here I have the ability to determine the width and the height of this frame. This is, obviously, very important because as we've discussed all along, precise measurements are very important when it comes to web design.
So I can choose an exact width or height for this text frame. We'll see later that I can also do that to the Transform panel, but you can see that I can also choose the number of columns for my text. If I want there to be two columns of text, for example, you can see that now the text flows here on one column. When the text gets the end of that frame, it'll automatically start flowing to the next column. I also have some additional options here called Offset, or it will be called Inset Spacing, and this allows us to kind of have the text offset a little bit from the edge of the frame itself. So here is the actual edge of the frame, and here is the offset amount that's here as well.
A little bit later in this chapter, we'll talk more specifically about how we can use the inset spacing to our advantage, specifically for web design. Let me click Cancel, though. I'm going to go back to this original shape here. In addition to actually setting columns of text within a single text frame, we have the ability to create what we called something called text flow, or what we call even a thread of text inside of Illustrator, where I have a story of text that begins in one frame, but that flows through a completely different frame as well. The way that we would do that, I am going to actually going to resize now this frame, just a little bit over here, and I want to point out some interesting elements about the area text object itself.
Notice that because I have the Bounding Box option turned on, I have these handles that appear around the perimeter of the object itself, which I can use to resize the text frame. However, there are also two more boxes that appear: one on the upper left-hand corner, one on the lower right-hand corner, and we refer to these boxes as ports. The ports control how text both enters and exits the frame itself. Now, this port over here is called the In port, meaning that text enters through this port, and this is called the Out port, text exits through that port as well.
So if I wanted to create a thread, meaning I want to text to start in one frame and then continue in another frame, what I could do is take my regular Arrow tool here and simply click on the Out port. Notice that when I do that, I get this little icon, which we call the loaded cursor. I can now click and drag to create now a second frame. Now if I select both of these here, you can see that they're connected by this line. Basically, any text now that continues to flow, if it goes beyond the border of this frame, will automatically start flowing into this frame here as well.
This is, again, one of the benefits of working with area type objects, because point type objects cannot flow in this way. Now that we have a better understanding of the two main different types of type objects that exists inside of Illustrator - point text for graphical use, area text for text flow - we can think about adding text to our web page and format that text appropriately.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.