- #25 Understanding the Perspective Grid
- #26 Drawing in Perspective
- #27 Creating Variable-width Strokes
- #28 Creating Better Dashed Strokes
- #29 Adding Arrowheads to Strokes
- #30 Drawing with the Shape Builder Tool
- #31 Drawing Behind and Drawing Inside
- #32 Creating Bristle Brushes
- #33 Using Multiple Artboards
- #34 The Power of Appearances
- #35 Creating Crisp Artwork for the Web
- #36 Preparing Scalable Web and Print Graphics
This chapter is from the book
This chapter is from the book
This chapter is from the book
#36 Preparing Scalable Web and Print Graphics
A long-standing frustration about creating Illustrator graphics was how objects distorted when scaled. Everything looked fine when an object was scaled in the same proportion, but if it was scaled more in one direction than another, rounded corners became stretched and horizontal and vertical stroke weights became inconsistent (Figure 36a).
)
Figure 36a When Illustrator artwork (left) is scaled in one direction only (right) the corner shapes are distorted, and the horizontal and vertical stroke weights become inconsistent.
For several versions, Illustrator has supported 9-Slice Scaling—an intelligent object scaling method used by Flash. Symbols created in Illustrator and destined for Flash could have 9-Slice Scaling guides established in Illustrator before they were exported (Figure 36b). Until Illustrator CS5, however, this kind of scaling worked only after the art was exported to Flash. Illustrator itself could not take advantage of the feature. Now you have the benefit of the same kind of intelligent scaling Flash has supported for all Illustrator artwork, whether destined for print or the Web.
)
Figure 36b Enabling 9-Slice Scaling when creating a symbol allows for intelligent object scaling in both Illustrator CS5 and Flash CS5 Professional.
What 9-Slice Scaling does is establish four guides (two horizontal and two vertical) on the symbol, dividing it into nine regions (Figure 36c). You can position the guides so that rounded or other stylized corners are "locked off" from scaling. The top and bottom center regions scale horizontally, and the left and right center regions scale vertically. Only the center region scales in both directions. When the object is scaled disproportionally, stroke weights remain consistent and custom corners are unchanged (Figure 35c).
){kind=link}
)
Figure 36c The four scaling guides divide an object into nine regions, each with its own scaling behavior.
)
Figure 36d Symbols with 9-Slice Scaling enabled maintain a consistent stroke weight and keep the four corner regions consistent with the original symbol's shape (left), even when scaled in only one direction (right).
Any Way You Slice It
Illustrator CS5 has improved another kind of slice behavior to make your Web workflow more efficient. Artwork created in Illustrator that has been sliced for eventual use in a Web layout (Object > Slice), is much easier to selectively export with the addition of the Slice Selection tool 
, which shares a spot in the Tools panel with the Slice tool. Defined slices can be selected and more easily exported with the new Save Selected Slices command (File > Save Selected Slices...) without having to export the entire layout. You can even have Illustrator generate the HTML necessary for the selected slices.