Design: Vector vs. Raster

When it comes to digital artwork there are two types of image files: Vector and Raster.

To provide a usable and proper design to any client, you must first determine what type of file to use, because it will really matter in the end. Vector files are made up of points, lines, and curves to make an image. Raster uses pixels.

But why does that matter and how do you know which to use for your project?

Vector

Vector, using lines, points and curves, is based upon mathematical equations, rather than designated amount of pixels. When using a vector program you‘re drawing the outline of shapes. Each shape, called objects, displays one single color each and can be layered together to create an image. This means re-sizing is limitless, it is always crisp and “as-intended”, because the computer simply uses the mathematical equations to replicate the design to any size.

An easy way to identify a vector file in the wild is to look at the edges. A vector image will always be smooth no matter how large you make it, or close you zoom in. A common example of a vector image is text. No matter how big or small, on your computer, text looks the same.

A bonus for vector files, is their size. Because they’re based on mathematical equations, a vector file is typically much smaller and easier to share than its raster counterpart.

The most common problem with vector files, is compatibility. Vector files are usually saved as native files from the program used to create them (i.e. Adobe Illustrator, .ai), and not everyone may have the native software required to open the file. However, there are widely compatible formats which I’ll discuss.

Vector Best Use:

  • Logos & insignia
  • Files for print
  • Files for products
  • Technical drawings
  • CAD
  • Engineering
  • 3D graphics

Vector File types:

  • Widely compatible: .eps (Encapsulated PostScript, .svg (Scalable Vector Graphics)
  • .ps (Adobe PostScript)
  • Adobe Illustrator: .ai, .ait, .art
  • Corel Draw: .cdr, .cdrw, .cdt
  • Corel: pat (Paint Shop Pro Pattern Image)
  • Digital Line Graph: .dlg, .do
  • OpenOffice: .odg

Vector Advantages:

  • Crisp images
  • Re-sizable
  • Versatile uses
  • Small file size

Raster

Raster images, often called bitmap, are composed of millions of tiny squared pixels. Think of what a camera or scanner would produce. When using a raster program you’re painting an image with pixels. You can blend colors to soften the transition from one color to another, use gradient or blurring effects, or any other artistic effects.

An easy way to identify a raster file in the wild is to zoom in on the edges, you’ll see tiny squared pixels. Raster files are also typically much higher in file size, as a result of the higher DPI (dots per inch) or PPI (pixels per inch) settings.

Source: https://vector-conversions.com

A very common problem is a company will have a logo or graphic made, and through time lose the vector file and only have the raster file left. Which means as they try to use the logo for print, products or digitally it starts to look blurry or downright unusable.

Raster Best Use:

  • Photos
  • Digital publication
  • Websites
  • Artwork requiring complex artistic effects

Raster File Types:

  • .jpg (JPEG raster format)
  • .gif (GIF transparent file)
  • .png (Portanble Network Graphic Transparent file)
  • .tiff or .tif (Tag Interleave Format)
  • Adobe Photoshop: .psd

Raster Advantages:

  • Really complex artwork
  • Artistic effects
  • Digital use

A Few Notes

It is possible to have a vector file with raster elements. For example, a vector image with a gradient. The gradient is a raster element, but you can still save that as a vector file.

When you take vector elements and “flatten” or “rasterize” them; whether that’s done directly within say, Illustrator, or by moving them into Photoshop, you have converted them into raster. This is important to remember if, for example, you’ve created a raster design in Photoshop and want to add text. The text will be rasterized once saved in Photoshop- which means the text will begin to blur should you go back to resize it.

When designing something that you want to be agile and usable across multiple is outlets, it’s best practice to start with vector. If a client needs you to use an existing file and they provide you a raster file(for example, of their logo), ask them if they have a .eps or .ai version (vector) to save everyone time and headache. Upon completion, provide both vector and raster files, that way your client will have what they need no matter how they chose to use it.

I hope this has been helpful. Let me know if you have any further insights on vector vs. raster and how you work with the two!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s