If you are using a browser, you can click on this separator wherever you see it to return to the top of the page

Overview

This module introduces you to vector graphics - or "objects and paths" - in Fireworks. We'll start by introducing the two modes of editing in Fireworks, and how that corresponds to the difference between vector graphics and bitmap graphics.

Then we'll do some "playing around" in Object Mode, followed by working on a project. We'll be continuing the project begun in module D31i, creating a Web page for WCC's annual International Festival.

Bits, Vectors, Images, and Objects

There are two funadmentally different ways of storing images: bitmap and vector. (For background, see module D20c "Fundamentals of Computer Graphics".)

• Bitmap images are stored (basically) the way they are displayed: each pixel in the image is "mapped to" one or more bits in the computer. This is good for photos and artwork.
• Vector graphics are stored using the coefficients of geometrical equations which represent the shapes of objects and their relationship to one another. This is good for diagrams, typography, graphs, and blueprints. Vector graphics are displayed by calculating the positions of pixels in the image and mapping them to bits in the screen display unit.

Fireworks handles both bitmap and vector images, and allows them to be stored in the same file. Fireworks has its own way of naming and working with these two different types of graphics.

• Bitmap graphics are called images, and can be edited in Image Edit Mode. You get into Image Edit Mode in any of several ways:
  • Opening a bitmap graphic
  • Doubling-clicking the image with a pointer tool
  • Using the Modify > Image Object menu item
  • Selecting a tool that is used only in Image Editing mode. These tools include:
    • Marquee
    • Ellipse Marquee
    • Lasso
    • Polygon Lasso
    • Magic Wand
    • Eraser
    • Rubber Stamp
• Vector graphics are stored as objects, but are shown as a collection of pixels. In most programs, when a vector grpahic is magnified, the pixels don't show. Fireworks is unique (as far as I know!) in showing the object's pixels and allowing you to edit them. To create and edit objects, Fireworks gives us Object Mode. You can switch from Image Mode to Object Mode in a number of ways:
  • Pressing the <Esc> Escape key
  • Using a selection tool, double-click outside the image window (but inside the Fireworks window)
  • Click the Stop button (red with a white X) in the lower part of the Fireworks window
  • Double-click any part of the canvas outside the image itself, but in the image's window.
  • Use the menu selection: Modify > Exit Image Edit

In Fireworks, "objects" are used for a number of Web-related tasks:

• Buttons
• Separator lines
• Bullets
• Image mapping
• Drawing figures and shapes
• Rollovers
• Animation

Objects in Fireworks have a number of properties which can be observed or changed by selecting the object with a pointer tool and using the Properties window. This window, by default, appears at the bottom of the Fireworks screen, but you can move it to other locations if you like. I prefer it at the top of the screen, where it functions rather like Photoshop's Tools bar.

The Properties window is divided into areas that allow you to alter four different aspects of the selected object:

1. location and shape
2. fill (the interior of the object)
3. stroke (the outside edge)
4. effects (special properties like shadows, glows, and opacity/transparency.)

Familiarize Yourself with Vector Objects

Create a blank window about 500 by 500 pixels, and draw (at least) one of each of the following objects. Experiment as much as you like while you do it!

1. Straight line
2. Line with an angle in it
3. Rectangle
4. Oval
5. Triangle (3-sided polygon)
6. Seven-pointed star

Save your file using Fireworks format as vectors.png

Alter each of the figures as described below. While you do it, experiment! Ask yourself what each of the options might be used for...and save your file frequently!

1. Straight line:
   1. Select the line and make it longer. Hint: use the normal selection ponter
   2. Turn it around by dragging an end-point in a different direction
   3. Change its color
      
2. Line with an angle in it:
   1. Move it to a different location
   2. Use the transformation tool to
      ...make it longer
      ...make it narrower
      ...rotate it to a different position
      
3. Rectangle:
   1. Change its fill color
   2. Change its stroke color
   3. Make it longer
   4. Make it narrower
      
4. Oval:
   1. Change its fill and stroke color
   2. Move the oval so that it partially overlaps the rectangle.
   3. Refer to the diagram of the Properties window above. Make these adjustments:
      • Opacity (area d, Effects): about 90%
      • Blending mode (also area d, usually says "Normal"): Multiply
   4. In area b, Stroke, make these adjustments:
      • Width: about 20 pixels
      • Tool: change from Pencil to Caligraphy
      • Type: change from Bamboo to Ribbon
   5. Make these adjustments in are c, Fill:
      • Change the fill type from Solid to Cone
      • Change the texture percentage from 0% to 100%
      • Try several textures until you find one you like
        
5. Triangle:
   1. Make sure the "Object" Inspector panel is open (as above)
   2. Click the Fill tab and make these changes:
   • Change Solid to Pattern
   • Select the Wood pattern
   3. Click the Effect tab and apply these effects:
   • Inner Bevel
   • Inner Glow
   • Drop Shadow
6. Seven-pointed star:
   1. Click the Fill tab and change these settings:
      • Change the fill type from Solid to Radial
      • Change the colors from "Black,White" to "Spectrum"
      • Leave the Texture at 0% (it doesn't matter what kind of texture as long as it's 0%).
   2. Click the Effect tab and apply these settings:
      • Inner Bevel
      • Drop Shadow

Save your file before going on the the next step.You may close it, but you'll need to export it as a GIF or JPEG to get credit for the exercise.

 

Playing with Paths

1. Create a new canvas about 500 by 500 pixels, and save it as airplane.png.
2. Make a line that extends for about ¾ of the window width.
3. Create a new handle about 1/3; of the way from the left end. Hints:
• Use the Pen tool to create a new handles on a line or other shape.
• If the new handle creates a sharp angle when you want a curve, use the pen tool to drag out from the curve. This creates a lever.
• Use the subselection tool to adjust curvatures by moving the handles and levers.
4. Experiment with the curvatures. Create a second new handle about 2/3 of the way from the left end of the line, and experiement with the interaction between the two handles.
5. Starting with an oval, create a simple airplane. Use another oval to give it wings. Add windows and motor(s).
6. Save the file but leave it open.

Tinkering with Text

Use the text tool to type your name, or the name of your Web design firm (the one you used for your banner ad). Experiment with different fonts, sizes, and colors. Try various effects.

Applying Text to Paths

Select the text and (holding the <Shift> button) select the line you played with and made into waves. Use the Text menu and Apply to path. Experiment with...

• Changing the effects on the text
• Changing the path to which it is applied
  Hint: The path and text have to be detatched from one another.
• Put the path and text on the airplane. If necessary, adjust the size, color, and effects to make it visible against the background of the airplane.

Save your file before going on the the next step.You may close it, but you'll need to export it as a GIF or JPEG to get credit for the exercise.

Create a WCC Logo

Start a new document and save it as WCClogo.png. Using Fireworks vector graphics tools, create an accurate reproduction of the WCC logo.

This can be a challenge! Notice these subtle features of the logo:

1. The diamond-shaped squares at the top are very slighly rounded at the corners
2. The W-shaped lines at the bottom are not of uniform thickness.
3. The outside ends of the W-shapes are trimmed along a vertical line.

Do your best to incorporate these features into your replica. Here's a strategy you can use:

1. Create the logo the same size as you want it to be displayed, but zoom in when you're working on details. (Don't make it "larger than life" and reduce it - you're too likely to lose pixels in critical places.)
2. If you like, you can save the logo shown above to your disk and bring it in to your logo file. You can then create a new layer and trace the objects for a more exact match. Make your objects a different color, so you can see the different edges without getting confused.
3. Create one square, get it just right with slightly rounded corners, and rotate it to look like a diamond.
4. Copy it and paste in two copies.
5. Move the copies to the right place, and you will have three identical diamonds. You can use the keyboard arrow keys to "nudge" the objects along, one pixel at a time, for accuracy.
6. For the W-lines underneath: start with a thin rectangle rather than a simple line. Rotate it, then use the subselection arrow to adjust the ends of the lines. Create one V, and get the relative thickness of the two branches looking right.
7. Copy the V, and paste in one copy, joining it on one side of the first V. The two Vs aren't identical, and you may need to add tiny lines to thicken the low point of each V.
8. Group the two Vs to make a W.
9. Copy the W, and paste in three copies.
10. Position them, and they will be identical, symmetrical copies.

Create a Headline for the International Festival Poster

Open the Fireworks .png version of the Festival image you created in exercise D31i. In a separate layer, create an attractive headline inviting participants and guests to the International Festival. Attach it to a curved path, but make sure it is clear and readable.

Bring your WCC logo into a separate layer of the Festival image as well.

What to Turn In

You should now have three images that you worked on with Fireworks vector tools::

• vectors.png
• airplane.png
• festival.png

Optimize each of your three images for the Web, using GIF or JPEG as appropriate for each. Transfer them to your WCC INP 152 Web site and send your instructor email with the URL for all three. Or, if you prefer, you can make an HTML page with all three images, and send your instructor its URL.

Audience: This is for people who know the basics of computer graphics (see module D20c) and have used Fireworks at least in bitmap mode (see module D31i).
Objectives: When you successfully complete this lesson, you will be able to...

• Explain the difference between Fireworks "Image Edit Mode" and "Object Mode"
• Identify the tools for working in Image Edit and Object modes
• Move between Image Edit and Object modes
• Create and manipulate the shape and size of simple paths
• Create and manipulate the shape and size of rectangles, polygons, and ovals
• Use path handles to alter the shape of objects
• Create text and modify the size, font, color, and effects
• Attach and detach text and paths, and modify the attributes of each.

About this document...
Module D32i: This document is part of a modular instruction series in computer technology. For more information, see the overview or the list of modules in this series, D: Desktop Publishing and Computer Graphics. This document has been used in the following classes: INP 143, INP 152

Author: Laurence J. Krieg
Institution: Internet Professional Department, Washtenaw Community College
History: Original: November 2000; This revision posted  Monday, 31-Aug-2009 11:47:56 EDT
Copyright © 2002, Laurence J. Krieg, Washtenaw Community College

Instructors: You are welcome to point to this file in your Web-based materials.
Students: you may make a copy for your personal use.
All other uses: contact the author, Laurence J. Krieg for permission.