Stupid CS3 Trick #1: 9 slice scaling
The title is misleading; in reality, this is Tip #1 in CS3 for Dummies. I am a self-admitted CS3 novice, so it’s possible that this trick and others that follow may be old hat to many of you. But based on the volume of oohs and aahs at Web Design World, I’m guessing not. Anyway—let’s get on with it: How to scale pictures (or dialog boxes or screenshots or fill-in-the-blank) without squashing or shrinking the stuff you want preserved.
A few days ago, I posted a picture of me and a seagull that was flying alongside a ferry:
Aside from the obvious question of why I wanted the picture taken (maybe John can explain the allure), there may be various reasons why I want to scale this picture: to fit it in a smaller slot; to hide imperfections, etc. But what if I just want to get the seagull closer to my pointing finger? (Again, ask John why.)
I could do some cropping and cutting, pasting and blurring, but is there an easier way that will still look like the picture is natural and unaltered?
One answer is Fireworks’ 9 slice scaling. With this technique, only a section of the photo is scaled, even though the entire picture is selected. In this case, I set the cloudy area between my finger and the seagull to scale, leaving the bird and me unsquashed and unshrunk:
Not bad, and not very hard. The only tricky part is realizing that you must first convert the image to a “symbol”, which seems pretty cryptic to me. Pun intended. But it takes seconds to do, though I admit I did try several different boundaries for my scaling area, before I found the one I liked best.
This technique was demoed for us at Web Design World by a member of the Adobe Fireworks team. The context there was not photos but dialog boxes. Say you want to scale an empty dialog box, but not the buttons or tabs attached to it. Just set the 9 slice scale to include those areas that have no buttons, tabs, or text. Voila—scalable dialogs without squashed or shrunken elements.
The fact that it works on seagulls too was just an unexpected perk.