Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
You know, when you're designing inside of Illustrator, it can sometimes be difficult to visualize how your artwork is going to appear when users interact with it in an interactive manner. For example, when people build Flash projects, sometimes they add this really cool animation where things just kind of resize, or move around the screen, and while it's easy to draw graphics at one state, it's kind of important to also be able to visualize how that artwork is going to look when it actually goes through these transformations. One such way to do that is by using a feature called 9-slice scaling. It's basically a way to build some intelligence into artwork that tells the artwork how to scale according to your specific instructions.
Let me give you an example. Inside of this document here called monthly_specials, I'm going to go to my Symbols panel here, and if I scroll down the list over here, I actually have a symbol called Ducky. I'm going to drag this out over here, cute little ducky that's here, and maybe I want to use this as some kind of design element across the bottom of my page. But you know, I want to create one of these flexible layouts, with Flash you can do that, because I want it to maybe design something that would be viewed on many different types of devices. So, it might look one way on a mobile device but yet another way on a desktop computer. You get the idea.
However, right now if I take this piece of artwork and I want this to kind of stretch along the bottom of my page, if I just simply take this and I stretch it, you can see that the entire artwork stretches in really not a nice way at all. In fact, I may even refer to as kind of a hideous way. I'm going to press Undo. The same thing also applies, if I want to scale it upwards, for example, you can see that the entire shape here gets stretched and distorted. So I am going to press Undo, and right now this is a symbol, so I am going to take advantage of a setting that applies specifically to symbols itself, something called 9-slice scaling.
So the first thing I need to do, in order to use this, is I need to turn on or activate the 9-slice scaling feature inside of this symbol. Now I can do this when I first define the symbol, or I can also do this at any other time later on in my workflow, by coming here to the Symbols panel, selecting the symbol itself and then clicking on this button here, the Symbol Options. In this case, here I am going to turn on the Enable Guides for 9-Slice Scaling option and then click OK. Now that I've done that, I'm ready to start dialing in the settings for the 9-slice scaling.
I am first going to double-click on the symbol itself, and that's going to allow me to edit this symbol. It's going to enter me into Isolation mode. And you can see that now that I am in Isolation mode, these guides have suddenly appeared. There are four guides: one, two, and then these two over here as well. However, because these guides all criss-cross each other, they define nine distinct regions. I have one over here, one here, one here. I have three along the bottom and three alone the middle, so that's nine sections.
Basically, by positioning these guides, I can define how this artwork should scale. So here's what I am going to do. I am going to move this guide down to about right about over here, and I'll move this guide down to here, and then I'll take a guide and move it here, and I'll move one over here. Let's discuss exactly what it is that I've just done. Basically, the middle area of these nine slices here is going to scale both horizontally and vertically whenever it stretched. However, the corners of my artwork, in other words, the upper left-hand corner, the upper right-hand corner and the lower left and right-hand corners, those areas, any artwork within those areas will never scale at all.
If I look at the other regions here, these four regions here on this side, the middle-right, middle-left and then middle-top and middle-bottom, those will only scale in a specific way. So the middle, right, and left over here, those will only stretch or scale when this is stretched vertically. And the two middle regions here, at top and bottom, will only scale when this artwork is stretched horizontally. To see how that actually works, I am going to hit Escape on my keyboard to exit Isolation mode, and now watch what happens when I scale this piece of artwork. If I go ahead and I stretch this now, you can see that the top part of the duck over here is not distorted at all.
The only part that gets stretch is the part that I've defined, and if I make this taller I can see that this whole area gets stretched, but this part doesn't get changed at all. So this way I can build some intelligence into my artwork so that whenever this artwork is actually resized or adjusted inside of my application, or inside of my Flash project, I know that it's going to look just the way that I want it to.
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.