Tuesday, June 3, 2008

Adobe Fireworks CS3 - 9 Slice scaling

I can bet on the following functionality that it is just amazing for any designer and after looking at its working they would want it in every designer application. This is the 9 Slice scaling functionality.

I think it will be self descriptive through images rather than trying to explain you by writing pages of text.

Consider the following object.

After scaling it by 150% in the horizontal direction WITHOUT 9 slicing applied to it.

After scaling the same object by 150% in the horizontal direction WITH 9 slicing applied to it.

The following figure will explain you more how the guides are placed for the above object so that the curves at the end of the object donot distort when it is transformed.

The region in between the vertical guides gets scaled when the object is scaled horizontally. Similarly when the object is transformed vertically, the region between the horizontal guides gets expanded.

What you see above is done for vector objects, but the same principle works for bitmap objects also and I can bet that this is a great thing for desktop, web and mobile application UI designers.

The only disadvantage I see for it is that the object needs to be converted to a symbol for 9 slice scaling guides to be applied to it.

No comments: