Creating Vector Graphics

Fireworks, Part 3 - INP Home Page, Phase 4 - Module D43h

* About this document... * Audience and Objectives *

Overview
Creating Bullets
Creating Rules
Creating a Decorative Pattern

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

Overview

"Eye Candy" is what they call it: the colorful little lines and doodles, blips, blobs, and bullets that decorate Web pages and give them color accents. There's no need to confine them to vector graphics, but they might as well be! We'll be creating a small library of eye candy to go with the INP home site, and at the same time practicing the creation of vector graphics.

Read up on the way Fireworks deals with vector and bitmap editing: use Help > Index, and when the document opens, scroll down in the left frame until you see "Vector Drawing" in the alphabetical list. Read about vector drawing, how to edit in bitmap mode and switch back to vector mode, and about the actions of the different tools in each mode.

As we create this library, we need to bear in mind the colors and overall style we want our site to have.

Creating Bullets

"Bullet" is a printers' term dating to the 16th century. Bullets are used to draw attention to the beginning of a new section or unordered list item. On the Web, a general guideline for bullets is to keep them between 5 and 25 pixels in either dimension.

For this exercise, use Macromedia Fireworks to create:

Two styles of bullets: one larger (15-25 pixels), the other smaller (5-15 pixels).
Clone each bullet four times (making a total of 10) and make each clone a different color combination. (Color combinations should harmoniously contrast with the colors used in your buttons, module D33h.
The background color should be rendered transparent, and each bullet exported as a GIF. Optimize the number of colors by trying various options in the 4-up panel.

Creating Rules

"Rules" are the separator lines used to visually divide one section from another within a Web page. They are generally no more than 15 pixels high (20 at most) and between 200 and 400 pixels wide.

For this exercise, use Macromedia Fireworks to create:

Two styles of rules: one larger (15-20 pixels high, 350-400 pixels wide), the other smaller (5-10 pixels high, 200-250 pixels wide).
Clone each rule four times (making a total of 10) and make each clone a different color combination. (Color combinations should harmoniously contrast with the colors used in your buttons, module D33h.
The background color should be rendered transparent, and each rule exported as a GIF. Optimize the number of colors by trying various options in the 4-up panel.

Creating a Decorative Pattern

Decorative patterns can be used to fill space with something interesting, but on the Web their primary use is to set the tone while giving an accent to one side of the page (often the left). They are often used as background (wallpaper), either underlying the entire page, or confined to the edge. As background, they can also be used horizontally as a separator element if they are placed in the background of a table row.

For this exercise, use Macromedia Fireworks to create a deocrative pattern to be used in the background or your INP home page.

If the pattern is intended as an accent (that is, if no text is to appear on top of it), it should be between 30 and 60 pixels square, and may be done in any color combination that blends or contrasts harmoniously with the colors of the planned Web page.
If the pattern is intended as a background or wallpaper (with text over) the size is not a major issue, though smaller is obviously faster. However, it is essential that it be either predominantly light (so dark text will show up well) or predominantly dark (for light text), with very low contrast so as not to interfere with the text.
In either case, the pattern should be such that when multiple copies are put together, they join smoothely.
Save your pattern optimized as a GIF or JPEG.

When you are done, you need not turn these images in separately: they will be incorporated into your overall Web page design in exercise D45h.

Audience: This is for people who have learned the basics of Macromedia Fireworks and want to use it to create vector-based objects.
Objectives: When you successfully complete this lesson, you will be able to...

Demonstrate the differences between raster-based and vector-based images.
Create Web graphics using Web design applications.
Create single and multiple pixel graphics for use on the Web (such as arrows, bullets, clear dots, rules).

About this document...
Module D43h: 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:

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

Instructors: You may 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.