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:

  • Identify which types of graphic/images are most suitable for vector formats.
  • Create basic vector shapes and objects using Adobe Illustrator, Fireworks, Inkscape, Sketch, or similar vector editor.
  • Apply options for gradients, textures, filters, and styles in the vector editor you are using.
  • Use the bezier pen tool with a level of comfort and skill that enables you to draw curved and irregular shapes purposefully.

Reading:

For this lesson, please read this page and all of the linked pages below.

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 the worlds of graphic and web design, vectors are typically used to create logos, icons, and illustrations. The same vector image 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:

While you are working your way through the links above, be sure that you’re focusing on the following competencies. If you don’t yet feel confident about mastering them, search for more examples and tutorials using the terms in the list below. If you can understand and master these things, you will find you can achieve a great deal in Illustrator, Fireworks, Inkscape, and Sketch.

  • Explore the shape tools in your vector editor of choice.
  • Experiment with stroke, fill, and scaling.
  • Observe the behavior of guides and layers
  • Convert text to paths and explore what is possible when text becomes shapes you can manipulate.
  • Practice drawing with the (Bezier) pen tool.
  • Explore methods for creating buttons and icons.

Avoiding Misconceptions (if you’re working in Fireworks):

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 for the web.

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, but they will soon. Be ready for SVG to become more widely adopted in the near future.

Building a Shiny Button (this tutorial is for 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 as a download – Vector Drawing Tools Tutorial

Looking Forward

  • Complete Assignment 04