04: Vector Images

Material for class: 02 October 2012

Introduction:

Pixels are great for displaying photos, but aren’t a good solution for all graphics. In the past two lessons we worked with raster images—pictures made of pixels. In this lesson we’ll explore vector objects and drawing tools as a smarter alternative for creating many types of web graphics.

Objectives:

You will learn:

  • why vector is a better choice for certain types of graphics
  • how to create basic vector shapes and objects using Adobe Fireworks
  • how to apply Fireworks’ options for gradients, textures, filters, and styles
  • how to use the bezier pen tool

Reading:

Before coming to class, please read this page and all of the linked pages.

Lecture:

As you’ve already learned, raster images are made up of tiny colored squares known as pixels. The pixels in a raster image are so tiny they appear to blend together seamlessly, fooling our eyes into believing we see continuous tones and gradients in the image. There are three fundamental problems with raster images:

  1. It’s difficult to create a clean curve using pixels. (Imagine using square tiles to create a circle.)
  2. As raster images are enlarged, they become less effective at simulating smooth tones. When magnified, the edges of objects appear soft and blurry rather than crisp and sharply focused.
  3. Raster images typically result in large file sizes.

Vector images are created in an entirely different way. Rather than using a grid system of colored squares, vector images use mathematical language to describe points, lines, and curves. No matter how much a vector image is enlarged, lines and objects remain perfectly smooth and crisp. In graphic design, vectors are typically used to create logos. The same vector logo can be printed on a business card or enlarged to fill a billboard—without losing quality and detail.

Wikipedia provides more information (with illustrations) on the differences between raster and vector graphics.

Tutorials:

Activities:

  • Explore basic shapes, auto shapes, and custom auto shapes in Fireworks
  • Experiment with stroke, fill, and scaling
  • Observe the behavior of smart guides and layers
  • Convert text to paths
  • Practice drawing with the pen tool
  • Explore methods for creating buttons

Avoiding Misconceptions:

Fireworks is an object-based editing application. One strength of the application is its ability to deal with vector and raster components in the same image. Unfortunately, Fireworks has a couple of conventions that could be confusing or misleading:

First,  as you’ve learned in the past two weeks while working with file formats and optimization, PNG is a raster file format. However, Fireworks’ native format is also PNG, and Fireworks has the capacity to create vectors. If you SAVE a Fireworks file as PNG, the file retains layers and vector information; you will be able to reopen that file and continue editing the vector paths. On the other hand, if you EXPORT a Fireworks file as PNG (png-8, png-24, or png-32) the file will be flattened and saved as a raster image. When you create images you should do both: save a copy of the file as an archived original (in case you want to alter it later) and export an optimized version for the web.

Second, Fireworks assumes you will always export your vector image to a raster format before using it online. To facilitate your preview of the image, Fireworks mimics the pixel-based anti-aliasing that will be created when you export it to raster. You can see this by zooming in to 400% view. This is misleading because a vector object doesn’t use anti-aliasing!

Note that Fireworks will not export vector graphics.

SVG Graphics—and why we aren’t using them in this Class:

SVG is the recognized file format for vectors on the web (it’s the W3C standard). The strength of SVG is dynamic scaling—changing the size of an image on the fly at the moment a web page is displayed by the browser. It’s potentially very useful in designing for portable devices. For example, the same SVG graphic could be displayed at one size on a computer monitor, but display at a smaller size on an iPhone. It’s also potentially useful for creating data-driven images dynamically; for example, creating a graph as data is entered into a form. As another benefit, SVG allows images to be indexed by search engines.

You may find this information interesting and useful, but we won’t be covering it in this class for the following reasons:

  1. SVG images are basically coded in XML. While there are graphic editors that create SVG, I think it’s fair to say that designers using SVG are typically comfortable editing at a code level as well. That’s beyond the scope of this course.
  2. Support for SVG is still inconsistent between browsers. No one browser implements the recommended standard completely.

Building a Shiny Button in Fireworks

This exercise will introduce you to the tools in Fireworks commonly used to build buttons and other types of user interface (UI) graphics. Familiarizing yourself with these same tools will help you with this weeks homework too. There are printable instructions to accompany the video below available to download -- Vector Drawing Tools Tutorial