- #30 using Vector tools
- #31 Using Shapes as Image Elements
- #32 Understanding the Transform Tools
- #33 Using the Transform Tools
- #34 Distortion-free Scaling with the 9-Slice Scaling Tool
- #35 Creating a Custom Shape
- #36 Understanding the Pen Tool
- #37 Masking an Image with a Vector Shape
- #38 Using the Auto Vector Mask for Quick Fades
This chapter is from the book
This chapter is from the book
This chapter is from the book
#34 Distortion-free Scaling with the 9-Slice Scaling Tool
The 9-Slice Scaling tool provides you with a way to quickly scale an object (vectors usually, but not always) and keep certain areas (such as corners) from becoming distorted as the object is resized. In CS3 you could only apply 9-slice scaling to symbols. But there are many situations in which you might have a particular shape or bitmap used only once in a design. In that case, there’s not much point to turning it into a symbol; hence, the 9-Slice Scaling tool.
With pixel-based corner roundness, a standard rectangle scales well when dragged from a corner but not well if the height or width is adjusted independently. More complex shapes, such as a UI panel or navigation panel for a Web site, would have the same distortion difficulties if they were adjusted independently. The example in Figure 34a shows an object that could be used in a variety of situations.
)
Figure 34a A custom path created in Fireworks.
Let’s say you decide to widen the object to fill a larger space. Without 9-Slice Scaling, you’d get the result shown in Figure 34b.
)
Figure 34b Scaling a shape in just one direction can produce undesirable results.
By using the 9-Slice Scaling tool and setting the guides to preserve the corners of the shape, you’ll get much better results, as shown in Figure 34c.
)
Figure 34c The 9-Slice Scaling tool makes it easy to do off-the-cuff scaling without distorting the corners.
The secret to 9-slice scaling, whether it’s a symbol, an object, a bitmap, or a vector, is to find safe areas where scaling will not produce any noticeable deformation (Figure 34d). With a vector containing a solid fill, that’s pretty easy. With more complex shapes, you need to plan out your guides a little more carefully. Photographs are not good candidates for 9-slice scaling, but a screen grab of a software panel might scale quite well using the 9-Slice Scaling tool.
)
Figure 34d The 9-Slice Scaling guides (dashed lines) reset automatically each time you commit to a scaled size.