Introduction to Vector Graphics

This chapter includes information about:

  • The difference between vector and raster graphics
  • Benefits of vector graphics

The most important difference between Photoshop and Illustrator is the difference between raster and vector graphics.

Raster (or bitmap) images are made of a rectangular grid of pixels. If you zoom in close enough, you can see the individual squares. If an image is enlarged, it may look pixelated.

Vector images are made of points, curves and shapes. If you zoom in, all lines will still appear smooth.

The key benefit of using vector graphics is scalability, which is critical in logo design. A logo in vector format can be scaled to a very small size and a very large size without any loss of quality – small enough to put on a business card, and large enough to fill a poster or billboard.

raster-vector1
On the left, a raster image in Photoshop at 100% and enlarged to 600%. On the right, a vector image in Illustrator at 100% and enlarged to 600% without any loss of quality.

Outside of Illustrator, the vector graphics you likely use most often are typefaces. When you choose a font, you expect the letters to look just as smooth whether you use 8-point type or 200-point type.

Here’s a real-life example: The window banner for this cafe in New York looks fine from a distance, but up close it’s clear that the green parts of the logo are raster, not vector. The black text is a typeface created with vectors, so it scales up without any loss of quality. But the green parts look noticeably pixelated.

strokos-vector

0818strokoscu-1024x682

Even though vector graphics are higher quality, there’s still a need for raster graphics because that’s what is typically used on the web. Designers often keep a master vector file of a logo and then export raster versions as .JPG or .PNG files for use on the web at whatever size is needed.