Join Mordy Golding for an in-depth discussion in this video Using 9-slice scaling options with symbols, part of Illustrator CS5 New Features.
When using Illustrator, we normally do a lot of stretching. No, I don't mean doing exercise, although it probably isn't a bad thing to get out of your seat once in a while and walk around. What I am referring to though is scaling your artwork inside of your Illustrator. Now, we already know that you can use Shift key on your keyboard to constrain when you scale. For example, if I select this artwork right here, and I do not hold down the Shift, I can stretch it. But if I do hold the Shift key down, it constrains so the proportions are always correct. Let me press Undo to go back to where I was before. When we are working with Symbols, we'll also need to scale the instances of those symbols on our artboards, but it's important to note that Symbols have the ability to scale artwork intelligently.
Let me explain what I mean. I am going to start with this little tag right here. I am going to zoom in on this part of the artwork here, and I'll select this Parsley tag. And I am going to turn this now into a Symbol. I'll tap the F8 key on my keyboard to bring up the Symbol Options dialog box. I'll give it a name. Let's call this one Parsley Tag, and I'll go ahead and click OK. Now if I wanted to this tag a little bit longer, watch what happens when I grab one of these edges here and I stretch the symbol. You can see that all the artwork has become distorted. You'll notice here that the end is actually stretched. It does not appear like these do over here.
The text itself has been stretched as well. I am going to press Undo. Now, I am going to go ahead now and select this symbol here my Symbols panel. And I'm going to click on the button here called Symbol Options. Note that there is now a check box in the Symbols Options dialog box called Enable Guides for 9-Slice Scaling. I am going to go ahead and enable that. While this setting was available in previous versions of Illustrator, this setting itself only worked after you brought that symbol into Flash Professional. However, now we'll see that 9-Slice Scaling, which is a form of intelligent scaling, now works directly inside of Illustrator as well.
So, with that option checked, I am going to click OK. Now I want to edit that symbol. So, I am not going to double-click on the symbol here in the Symbols panel. Because I have specified that option for 9-Slice Scaling, I now see a series of four guides that appear inside of my document window. The way that I position these guides will allow me to control exactly how this artwork is scaled when stretched. The reason why this is called 9- Slice Scaling is because the four guides actually create nine different regions on my screen. Let's identify what these areas mean. The middle area here is an area that will stretch, or scale both horizontally and vertically.
The regions that appear in the corners, for example, upper left, upper right, lower right, and lower left are protected areas, meaning that those areas do not scale at all. These two areas in the middle on the left and on the right side will only scale vertically. The two areas that appear in the middle, top, and bottom will only scale horizontally. By positioning these guides, I can control exactly how Illustrator scales or stretches this artwork when working with the instances on my artboard. For example, I am going to start by moving this guide just a little bit here to the right, and I'll drag guide here to the left of the text itself.
Next, I'll move this guide up just a little bit over here, and I'll drag this one down to here. By doing so, now when I scale my artwork,k I know exactly which part is going to stretch and which parts won't. I'll tap the Escape key on my keyboard to exit the Symbol editing mode. Now, take a look at what happens when I scale this symbol instance. I'll drag from the same place as before, and you could see that right now, the tag simply gets wider. The ends here look exactly the same as the others, and the text is not stretched at all.
For certain types of artwork, this is incredibly useful, especially for Web graphics where, for example, I may be creating buttons that may stretch. There is one thing you want to be careful about when using 9-Slice Scaling inside of Illustrator. That is, when you want to scale your artwork in proportion, you may not get the results you are looking for. For example, if I take this artwork right now and I make it narrower or wider, I get the results that I want. But if I try to now hold down the Shift key and make it larger this way, take a look what happens. Remember that the 9-Slice Scaling is specifying exactly which part of the artwork get scaled.
In this case, it results in artwork that looks like it's distorted the wrong way. That's why 9 Slice Scaling is provided as an option that you can turn on for symbols where needed, but when dealing with regular artwork that will be scaled normally, you would not be using 9-Slice Scaling. Of course, as an added benefit to using 9-Slice Scaling here inside of Illustrator, if you do take this artwork and bring it with the Flash Professional, all the 9-Slice Scalings are preserved, and they work just fine in Flash Professional and when played back inside of the Flash Player.
- Creating complex art from basic shapes with the Shape Builder tool
- Transforming flat artwork using perspective grids and vanishing points
- Creating variable-width strokes
- Controlling dashed line length, corners, and gaps
- Creating original brushes using the Brushes panel
- Adding arrowheads to strokes
- Creating web-ready graphics, text, and slices
- Integrating with Flash Catalyst
Skill Level Intermediate
Q: In the “Mapping flat artwork to perspective grids” video, directions for moving a box in a perpendicular direction say to use the Tilde key. However, upon attempting to move the box using this method, the box continues to move in the same plane, not in a perpendicular fashion. Is the technique in the video incorrect?
A: Adobe changed this keyboard shortcut just before the final release. The shortcut is the "5" key. The video tutorial has been updated to reflect this.