INFOGRAPHIC SERIES - Symbols & scaling with 9-Slice

9-Slice scaling is not something that you hear often, however it is quite effective for scaling complex objects without distorting certain attributes. Using Symbols, the 9-slice features allows to scale/resize objects quickly and efficiently without using the Direct Selection tool to select and move only portions of a shape.

---

I created a shape with rounded corners and an inset path.

When I scale the shape, the corners get pulled out of proportion. And I see this numerous times when rounded corner shapes are used. I see this on ATM machines and credit card machines... AND IT DRIVES ME NUTS!

Here is a ribbon used for a headed or infographic element.

However, when the entire shape is pulled, it gets distorted. 

---

Open the Symbols Panel. Window>Symbols. Select the object you want to turn into a Symbol and drag the shape onto the Symbols Panel to save it as a Symbol. ​

This dialog box will open…. Name the Symbol. Check Dynamic Symbol. Check Enable guides for 9-Slice Scaling. Click OK.

It will become a symbol as indicated by the + shape in the middle of the object. 

As a Symbol, it can be scaled without skewing attributes out of proportion... all thanks to the 9-Slice Scaling.

---

Double-click on the object to call up the 9-slice scaling. The guide indicates the area in which the scaling occurs. 

The red highlighted area will scale, everything outside will not scale, keeping the appearance intact. Adjust the guides to the edge of the area you want to scale but do not go into the areas that are to be left out of the scaling effect. Then click ESCAPE to get out of 9-slice edit mode. 

Setting up the ribbon with the 9-slice allows the ribbon to go wider without distortion.

However, scaling this ribbon vertically distorts the ends since they were not included in the 9-slice area. Horizontally does not distort the shape. 

---

With this ribbon, creating a scalable symbol is more tricky. The 9-slice is only set up on the right side making only that section scalable.

Scaling one portion of  the shape to make the ribbon longer or shorter can be helpful when you need more area for type or icons but don't want to change the overall height.

Making symbols that are scalable can make creating icons for websites much easier!