Join Justin Putney for an in-depth discussion in this video Using 9-slice scaling to create responsive symbols, part of Illustrator for UX Design.
In this video, we're going to take a look at how to make your symbols more responsive to different documents, different environments, different sizes. So, picking up where we left off in the previous video with the same file. If you don't have it open, you can find it in the exercise files Under chapter 3, 03, 03, and the file is called scroll box. So I'm going to clean up my art board a little bit. I don't need this blue variation we created, so I'm just going to highlight it and click delete. And do the same thing with another one of these instances. And then I'm going to Bring down just one instance.
And let's just say for the sake of thinking here, we're doing a sort of a portrait layout for something. So it's going to be wider than it is tall and we need to have a wide scrollable text frame in there. So, if I just were to drag this scroll frame out It gets kind of ugly. Of course we do want our wireframes to look sort of temporary and sketchy, but this is just too much for a designer's eye, right? So, let's go ahead and make this a little nicer. Let's make it a little more friendly to our scaling, and let's give some instructions to Illustrator on how we want it to scale.
So when we created this symbol, we didn't check a particular box in that dialog, but we can go back, And reselect it now. So, in the symbols panel I'm going to select the scroll box symbol and go down to this little thing that looks like a file list icon and it is the symbol options. So, if I click on that, I get the original options that we use to create the symbol with. So, I'm just going to check the Enable Guides for 9-Slice Scaling, and click OK, now look at that. It magically looks the way we expect it to, and not only that, I can scale it, and it would look just the way I would expect it to.
The buttons are staying the same size, the scroll elevator is changing which is actually kind of nice. It kind of fits with the look. And all the strokes are the width that they're supposed to be. So let's take a look at how that happens. To do so, let's just double-click on the symbol and get into Symbol Editing mode. I double-clicked in the Symbols panel, and what I have here is the definition of a symbol. And now in our definition, we have these four dotted guides. And basically what these guides tell us, are how we're slicing this up, and which areas of the symbol we're sort of going to protect from scaling.
So, as a reference we've created this other document so you can see how these different nine compartments scale differently. You can find it in the final exercise folder for this particular video Or you can just look at it on screen here. And the basic idea is that our symbol, if I were to go in and double click and take a look at it, is just nine equivalent circles. And one of 'em in each of these slices. And if I go back to the art board, here's one that I've scaled up in both dimensions.
And one that I've scaled down in both dimensions. And you see that the circles in the corner rectangles the corner slices of that 9 slice grid have not scaled in either dimension. Now the top one in the middle has scaled only horizontally the middle one on the left has scaled only vertically. And you can see this effect in real time by just scaling the symbol. So if I were to make it wider, you'd see that effect, that all of the symbols in the middle are affected by the horizontal scaling.
And if I were to scale it vertically, you would see that only the middle row of circles are affected by that scaling. So that's the general idea. And if you ever have a question of how exactly is this 9 size scaling going to effect my document, you can come back and take a look at this reference file. Now that we've made these symbols more reusable, we're going to take a look at how we take them from one document to another in the next video.
- Creating and positioning guides
- Building shapes
- Designing reusable symbols
- Creating character and paragraph styles
- Adding text
- Using artboards to organize and display content
- Exporting to multipage PDF