Quick tip: Fireworks 9 slice symbols

Posted by & filed under Quick tips.

It’s no secret that I’m a big fan of Adobe Fireworks and just recently I was reminded why.

I was putting together a small job for a client who needed to put the finishing touches onto his website. He has a video trading website and one of the requirements when listing videos for sale is to include a censorship rating. We have about 9 common labels ranging from G through to R .. and in typical fashion the artwork available was pretty poor and needed to be redeveloped.

I wanted to display the labels via CSS and knew that I was constrained to retaining as much as I could of the official label so that it was recognisable but I also needed to provide a reasonable area so that the client could provide censorship descriptions; eg “Contains low level violence”.

Here is the slightly redeveloped label.

These labels have rounded corners and, in most graphics programs, when you scale an object with rounded corners you get distortion. This is true of Fireworks and is it’s default behaviour … unless, however, you convert your object into a 9 slice symbol.

1. Create your symbol

I started by drawing the objects that would be consistent across the range of labels and converted them into a symbol. The point of using a symbol is that if you can update the original symbol file anytime and that change will be reflected through your artwork. Very very handy indeed.

Here is my basic symbol.

2. Turn it into a 9 slice symbol

Nine slice symbols essentially let you define an area of your symbol that will scale when you resize your symbol .. and other areas (the corners) that wont. Here is how I set mine up.

Firstly you need to enable the 9 slice option in the properties inspector

Then you can drag the blue guides on your artwork until you have them something like shown below. With this setup I could expand my label width considerably and still retain the correct proportion for the corners and the sides.

So why do you need this?

Here’s an example of what happens when I scale this object with & without the nine slice option.

So there you go.

Tip number 1. Use Symbols.

Tip number 2. If you need to scale your Symbols then using the 9 slice option can save you a lot of time.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>