Working with Vector Graphics

1
Working with Vector Graphics

• Lesson 2

2
Objectives

• Combine simple shapes to create complex objects.
• Select points and paths in vector graphics.
• Use the ruler and guides for drawing.
• Draw with the basic drawing tools.
• Rotate objects.
• Use the History panel to save steps as commands.
• Use the Knife tool to cut paths.
• Scale objects.
• Apply stroke and fill settings.
• Use the Eyedropper tool to sample color.
• Trim the canvas and fit the canvas to your
  objects.

3
Making vector image selections

• Vector images are made up of two or more points
  that form a path.
• Fireworks MX has several selection tools that can
  be used with vector images.
• The Pointer tool can be used to select a path.
• The Subselection tool can be used to select
  points on a path.
• The Select Behind tool is used to select an
  object hidden behind another object.

4
Group simple shapes to build complex objects

• A vector drawing may consist of one simple
  object, or it may be a combination of many simple
  or complex objects.
• You can group separate shapes to make one complex
  object.
• When you select a grouped object, the Property
  inspector will indicate that it is grouped and
  show you how many individual objects are in the
  group.
• The Layers panel will show you how each object or
  group of objects is stacked for each layer in the
  overall object.

5
Use rulers and guides for exact placement

• Fireworks has rulers (vertical and horizontal)
  that can be displayed to help you precisely
  position an object on the canvas.
• Turn the rulers on or off from the View menu.
• You can also drag guides from the rulers into the
  canvas to further aid you in placing objects.
• The rulers must be displayed to use guides. To
  insert a guide, position the pointer over one of
  the rulers, click and hold the mouse, and drag a
  guide to the desired position.
• You can set snap options for the guides so an
  object will jump to the guide when moved near
  it.

6
Examples of guides and rulers
The figure on the left shows a portion of the
canvas. The rulers are displayed and a vertical
and horizontal guide have been dragged onto the
canvas. The middle figure shows the Move Guides
dialog box that allows you to precisely position
a guide where you want it. The figure on the
right shows the Guides dialog box where you can
set options to alter the guides appearance and
behavior.
7
Draw basic vector shapes
The figure to the left shows the Vector area of
the Tools panel. Note the black triangle in the
lower- right corner of the rectangle shape.
Clicking that triangle will reveal the other
shapes shown on the far left. In addition to
those shapes, you can also draw lines,
point-to-point lines, or text.
When you select one of the Vector tools, you can
specify fill and stroke color, tip size, and
other options in the Property inspector.
8
Draw an ellipse

• To draw an ellipse on the canvas
• Click the Ellipse tool by first clicking the
  Rectangle and then the Ellipse tool when it
  appears.
• Choose a Stroke color in the Property inspector.
• Choose a Fill color if you want it filled
  otherwise, when you draw, you will see the
  outline of the shape.
• Set the Tip size for the ellipse (stroke width).
• Choose your Stroke category.
• Position the pointer in the canvas (the shape
  will draw from the center of the ellipse out).
• Hold down the Alt key or the Option key and drag
  to create the ellipse.
• Hold down the Shift key while dragging to create
  a circle.

9
Rotate an object

• There are two ways you can rotate an object
• Select the object, click the Modify menu, click
  Transform, and then pick one of the preset
  rotation options. Or,
• Select the object, click the Modify menu, click
  Transform, and then click Numeric Transform.
• In the Numeric Transform dialog box, you can
  specify an exact number of degrees to rotate the
  object.

10
Save actions as commands using the History panel

• The History panel records every step or action
  you perform when creating or editing an object.
• You can undo single or multiple steps if you are
  unhappy with an editing change.
• You can also save steps you have performed as a
  command to reuse when needed in another part of
  the object.

11
Saving steps as a command
This figure shows the History panel. Open this
panel from the Window menu. You can undo steps,
replay steps, or save steps.
1. To save the last two steps shown as a command,
hold down the Shift key and click the Clone and
Transform steps at the bottom of the panel.
3. Assign a name to the command in the dialog box
and click OK. To run the command, click the
Command menu and then click the command name.
2. Click the Save steps as Command button.
12
Use the Knife tool

• The Vector section Knife tool can be used to
  dissect a path into two or more paths. To do so
• Select a path in the object to be dissected.
• Click the Knife tool in the Tools panel.
• Drag the knife across one of the lines in the
  selected path. Drag it again across another line
  in the path. Small cut lines will appear.
• Deselect the selected path, then click the
  Pointer tool and select the area between the two
  cut lines. Press the Delete key to remove it from
  the image.

13
Scale objects in Fireworks MX

• The Scale tool allows you to make an object
  larger or smaller while retaining its appearance.
  To do so
• Select the object to be scaled.
• Click the Scale tool in the Tools panel. Scaling
  handles will appear around the object.
• You can drag the handles to scale the object, or
• Use the Numeric Transform dialog box to precisely
  scale the object.

14
Set stroke and fill colors for objects

• The stroke of an object refers to the width,
  style, and color of the lines that define the
  shape of the object.
• The stroke characteristics are set in the
  Property inspector after you have selected the
  drawing tool to be used.
• The fill of an object refers to the color used to
  fill the area inside the stroke lines of the
  object.
• This color is also set in the Property inspector.
• Fireworks MX has a color palette of 216 Web-safe
  colors you can choose from, or you can create a
  custom color.
• Web-safe colors means that the color you select
  will look the same when viewed in a Web browser.
  Many custom colors cannot be reproduced in a Web
  page.

15
Sample color with the eyedropper and also trim
your canvas

• If some other image in your drawing has a color
  you want to use as a stroke or fill color, use
  the eyedropper to select that color. To do so
• Click the Fill color (or Stroke) in the Property
  inspector, position the eyedropper over the color
  you want, and click the mouse to select that
  color.
• If you want your canvas to be the exact size of
  the image you have created, you can trim it to
  fit the image. To do so
• When finished drawing, click the Modify menu,
  click Canvas, then click Trim Canvas.
• Fireworks automatically trims the canvas to the
  size of the image.

16
Summary

• In this lesson, you learned
• How to combine simple shapes to create complex
  objects.
• How to select points and paths in vector
  graphics.
• To use the ruler and guides for drawing.
• How to draw with the basic drawing tools.
• How to rotate objects.
• To use the History panel to save steps as
  commands.
• To use the Knife tool to cut paths.
• How to scale objects.
• How to apply stroke and fill settings.
• To use the Eyedropper tool to sample color.
• How to trim the canvas and how to fit the canvas
  to your objects.