Pixel precision with vectors and the Path palette

Because Fireworks is a vector-based program, it's great for designing icons of all kinds, whether simple and graphic or highly detailed. However, when transitioning from Photoshop for the first time, it can be frustrating if you try to work at the pixel level without help from the Path palette. This palette is probably one of the most important tools in Fireworks for pixel precision (see Figure 11.

Figure 11. The Path palette

To illustrate my point, consider the folder icon in Figure 12. I designed a standard 32-pixel icon and now need a 16-pixel version of it. When the icon is re-scaled, the outlines of the shapes get fuzzy. That's because the paths are soft lines and are intended to be aliased. But because the end points are no longer placed exactly at the pixel corner, the lines look fuzzy. When I simply select points of the object and then select "Round points to pixels" in the Path palette, the line now shifts so that it is once again sharp but still aliased.

Figure 12. Using "round points to pixels" in the Path palette to render precise lines

The selection tools in the Path palette are also very helpful. When rounding all points to pixels, it's easiest to select all points first. When widening an object like a rounded button, it's easy to select all points on the right side of the button with the select right points control (see Figure 13). The width of the button can then be extended quickly using the right cursor button alone, or with the Shift key for increments of 10 pixels.

Figure 13. The point selection tool helps you select points on an object quickly for frequent manipulation. These commands can be further enhanced by adding keyboard shortcuts (such as Ctrl+6 for select right points) in the keyboard shortcuts dialog box.

Finally, you can simplify complex shapes with the smooth and straighten points controls. There are several other useful actions in the Path palette, but I use them less frequently.

Adding power to controls with the Common Library palette and 9-slice scaling

Another great feature in Fireworks is the Common Library palette. This is an extension of the Document Library, which contains common UI controls with labels and states that can be manipulated directly on the canvas.

Note: Fireworks CS3 contains only a limited set of Vista UI controls, but XP controls can be downloaded from the Fireworks Exchange and senocular.com.

Figure 14. Common Library palette containing many standard UI controls that you can quickly drag to your canvas

You can take a check box from the WinXP folder and place it on your canvas where it instantly shows a label and check box. By opening the Symbol Properties palette, you can quickly change the enabled state from true to false, thus disabling the check box. By clicking the Label field, you can change the name of the label. Finally, by changing the state of the selected field, you can change the check box to checked (see Figure 15).

Figure 15. Quickly editing symbol properties like the label, text style and color, and control state

UI controls are something that interaction designers can manipulate easily without worrying about the visual appearance. The symbols also include 9-slice scaling, so you can modify the width of a text field without having to manipulate the actual object. This flexibility for interaction designers helps them manipulate controls without having to worry about the visual appearance.

You can customize these Common Library symbols with a more unique style, and you can even create your own custom Common Library items, but beware that each common symbol contains specifically named objects that are referenced by code and must not change. For more info on creating Common Library symbols read Using rich symbols in Fireworks by Aaron Beall.

Quick, nondestructive refinement

Visual elements like color and texture are likely to be adjusted multiple times during refinement. Happily, Fireworks supports this behavior with nondestructive filters. One of the last tasks in a project usually involves creating all the different states for buttons such as normal, default, hover, disabled, pressed, and so on. Instead of having to design each one from scratch, it's often possible to take the normal button and remove as well as add filters (see Figure 16). In this example, the white button has a drop shadow. To adjust the button to be disabled it only takes removing the drop shadow filter and reducing the opacity to quickly add the new state.

Figure 16. Quickly adjusting and removing visual properties using nondestructive filters such as drop shadows, hue/saturation, levels, curves, and more

It is inevitable that designs change during design refinement, and these tools help us make adjustments so that we can quickly share and collaborate new ideas within a team and with our clients.

Page 4 of 6

Previous Page

Next Page