Introducing the new vector manipulation tools in Fireworks CS4

Adobe Fireworks CS3 has proven to be a great tool for creating rapid prototypes and designing graphics for the web. With the release of Fireworks CS4, the workflow benefits become even more evident. The vector drawing tools in Fireworks CS4 have been updated, offering new capabilities for editing and creating vector graphics. And the export as PDF feature makes it even easier to send layouts and click-through mockups to clients for review. Fireworks CS4 really hits the mark in facilitating the common tasks needed to design and build compelling websites. We feel it is a powerful image editing program that satisfies the needs and habits of many graphic designers and application developers alike.

Since Fireworks CS4 introduces many new tools in the area of vector manipulation, we'll cover these new features in detail. This article is separated into two parts: the first section provides a "theoretical" introduction approach, and the second offers a more "practical" real world application of the new vector tools and vector editing capabilities available in Fireworks CS4.

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.

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

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

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

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.

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

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

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

In this section, we'll introduce the new vector tools available in Fireworks CS4 by providing the steps we followed to create a sample project. We'll outline the process we used to create the header logo and header leaf design shown below using the new vector and path tools in Fireworks CS4 (see Figure 9).

Creating the logo

The sample project logo consists of three leaf-like shapes. In order to create the leaves, you can simply create one leaf-shaped object and then copy and paste it twice. Once you've created the three leaf objects, you can manipulate each one individually using the transform, vector and path tools. That's the easy way. The hard way is to create each leaf shape individually. In our experience, we've found it is much easier to manipulate (edit) existing objects than it is to create (draw) each one from scratch. Whenever you see an opportunity to repurpose an existing object (instead of drawing the object), we definitely recommend taking advantage of copying/editing an existing element.

To create the leaf-like object, select the Ellipse tool and draw a circle. Then draw another ellipse over the first circle and apply the Punch Paths command. Doing so results in a shape that looks like a cresent moon (see Figure 10).

You can easily change a path's shape by editing its contour points. The resulting object has four points, but you can easily add more points to its contour, if you'd like, by applying the Add Points command. Use the Subselection tool to adjust the points on the left side to create a leaf-shaped object (see Figure 11).

Once you are happy with the shape of the leaves, copy and paste the object. Apply some transformation commands to create the second, slightly different leaf shape (see Figure 12).

Select the second leaf with the Pointer tool (to select all the points of its contour) and select the Rotate Points command from the Path panel. Specify the numeric value to set the desired degrees of rotation (see Figure 13).

Repeat the last two steps to create the third leaf. Now you are ready to create the final shape of the logo.

Select the three leaves and apply the Divide Paths command. This will result in a separation between the intersected areas and the outer areas, breaking them into individual paths (see Figure 14).

Fill each part of the leaf design with the desired color. Add some text (the blog title) below the three leaves to complete the sample logo (see Figure 15).

Creating the swirl

The Vector Pen tool is a powerful tool for creating swirly graphic elements. Using it requires some practice and patience, especially if you are new to working with it. Using the Vector Pen tool, you can define curves (tangents) on each point of the line while you draw the line. Later, you can also edit the curve of each point, which is the key difference between using the Vector Pen tool and the regular Line tool.

For this project, we created a set of branch-looking paths. Select the Vector Pen tool and start drawing. Press and hold the (left) mouse button while you draw to create the line curves, otherwise you will simply draw a straight line. The drawing process is pretty intuitive, but we recommend drawing some practice lines if you are not familiar with using the Vector Pen tool (see Figure 16).

Once you've drawn the initial branch stalk, you can edit each point individually to create the desired shape (see Figure 17).

Repeat the last step to draw several more branches. Make the new branches more swirly, because you'll attach them to the main branch in order to create the swirly branch structure (see Figure 18).

Decorate the tree with some swirly leaves. You can either use the method we followed to create the leaves used in the logo, or you can use the Pen tool to draw a leaf (see Figure 19).

Copy, paste, and then apply transform commands to re-create as many leaves as desired. Place the leaves around the branches (see Figure 20).

After you've finished the design to your satisfaction, export the header and the logo in the appropriate web image format (GIF, PNG, or JPEG) and include them in your design.

Where to go from here

Adobe Fireworks CS4 is a unique tool for rapid prototyping, generating web assets, and designing graphics. It is also seamlessly integrated with Adobe Photoshop and Adobe Illustrator, making it our preferred program to use when preparing designs for the web. With the new features available in Fireworks CS4, we now consider it to be a master tool for creating the final graphic designs as well—due to its hybrid ability to manipulate both vector and raster graphics and the ease of PDF export. When creating graphic elements for applications, Fireworks is our first choice because we can output the assets needed for many platforms, including Adobe AIR, Flash, Flex, and HTML.

Visit the Fireworks Developer Center to find more articles and tutorials to help you out. While you are there, check out another article we wrote: Creating an icon in Fireworks.