Jason Hoppe Adobe Certified Expert & Adobe Certified Trainer
  • Home
  • Contact
  • Classes
  • Blog
  • Blog Index
  • Portfolio
  • Max 2022

Design Points n PixelS


INFOGRAPHIC SERIES - Symbols & scaling with 9-Slice

10/25/2016

0 Comments

 
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.
Picture

Picture
I created a shape with rounded corners and an inset path.
Picture
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!
Picture
Here is a ribbon used for a headed or infographic element.
Picture
However, when the entire shape is pulled, it gets distorted. 

Picture
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. ​
Picture
This dialog box will open…. Name the Symbol. Check Dynamic Symbol. Check Enable guides for 9-Slice Scaling. Click OK.
Picture
It will become a symbol as indicated by the + shape in the middle of the object. 
Picture
As a Symbol, it can be scaled without skewing attributes out of proportion... all thanks to the 9-Slice Scaling.

Picture
Double-click on the object to call up the 9-slice scaling. The guide indicates the area in which the scaling occurs. 
Picture
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. 
Picture
Setting up the ribbon with the 9-slice allows the ribbon to go wider without distortion.
Picture
However, scaling this ribbon vertically distorts the ends since they were not included in the 9-slice area. Horizontally does not distort the shape. 

Picture
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.
Picture
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.
Picture
Making symbols that are scalable can make creating icons for websites much easier!
0 Comments



Leave a Reply.

    RSS Feed

    Archives

    March 2021
    February 2021
    December 2020
    September 2020
    August 2020
    July 2020
    June 2020
    May 2020
    April 2020
    March 2020
    February 2020
    January 2020
    December 2019
    November 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    July 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    June 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015
    September 2015

    RSS Feed

Proudly powered by Weebly
  • Home
  • Contact
  • Classes
  • Blog
  • Blog Index
  • Portfolio
  • Max 2022