27 May 2009
The Path panel is a robust interface for manipulating vector shapes and paths in Fireworks. The options in the Path panel allow you to create complex shapes by joining, combining, subtracting, selecting and manipulating vector shapes.
This section describes the new, improved Path panel and provides illustrated examples of each of the features so that you'll have a better understanding of how they work. Specifically, I cover the process of combining, altering, editing, and selecting vector shape paths. The Combine Paths section includes information about the existing features from Fireworks CS3, such as Join, Split, Union, Intersect, Punch, and Crop. I also outline how to use the brand new tools in Fireworks CS4: Divide, Exclude, and Trim Paths.
Next, you get a tour of the alter paths section, where I describe how to simplify paths, inset and expand paths, and convert strokes to fills. Then I cover a useful tool that allows you to invert paths (useful for creating clipping masks) and the creative effect of reversing the colors in gradients.
Fireworks CS4 includes some brand new vector manipulation tools that were previously only available in Adobe Illustrator. These handy tools allow you to extrude and blend paths. In addition, there's a new Fisheye Path tool that creates interesting lens effects and a Distort Path tool to redefine the shape of an existing vector object.
Finally, I go over the Edit points and Select Points tools, which make it easy to tell which paths are selected and allow you to control measurements as precise as half a pixel.
It's important to understand that you can use the Path panel with vector artwork created in other image editing programs (such as Illustrator) in addition to working with vector artwork that anyone creates in Fireworks.
The Path panel is new to Fireworks CS4. In earlier versions of Fireworks there were some basic vector manipulation operations available in the Modify > Combine Paths menu, (which are still available) but the new options in the Path panel allow you to perform more complex and creative path operations than ever before. The Path panel includes many exciting new tools that are not available in earlier versions of Fireworks (see Figure 1).
The Path panel includes tools for combining, altering, editing, and selecting vector shape paths. The Path panel is divided into sections, categorized by the different types of operations you can perform.
The top section of the panel contains icons that you may have previously accessed by selecting Modify > Combine Paths, such as Join, Split, Union, Intersect, Punch, and Crop. When you roll your cursor over each icon in the Path panel, a tooltip displays the name of the corresponding function (see Figure 2).
Additionally, new tools have been added to this section, which include the ability to Divide, Exclude, and Trim Paths.
Here's an example of each of the Combine Path operations:
Select two or more shapes. Join creates a single shape and deletes overlapping areas (see Figure 3).
Select a composite path before applying the Split Paths option. Split Paths converts the composite path back into its original separate shapes (see Figure 4).
Select two or more shapes before applying the Union Paths option. Union Paths creates a single shape from the selected shapes (see Figure 5).
Select two or more overlapping vector shapes before applying the Intersect Paths option. Intersect Paths creates a single shape from the overlapping area of the shapes (see Figure 6).
Select two or more overlapping vector shapes before applying the Punch Paths option. Punch Paths creates a single shape by cutting away the overlapping area of the top shape (see Figure 7).
Select two or more overlapping vector shapes before applying the Divide Paths option. Divide Paths separates each shape by separating vector points at the overlapping areas. The example below created three separate shapes (see Figure 8).
Select two or more overlapping vector shapes before applying the Exclude Paths option. Exclude Paths creates a single shape by deleting any overlapping areas (see Figure 9).
Select two or more overlapping vector shapes before applying the Trim Paths option. Trim Paths separates each shape by separating vector points at the overlapping areas, while also preserving the top shape. The example below created two separate vector shapes (see Figure 10).
Select two or more overlapping vector shapes before selecting the Crop Paths option. Crop creates a single shape by deleting areas that do not overlap with the other shapes (see Figure 11).
This section of the Paths panel includes some items that were available in earlier versions of Fireworks, such as Simplify paths, Expand paths, and Convert Strokes to Fills. It also contains some new vector tools that aren't available in previous versions of Fireworks.
The alter paths section of the Path panel includes options that were (and still are) available by selecting Modify > Alter Path from the top menu (see Figure 12).
For example, if you choose simplify paths, a dialog box appears with settings to adjust how the operation will be performed. In the illustration below, the shape on top is the original path, and the lower one is the result after simplifying the path (see Figure 13).
When you choose expand stroke, the dialog box prompts you to enter the width, miter, choice of end caps and corners. The resulting stroke becomes an outline of the original shape (see Figure 14).
This operation does not have a dialog box. Simply select one or more paths and then choose Convert Strokes to Fills. The paths become filled shapes (see Figure 15).
While one or more paths are selected, choose the option to inset/expand paths to access the dialog box, where you can specify the direction, width, type of corners and miter limit (see Figure 16).
While any open or closed path is selected, choose invert paths to generate the inverse shape. Since Fireworks uses geometry to create the inverse shape, the dialog box does not appear. This operation works well with closed paths, because the entire canvas becomes covered with the inverse fill. This can be especially useful for preparing clipping path masks (see Figure 17).
This is another handy tool that does not include a dialog box. Select any object with a gradient fill, and then select the option to reverse gradients. Without editing the gradient, the colors will swap within the selected fill (see Figure 18).
This option allows you to close open paths and open closed paths. Select an open path to close it, as shown in Figure 19.
The open/close path acts like a toggle, because as you click the icon it alternates between closing and opening the selected path. Once the path is closed you can add a fill to it. And of course you can also edit the individual points of the path as desired using the Subselection tool.
Select any path and then choose the option to reverse contours. This operation reverses the node order of the selected path(s). You can reverse contours to get different effects when the fill mode is set to non-zero winding fills.
In the example below, the original shape was created by drawing two hollow ellipses with the Doughnut tool. Then the two objects were ungrouped. The set of two doughnuts (resembling an "8") were then duplicated. Using the Subselection tool, you can select just the inner circle of vector points. In the Path panel, set the fill mode to non-zero winding fills (see Figure 20).
Then move the inner circle of points partially overlapping the outer circle shape to see how the curves are reversed. This creates a unique 3D effect (see Figure 21).
Previously the Extrude, Blend, and Fisheye Path tools have only been available in Illustrator and other vector editing programs, but these options are now included in the Path panel in Fireworks.
Draw a single vector shape. While it is selected, choose Extrude Paths in the Paths panel. The dialog box appears, allowing you to make settings to affect how the extrusion will occur. Click the live preview (eye icon) to review the changes before applying the settings. Click OK when you are finished (see Figure 22).
The Blend tool makes it easy to create a 3D effect. Begin with any two ungrouped vector shapes. Select both objects, and then click the Blend Paths icon. In the dialog box, set the number of steps to create between both of the shapes.
This example began with two star auto shapes, which were both ungrouped. One star was scaled and rotated slightly, and the stroke color was changed. The shapes below were blended together in 15 steps (see Figure 23).
The new Fisheye Paths option is an outstanding new addition to Fireworks CS4. You can create some really outrageous designs using it.
The Fisheye Paths option requires that you select a single vector shape (or text that's been converted to paths) to affect. Drag out an ellipse (with a stroke, no fill) to use as the "fisheye lens" to distort objects. Select both objects and click the Fisheye Paths icon. The dialog box will prompt you to enter the degree of strength.
You can apply this effect to any vector shape, or any auto shape (that has been ungrouped). The example below displays the before, during and after stages (see Figure 24).
After applying the Fisheye Paths option, you can choose to delete the ellipse that created the lens if you don't want to include it as part of your design.
This tool has been in previous versions of Fireworks, but it deserves an honorable mention for being so useful and easy to apply. First, create any vector path you wish to distort. Then use the Pen tool to draw the desired open path shape on top. While both objects are selected, choose the Deform To Path option. A dialog box prompts you to enter the level of conformity, to specify how precisely the vector shape will match the path (see Figure 25).
The last two sets of tools in the Path panel include options for editing and selecting paths. Rather than toggling between the Selection tool and the Subselection tool, you can use the options in this section (see Figure 26).
These tools make it easy to tell which paths are currently selected and you can perform some precise operations, like rounding points down to half pixel measurements!
The operations in these areas are self-explanatory. If you have at least one vector point selected, choosing straighten points will create a sharp edge, just as expected. You can adjust individual vector points by selecting the desired areas of a path and then choosing the corresponding option in the Path panel.
These tools in the Paths panel offer many other useful commands, such as:
The Path panel contains an incredibly powerful new path toolset that allows you to control and edit vector shapes as never before.
To learn more about using the Path panel, read Introducing the new vector manipulation tools in Fireworks CS4 by Vane Kosturanov and Vanco Stojkov. Also see the Path panel tutorial available on the Fireworks Zone website.
Get inspired to create unique web graphics by reading Creating an icon in Fireworks by Vane Kosturanov and Vanco Stojkov, and Animated logos in Fireworks CS4 by Zsolt Szekely. To learn more about using shapes to create clipping masks, watch the demo Working with masks in Fireworks CS4 by Jim Babbage.
Finally, explore other areas of the Design Learning Guide for Fireworks CS4.