Working with the new vector manipulation tools

Vector manipulation tools in Fireworks consist of vector and path tools. These tools, along with the selection tools, provide a strong arsenal for creating quality designs.

The Path panel consists of Path tools that allow you to manipulate paths and points. The existing Fireworks CS3 path and point tools are still available in Fireworks CS4—with an obvious performance improvement. Fireworks CS4 comes with 20 new commands. The Path panel is displayed by default on the right side of the workspace. You can also access the Path panel by selecting Window > Others > Path from the main menu.

The Path tools are grouped into four Path and Point collections (see Figure 1):

• Combine Paths contains commands that result in the creation of single or multiple paths that represent the combination or the resulting interaction of two or more objects.
• Alter Paths contains commands that alter an existing path.
• Edit Points contains single and multiple vector point manipulation tools.
• Select Points consists of tools designed to help you select vector points.

Figure 1. Path panel displays the vector editing tools and commands

Roll your cursor over any of the available tools in the Path panel to see the name of the tools action. These tool tips are very descriptive and helpful for orienting yourself to the new tools. And pay attention to the icon representations of each command, because they provide valuable information about the operations performed by each tool.

In the next section, we'll discuss the new commands available in the Path panel, since you are likely already familiar with the commands available in Fireworks CS3.

Combine Paths

The Combine Paths collection includes the tools that we feel are most commonly used in the Path panel. The creation of beautiful visual graphics from simple lines, rectangles, and ellipses starts right here. The Combine Paths collection includes Join, Split, Union, Intersect, Punch, Divide, and Crop Paths, which are also available in previous versions of Fireworks. Fireworks CS4 introduces two new tools in this collection: Exclude Paths and Trim Paths.

The Exclude Paths command is very useful when you need to punch out an object without losing the top shape. Both Punch and Exclude Paths remove the intersected area of selected objects, but the Exclude Paths command results in creation of the number of selected objects, while Punch Paths command results in the number of selected objects minus the top object (see Figure 2).

Figure 2. Result of applying the Exclude Paths command to three selected objects

The Trim Paths command trims the area of an object covered by another object positioned above it. For instance, if you apply the Trim Paths command to three selected objects, it will trim the area from the two objects positioned below from the top object, and the area from the back object covered by the middle object (see Figure 3).

Figure 3. Result of applying the Trim Paths command to selected objects

Alter Paths

The Alter Paths collection includes all of the commands available in Fireworks CS3: Expand Stroke, Simplify Paths, Inset/Expand Paths, Invert Paths, Open/Close Paths, Extrude and Blend Paths, as well as some new ones: Convert Strokes to Fills, Reverse Gradients, Reverse Contours, Fisheye Paths, Deform To Path, and the Path State and Fill Rule commands.

Convert Strokes to Fills converts all of the selected object's strokes into fills. For example, if you apply this command to a vector line, the resulting object will be a rectangle.

Reverse Gradients simply reverses the order of the gradient colors of the selected object.

Reverse Contours reverses the contour of a selected path.

Fisheye Paths requires that you select at least one path to be deformed and a top ellipse to specify the fisheye area. Once you apply this command, a dialog box appears that prompts you to set the strength of the fisheye effect—a value between –100 and 100 (see Figure 4).

Figure 4. When you apply Fisheye Paths, you can enter the strength value in the dialog box

Deform To Path requires that you select at least one path and a top path to deform with exactly one contour. This command adds a number of points so that the deformed path conforms to the top path's contour. Once you apply this command, a dialog box appears that allows you to enter the conformity threshold. (Enter a number between 5 to 180 to specify the level of conformity; the lower values result in higher conformity.)

Path State has two very useful options: Save Path State and Restore Path State. When you create a complex graphic element, your paths go through a multistate development process before they reach the final state. Very often a simple Undo command is not enough to bring you back to the path state where you can start recreating the work after an unsuccessful development attempt. This is when the Path State commands (Save Path State and Restore Path State) become extremely helpful. Once you realize that you might be moving in a wrong direction, applying Save Path State can save you lots of trouble and time down the road. This command memorizes the complete state of the path being applied to, so you can continue working in a safe manner. If you are unhappy with your work, you can simply select Restore Path State. All changes made since you selected Save State Path will be ignored (see Figure 5). The Path State commands are individual for each path, so you can apply these commands to multiple paths individualy, altering only a single path. This is another great feature of the Path State commands.

Figure 5. Backing out of a wrong turn with the Path State commands

Fill Rule has two options: Even Odd and Non-Zero Winding. Both use a mathematical algorithm to determine if a point resides outside or inside the selected path. Based on the selection (Even Odd or Non-Zero Winding), certain regions of a path are represented as a hole or fill (see Figure 6).

Figure 6. Different fill rules apply to a path: (a) Even Odd and (b) Non-Zero Winding

Edit Points

Edit Points is the category that has been updated with the most new commands. In Fireworks CS4 the Edit Points collection contains 10 new commands. All of these commands are related to either single point or multiple points manipulation. The following new commands are available (in addition to the existing commands available in Fireworks CS3): Sharpen Points, Add Points, Subdivide Points, Add Points To Curves, Offset Points, Knife On Points, Make Handles Tangent, Make Handles Same Length, Join Points and Weld Points.

Most of these commands are pretty straightforward, and prove to be very useful in certain situations. For instance, the Add Points command simply adds new points between the selected points based on the spacing between points value you enter in the command's dialog box. The Offset Points command moves the selected points based on the offset value (in pixels) entered in the command's dialog box. The Join Points command joins two open endpoints, which results in creating a closed contour. The Weld Points command unites two open endpoints (or at least two adjacent points on the same contour) into a single point.

The Knife On Points command is very similar to applying the Vector Knife command from the Vector tools panel, except that it enables you to split a path at the selected point. When you apply the Knife On Points command to a single selected point, it splits the contour of the object. (If the contour is already closed then the command opens the path). Applying the same command to multiple selected points creates multiple open paths (see Figure 7).

Figure 7. Results of using the Knife On Points command when applied to single and multiple points

Select Points

The Select Points collection has two new commands in Fireworks CS4 (in addition to the existing 13 commands available in Fireworks CS3): Select First Point and Select Inverse Points. Both of the new commands are straightforward and extremely helpful when trying to navigate through a bushy area of path points.

Vector Tools panel

The Vector Tools panel is enriched with two new tools. The Arrow Line is a great addition to the existing vector tools. You may not use it as often as some of the other commands, but it is very useful when you need to quickly create an arrow graphic.

The Measure tool is also very handy. The ability to exactly position HTML elements to a precise pixel location during the mock-up phase offers a great advantage. Here's a simple example of how it is used: Instead of inserting an image with the <img src /> HTML tag, we used a partial image (sprite) from the CSS background image. When we created a "Recent Comments" link, for instance, we needed to apply some padding to the left side of the link text to make it line up with the background image (see Figure 8). The Measure Tool makes it easy to quickly determine the amount of padding needed (in pixels).

Figure 8. Measure tool allows you to take quick measurements of a specific area

Page 2 of 3

Previous Page

Next Page