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).

Figure 1. If it is not already open, choose Window > Others > Path to access the Path panel.

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.

Combining paths

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).

Figure 2. Tooltips display the name of each tool as you hover the cursor over each icon.

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:

Join paths

Select two or more shapes. Join creates a single shape and deletes overlapping areas (see Figure 3).

Figure 3. The original vectors (the top red ellipse overlapping the blue ellipse) are joined with the Join Paths option (resulting in the bottom blue composite path).

Split paths

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).

Figure 4. The original (top composite path) is split back into separate shapes with the Split Paths option (resulting in the bottom set of overlapping vector shapes).

Union paths

Select two or more shapes before applying the Union Paths option. Union Paths creates a single shape from the selected shapes (see Figure 5).

Figure 5. The original (top overlapping red and blue ellipses) is unified into a single composite shape with the Union Paths option (resulting in the bottom blue vector shape).

Intersect paths

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).

Figure 6. The original (top overlapping red and blue ellipses) becomes a single vector shape with the Intersect Paths option (resulting in the bottom blue vector shape).

Punch paths

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).

Figure 7. The original (top overlapping red and blue ellipses) becomes a single vector shape with the Punch Paths option (resulting in the bottom blue vector shape).

Divide paths

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).

Figure 8. The original (top overlapping red and blue ellipses) becomes three separate vector shapes with the Divide Paths option (resulting in the bottom three vector shapes).

Exclude paths

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).

Figure 9. The original (top overlapping red and blue ellipses) becomes two separate vector shapes with the Exclude Paths option (resulting in the bottom two vector shapes).

Trim paths

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).

Figure 10. The original (top overlapping red and blue ellipses) becomes two separate vector shapes with the Trim Paths option (resulting in the bottom two vector shapes).

Crop paths

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).

Figure 11. The original (top overlapping red and blue ellipses) becomes one vector shape with the Crop Paths option (resulting in the bottom vector shape).

Altering paths

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.

Alter paths

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).

Figure 12. The Alter Paths section of the Path panel.

Some of the tools in the alter paths section include a JavaScript pop-up window that allows you to specify how the path will be altered before completing the operation.

Simplify paths

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).

Figure 13. Enter the value in the pop-up JavaScript window that appears.

Expand stroke

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).

Figure 14. Enter the values for expanding the stroke in the pop-up JavaScript window that appears.

Convert strokes to fills

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).

Figure 15. Strokes are converted into a filled vector shape, using the same proportions as the original stroke.

Inset/expand paths

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).

Figure 16. Open strokes are connected with new paths to alter the original vector shape, using the Inset/Expand Paths option.

Invert paths

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).

Figure 17. The Invert Paths option literally inverts the shape so that the empty areas become filled and the filled areas become empty.

Reverse gradient

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).

Figure 18. The Reverse Gradient option literally inverts the colors of the gradient in the selected object's fill.

Open/close paths

This option allows you to close open paths and open closed paths. Select an open path to close it, as shown in Figure 19.

Figure 19. The Open/Close Paths option works differently depending on the selected path. If the original path is open it will close the path and if the original path is closed, it will open it.

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.

Reverse contours

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).

Figure 20. Select the fill mode to Non-Zero Winding Fill Rule in the Path panel.

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).

Figure 21. The original shapes (on the left) and the result of applying Reverse Contours (on the right).

New vector manipulation tools

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.

Extrude paths

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).

Figure 22. Extrude Paths is used to create a 3D-like effect on any vector shape.

Blend paths

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).

Figure 23. Fireworks generates the in between paths (based on the number of steps) when you use the Blend Paths option.

Fisheye paths

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).

Figure 24. The ellipse shape acts like a lens that defines the area to be affected when you use the Fisheye Paths option.

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.

Deform to path

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).

Figure 25. Set the conformity threshold in the pop-up JavaScript window that appears.

Editing and Selecting Paths

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).

Figure 26. The Edit Points and Select Points sections of the Path panel.

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:

Adding new points to a path
Splitting a path into different paths
Converting a straight path to a curved path
Sharpening points, filleting points and mirroring points
Scaling objects using individual vector points
Scaling vector handles to match nearby vector points

The Path panel contains an incredibly powerful new path toolset that allows you to control and edit vector shapes as never before.

Where to go from here

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.

Design Learning Guide for Fireworks: Using the Path panel

by Tommi West

Content

Created

Page tools

Requirements

User level

Required products