• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Working with Vectors > Working with Vectors

Working with Vectors

Vector objects are perfectly suited for many kinds of elements that we create in web design. Building navigation bars, buttons, banners, animations, and working with type are a strong suit of Fireworks.

When you draw using vectors, you create shapes using lines and curves. When you edit a vector image, you manipulate the lines and the curves that describe the shape. You can change the vector object’s shape, resize it, move it, change its color, change its position, overlap objects, apply transparency, and still keep the quality of your original artwork.

With the Basic Shape tools, you can draw straight lines, squares, rectangles, circles, ellipses, stars, and polygons (see Figure 4.1).

Figure 4.1. The vector tool bar.

With the pencil, brush, and pen tools, you can draw free-form vector paths. The pen tool is especially well suited to draw complex curves and shapes in Fireworks, using what are known as Bezier curves.

Once drawn, vector objects are flexible. You can edit and manipulate them in Fireworks in several different ways: You can stretch them, skew them, move them, add points to paths, and delete points from paths. You can manipulate the path handles to change the shape of path segments.

Selecting Vector Objects

There are four main tools for selecting vector objects in Fireworks. These tools can also select text blocks, web objects, symbols, and bitmap graphics while in vector mode. Several tools exist for creating and manipulating vector objects in Fireworks. There are also many techniques in which to do this.

When you create or select an object, or when an object is already selected, a blue highlight is displayed (see Figure 4.2). Highlighting is feedback from Fireworks. It tells you the selection state of objects on the canvas. The selected line or object is the one you are currently working with and affecting. When you mouse over an object that’s not selected, a red highlight is displayed. Don’t forget: You can alter these colors from your Preferences panel.

Figure 4.2. The rectangle object is selected.

Two tools are at the top left and the top right of the tool bar. One is a black arrow. The other is white arrow with a black outline.

The black arrow on the left is the regular Pointer tool. This tool can select whole objects and groups of objects. The Pointer tool is actually the first in a group of tools that we refer to as the Pointer tool group (see Figure 4.3). These are the Pointer tool and the Select Behind tool. As you look at the Tools panel, you might notice that some of tools have a small arrow at the lower-right corner of their icon on the Tools panel. This arrow indicates that this tool is part of a group and other tools can be accessed by clicking the tool and holding the mouse button to reveal a pop-up menu. From this pop-up menu, you can select alternate tools in the group.

Figure 4.3. The Pointer tool group.

The white arrow on the right is the Subselection tool (see Figure 4.4). It can select points within paths and objects within groups.

Figure 4.4. The Subselection tool.


For more information on tool specifics refer to Chapter 2, “Interface, Tools, and Workspace Overview.”

Moving Objects

You can move objects in several ways. You can move objects with the regular Pointer tool by

  • Clicking and dragging them on the screen

  • Cutting them and pasting them

  • Using the arrow keys

If you need to be extremely precise, use the arrow keys to move it in 1-pixel increments or hold the Shift key to move it in 10-pixel increments. Or, in the Properties Inspector, you can enter X and Y coordinates for the location of the top-left corner of the selection (see Figure 4.5).

Figure 4.5. Location coordinates on the Property Inspector.

You can also move objects between Fireworks and other applications by using the Clipboard and copying objects and pasting them from the Clipboard or by dragging from the canvas onto the other application’s workspace.

Deleting Objects

If you no longer want an element in your artwork, just delete it. You can delete selected objects from your artwork in several ways:

  • You can press Delete or Backspace.

  • You can right-click (for Windows) or Control-click (for a Mac) on the object and choose Edit, Cut from the contextual menu. This puts the object on the system’s Clipboard, which is handy when you want to mask several objects or use the same object in several masks.

  • You can choose Edit, Clear.

  • You can choose Edit, Cut.

Duplicating Versus Cloning Objects

In the Edit menu, there are two options: Duplicate and Clone. Both do the same thing (make a copy of your selected object). Duplicate (Edit, Duplicate), however, creates a second object from the original and places it a bit down and to the right of your original element on the existing layer (it’s 10 pixels down and 10 pixels to the right.) The Clone option works differently. When you choose Edit, Clone, the clone of the selection is stacked exactly in front of the original and becomes the selected object.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint