Adobe Fireworks CS3 Tutorials
Button Symbols / Using 9 Slice Scaling
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Fireworks CS3 / Button Symbols / Using 9 Slice Scaling)
In this movie, I demonstrate how to use 9-slice scaling. This 9-slice scaling feature was introduced in this version of Fireworks CS3. It allows you to scale vector and bitmap symbols up or down, without distorting their geometry. The symbol can be scaled using either three or nine regions, depending on the shape of the symbol. Let me demonstrate this with a figure that shows how the images will be scaled, using this 9-slice scaling feature that I got from the Fireworks CS3 documentation. If these are my guides that I just showed you, right here, my vertical and horizontal guides, the areas outside of those guides in yellow here will not scale. Those that are above the guides here will scale in the horizontal direction as well as those below this area in blue. Over to the right and left these will scale only in the vertical scale. Notice that they are to the right of that guide there. The area in green will scale both vertically and horizontally. Those are within those guides, there, so those guides correspond to these dotted lines here in my Button Editor. Perhaps the best way to show you this is to demonstrate with this symbol that has rounded corners. If I keep my corners outside of those guides, those correspond to the yellow areas in my diagram, and then I select that object, take my Scale tool, and scale this symbol. Notice that the corners don't change in scale. They maintain their angle there. However, the stuff in the middle there where I had the green in my diagram, that will scale both in the horizontal and vertical directions. If, however, I take my Pointer tool and move these guides, making sure that now the entire symbol rests within those guides, everything will scale, both in the vertical and in the horizontal direction, so let me demonstrate the difference here. If I take this, notice that that angle, right there, is now changing. Notice that that angle is different than it was before. Notice now, however, that the corners are outside of the scaling guide so they will no longer change. They will stay that angle. Now, they're inside the scaling guides and they are changing the angle. So, to summarize, move the guides and place them appropriately on the button or symbol, making sure that the parts of the symbol that you don't want to be distorted when scaling, for example, the corners are outside of your guides. You can also lock the guides by checking the Lock 9-Slice Scaling Guides checkbox right here. Notice that now I can't change the guides at all. I can move my symbol, however. I could also, if I turn off the lock option, reset the 9-slice scaling guides to the default position right there. So when you're finished scaling the button, click on Done, and that will close the Button Editor and now you're back here on the canvas, and notice that I can scale this without changing those corners, because they are outside of the scaling guides. So there you have a brief review of how to work with Fireworks 9-Slice Scaling Guides. Let me now move on to the next movie and demonstrate how to create navigation bars.
Tutorial Information
| Course: | Adobe Fireworks CS3 |
| Author: | James Gonzalez |
| SKU: | 33836 |
| ISBN: | 1-934743-42-9 |
| Release Date: | 2008-01-25 |
| Duration: | 8.5 hrs / 93 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
