1. Working with Vector Graphics – Lesson 21 Working with Vector Graphics Lesson 2

2. 2 Working with Vector Graphics – Lesson 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. 3 Working with Vector Graphics – Lesson 2 Make vector image selections Vector images are made up of two or more points that form a path. Macromedia Fireworks MX 2004 has several selection tools that can be used with vector images. The Pointer tool is used to select a path. The Subselection tool is used to select points on a path. The Select Behind tool is used to select an object hidden behind another object.

4. 4 Working with Vector Graphics – Lesson 2 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 indicates that it is grouped and shows you how many individual objects are in the group. The Layers panel shows you how each object or group of objects is stacked for each layer in the overall object.

5. 5 Working with Vector Graphics – Lesson 2 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. 6 Working with Vector Graphics – Lesson 2 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 Guide 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 guide’s appearance and behavior.

7. 7 Working with Vector Graphics – Lesson 2 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 pop-out menu. In addition to those shapes, you can also draw lines, point-to-point lines, or text.

8. 8 Working with Vector Graphics – Lesson 2 Use the Property inspector When you select one of the Vector tools, you can specify fill and stroke color, tip size, and other options in the Property inspector.

9. 9 Working with Vector Graphics – Lesson 2 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. Hold down the Alt key or the Option key and drag to draw the ellipse from the center out. Hold down the Shift key while dragging to create a circle.

10. 10 Working with Vector Graphics – Lesson 2 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.

11. 11 Working with Vector Graphics – Lesson 2 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.

12. 12 Working with Vector Graphics – Lesson 2 Save 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. 2. Click the Save Steps as a Command button. 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.

13. 13 Working with Vector Graphics – Lesson 2 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 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.

14. 14 Working with Vector Graphics – Lesson 2 Scale objects in Fireworks 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 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.

15. 15 Working with Vector Graphics – Lesson 2 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 has a color palette of 216 Web-safe colors to choose from, or you can create a custom color. Web-safe 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.

16. 16 Working with Vector Graphics – Lesson 2 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.

17. 17 Working with Vector Graphics – Lesson 2 Summary In this lesson, you learned to: 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.