Web design

The Difference Between Vector and Raster Graphics

graphic-handKnowing the difference between vector and raster graphics is crucial to understanding custom design. The two graphics tend to deliver different results, particularly when the image is blown-up (made larger). However, each composition has its benefits - so you should never rule out one over the other in the design process.

The choice you make largely depends on what your image will be used for. But before you make that decision, it's important to learn how each dataset is composed.

The main difference between vector and raster graphics is this: Raster graphics consist of pixels and vector graphics are made up of paths.

On computers, raster graphics are indicated as a .gif or .jpeg. They are essentially a series of pixels in various colours that have come together to form a complete image. An individual pixel looks like a small square. Each square is assigned a colour value.

Meanwhile, a vector graphic is composed of paths (or lines). These paths can be straight or curved and have a distinct start and an end. On computers, these graphics are named as a .eps file or Adobe Illustrator document. The data file for a vector design will indicate how much these paths curve and the colours that fill these paths. The relationship of these paths is based on a mathematical equation that adjusts itself as images are made bigger and smaller.

If the designer does not intend to blow-up the image for other uses, a raster (pixel) graphic is a sound choice. But if a logo is going to be enlarged for use on a billboard (after it has been placed on, say, a business card), then a vector graphic is always the better option. Because vector files are made of paths, they can be scaled very large and never lose quality. On the contrary, pixilated graphics tend to look "blocky" because each individual pixel must increase in size as the overall image becomes bigger.

Vector are great because you’re able to design something on your computer and blow it up huge. This is the way vistually all logos are designed. Conversly you can also shrink your vectored logo and still have it appear small on, for example the retina display of an iPhone screen. Not using vectors for your logo can only lead to problems as it will limit the size and sharpness of the image.

Many people shy away from vectors because they are used in Photoshop and they only feel compfortable working in that enviroment.

If you want to become a graphic designer it’s highly recommended that you learn the entire Adobe Suite of products, namely illustrator. Photoshop and Illustrator share many common tools and functions, so it’s not difficult to learn one after you know the other

Different programs must be used to create raster and vector images.

For raster, use: Adobe Photoshop or GIMP. Raster images are great for web design or editing digital photographs.

For vector, use: Adobe Illustrator, Inkscape or Corel Draw. Vector images are great for posters, T-shirt printing, brochures, etc.

The author of this article is a graphic designer with over 10 years of experience. He is also working for www.artik.com.

If you have any questions, please ask below!