Design Learning Guide for Fireworks: Scaling objects without distortion with 9-slice scaling

No matter how much you plan ahead, there will be times when you need to readjust the dimensions of the elements in your Fireworks document to make them fit your design better. Happily, Fireworks CS4 makes it simple to make these kind of adjustments.

In earlier versions of Fireworks, the process of scaling bitmap and vector objects could sometimes result in unexpected or unintended changes to the integrity of the original graphic. But with the 9-slice scale tool, you have complete control over specifying which part of the object scales—so you can fit in all the pieces of your project and preserve the intended look and feel.

This section describes the normal process for scaling files and then covers how 9-slice scaling allows you to adjust the proportions of an element while maintaining the correct corner ratios, text, and graphics. I also provide step-by-step instructions outlining the process for using the 9-slice scale tool to scale both bitmap and vector objects.

Scaling files normally

When you need to resize an object, you can select the Scale tool (or press the Q key) and then drag one of the four corner handles. If you wish to constrain the proportions of the object you are scaling, press and hold the Shift key while dragging the corner handles. As I mentioned previously (in Selecting and editing bitmap images), you should never scale bitmap graphics larger than their original size; doing so will result in loss of image quality.

In earlier versions of Fireworks, if you scaled an image with the Scale tool there was a chance that the image would no longer retain its form. For example, this graphic is currently displayed at its original size (see Figure 1).

This is a flattened image, and rather than being narrow, it would fit the design on the page best if the width of the pod was scaled wider. After using the regular Scale tool to resize the graphic, the radius of the rounded corners have changed, and the text and graphics are distorted (see Figure 2).

Scaling files with the 9-slice scale tool

With 9-slice scaling, you can change the dimensions of a graphic without squashing or distorting the graphics (see Figure 3). Here's how to use the 9-slice scale tool to adjust the dimensions of an image and avoid adding distortion. While the image is selected, choose the 9-slice scale tool. It is one of the series of tools available under the normal Slice tool. This tool is so named because it refers to splitting the image into nine different portions. By setting the two horizontal and two vertical guides, you can define exactly which portion of the image will scale.

Setting the guides takes a bit of strategic planning. The goal is to set the guides in a way that the areas between them do not contain any pixels that will look unusual once the scale operation is applied (see Figure 4).

In Figure 4, the guides are carefully placed to avoid any bitmap graphics or text, and also fall on the middle edges of the image, to ensure that the rounded corners will not be affected by scaling. Only the regions in between the two sets of guides will be scaled. Since there is a solid background color, it is possible to achieve scaling without any distortion (see Figure 5).

The pixels between the "T" in Special Event and the left side of the rose were duplicated as the graphic was scaled, but it is not noticeable in the example above because there is a continuous area of solid gray.

For this reason, vector shapes (without gradients) and images containing continuous tone background areas are good candidates for 9-slice scaling.

Figure 6 shows an example of a vector shape in its original form, before scaling.

If the design requires that this vector shape is scaled taller, then the 9-slice scaling tool works well because the guides can be placed as in Figure 7.

The resulting scaled shape uses only straight edges when calculating the new dimensions, so none of the curved edges have been affected (see Figure 8).

When you are setting the guides for the 9-slice scaling, look for regions that contain flat edges and continuous tones.

Scaling bitmaps larger than the original image does not work well—even when you use the 9-slice scaling tool—because the pixels inside the image are not continuous. Scaling bitmaps up to a larger size results in unusual results. For example, look at the object in Figure 9.

It might seem that the scaled areas would be fairly inconspicuous if you were to set the scaling guides on the bitmap image as shown in Figure 10.

However, the resulting scaled image reveals that the scaled pixels in between the guide regions; the pixels that were scaled are stretched within these areas (see Figure 11).

For this reason, it is best to use 9-slice scaling on vector shapes, text objects, screenshots, and GIF images that contain areas with continuous tone. Solid color backgrounds can be scaled without causing distortion.

Scaling bitmaps smaller than their original size will work with the 9-slice scaling tool if you strategically place the resize guides, as in the example in Figure 12.

The scaled down version of the bitmap image looks like Figure 13.

Where to go from here

To learn more about 9-slice scaling, read the article Improved 9-slice scaling in Fireworks CS4 by Sarthak Singhal. Also, watch the video Scale objects with 9-slice scaling by Jim Babbage.

Finally, explore other areas of the Design Learning Guide for Fireworks CS4.