Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, I'm going to show you how to adjust the guidelines that are associated with 9-slice scaling, so that you get exactly the results you're looking for. I've saved my progress as 9-slice scaling.ai. I went ahead and undid the last step that I performed in the previous exercise. So that we're back to our original combination of the arrow and the tip bar. And it's called Arrow and tip down here at the bottom of the symbols panel and I do have 9-slice scaling turned on. I'm going to go ahead and drag this guy up a little bit so that I can scale it once again. You may recall that once I start scaling this graphic it's scaled in a very bizarre way, but I want to examine what's going on for moment.
I'm going to pressed Ctrl+R or Command+R on the Mac to bring up my rulers. Then I'm going to drag a guideline down to right there, because that's where the break in the action is happening. Illustrator is strangely adding another point right there at that location. And that's because this area above the guideline, the guideline that I just added is not getting scaled, and the area below the guideline is getting scaled, which argues in favor by the way of making sure that you don't have any diagonal lines at the scale points.
And I'll demonstrate what I mean in more detail in just a moment, but I want you to see what happens if you end up setting that guideline at the wrong location. All right, so I'm going to press Ctrl+Z or Command+Z on the Mac, a few times in order to restore the un-scaled version of the arrow. And I'm going to press Ctrl+R or Command+R to get rid of my rulers. And then I'm going to double-click on this instance, in order to enter the Symbol Edit mode. You can also by the way, I'll Cancel out of this it's an alert message for a moment. You can also click on the Edit Symbol button up here in the Control panel, that works as well.
Either way you're going to get this alert message, so you may want to at this point say Don't Show Again. You get the idea, thank you very much Illustrator. Click OK and now notice we've got the slices these are them I'm going to go ahead and zoom in on this graphic, we have a total of four guidelines. Notice that we've got 2 vertical and 2 horizontal and you might ask okay, so where is the 9 slices come in? Why isn't this called 4-slice scaling? And the reason is because these four guidelines slice the graphic into nine pieces.
So notice that we've got three pieces at top 1, 2, 3 right there. Three in the middle and three at the bottom. And what's happening is just the fifth slice out of the group is the one that get scaled everybody else stays the same size. So slices 1 through 3,4, 6, and 7 through 9 remain fixed, five scales in-between. So what we want to see happen is we want the shaft of the arrow to scale. So I'll go ahead and move these guidelines inward, so that just the shaft right there is trapped inside of the scaling slice, that will also include this horizontal portion of the tip bar and notice by the way everything inside of these two vertical guidelines is exactly horizontal.
So we're not going to have any of that weird stretching that we saw just a moment ago and it's no surprise that we saw the stretching, because this portion of the arrow was inside the stretch zone whereas this portion of the arrow was not. So that's why all of a sudden things broke apart. To avoid that once again what you want to see is you want to make sure that your guides are trapping vertical and horizontal elements. So, if I drag these two horizontal guides down to the tip bar so that they're inside of the rounded corners.
We don't want to integrate the rounded corners in that thing. So you just want to get the vertical portion and it's okay to cheat way inward, you could make a really, tiny area that ends up getting scaled if you want to, like so. And this region seems pretty good to me. It's entirely vertical in that region, so it's going to receive a vertical stretch and so you're not going to be able to see any weird transitions. All right, I'm going to zoom back down out, in affect I'm going to take my zoom ratio to 80%, because that's the way this page fits onscreen. And I'm going to press the Escape key in order to accept my changes and exit the Symbol Editing mode.
And now watch this, if I press Shift+Tab in order to hide my right side panel, so click on the graphic to select it, grab my Scale tool and drag in order to scale the graphic. Notice that if I perform a horizontal scale like this one here then I scale the shaft. If I perform a vertical scale, then I scale the tip bar and everything works out extremely well. So it's just this miraculous feature and 9-slice scaling is something you only get if you convert a graphic to a symbol. Now something else to bear in mind, what if you scale the graphic really small, so that the shaft is pretty much eliminated.
That area inside of the vertical guidelines goes away and the area inside the horizontal guidelines go way as well. Well, then you start making the graphic itself smaller and you end up compressing away everything inside of that fifth slice. So you just have to be aware that, that's going to happen, or can happen if you make the graphic small enough. If you scale the graphic larger, even if it's a proportional resizing, once you've scaled it beyond the size of the original symbol you're going to perform the stretch. You're going to scale out that fifth slice and the other slices will remain intact.
So, if you're all concerned about that you can create two variations on a symbol one with 9-slice scaling turned off and another with 9-slice scaling turned on. Here is something else that you might want to take advantage of. I'm just going to go ahead and make this guy sort of near the original size that it was in the first place. And let's say I decide to Rotate this arrow, because after all given that it's an arrow, I might need to rotate it. Well, in that case what you want to do is keep track of how much rotation you apply. For example, if I go ahead and double-click on the Rotate tool there and I say you know what I want to rotate this guy 30 degrees press the Tab key to preview what I've done.
Looks good. Click OK. That's a good angle for my arrow and now I think after the rotation, I want to go ahead and scale this arrow a little bit. Well if you just grab the Scale tool and you start scale on the way you are going to take advantage of the 9-slice behavior, but you're also going to end up slanting that graphic. And so if you don't want to perform and you're kind of slant there what you do and you may recall this feature from way back when. You press Ctrl+K or Command+K on the Mac to bring up the Preferences dialog box and then you would rotate the Constrain axis by changing the Constrain Angle value to 30 degrees and then you would click OK.
And now if all goes according to plan I'm going to Ctrl+Drag this guy down a little bit Command+Drag him into a different position on the Mac. And if I were to drag downward like so then I'm just going to scale the height of the graphic, excellent, and then if I were to drag to the right I'm just going to scale the length of the graphic. And because I'm scaling along 30 degrees I'm matching my original rotation value. So just a few things to keep in mind when you're working with 9-slice scaling. Brand-new feature here inside of Illustrator CS5.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 64300 Viewers
119 Video lessons · 71696 Viewers
125 Video lessons · 32350 Viewers
103 Video lessons · 31583 Viewers
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.