What’s the Difference Between Vector & Raster Graphics and Why Should You Care?

If you are an experienced digital artist or designer, you already know the difference between vector & raster graphics, but what if you are new to the field or just starting out? What’s the difference between a vector image and a raster image or better ask yourself the question “what’s the difference between Adobe Photoshop and Illustrator?”

Many of you get first introduced to Adobe Photoshop. Its one of the “goto software” used to manipulate photos and create stunning graphics. On the other hand, Adobe Illustrator often gets classified as a special tool for logo design and line art. Both programs have their purpose and can complement each other, but knowing when to use one over the other will lead to better design results.

Let’s talk about one of the fundamental pieces of knowledge that anyone learning Photoshop and Illustrator should know.

We start by breaking down the fundamentals of both programs.

The difference between vector & raster graphics:

Photoshop and Raster Graphics

You probably have heard of pixels before and those tiny square make up all the magic of a raster image or graphic. Simply put, all your images on your phone, your camera or digital photo album are raster images and made up of pixels. Raster graphics are also known as bitmap graphics and are resolution dependent, which means you can make them smaller without loosing quality but you cannot make them bigger without compromising the image quality.

Once you have a loss in image quality, you will notice the pixelation of your image, the tiny pixel squares become very obvious to the eye and it all looks ragged. Photoshop is best for manipulating images and creating stunning artwork, both for print and game art. Raster graphic programs have the advantage to create smooth color transition, such as gradients and shadows and are the best tool for photo retouching. One big disadvantage though, your files can get quite big and hard-drive space gets filled up fast.

Illustrator and Vector Graphics

A vector image its composed of paths or lines. A single vector is basically a line between two points. Those lines can be straight or curved and can have colors as a border or a fill. A vector program such as Adobe Illustrator uses mathematic equations and geometric primitives (like points, lines and shapes) to the create the artwork. Vector graphics are scalable, they are not resolution dependent, that’s why vector programs are often used for logo design and any art that needs to be scalable, e.g symbols, fonts, logos, icons, signage, posters and t-shirt screen-prints.

Your file size usually stays smaller and with the scalability you can create artwork as big as billboards without having to worry about resolution. One disadvantage that vector programs have is they aren’t that great at creating smooth color transitions, shades and shadows.

So to recap the difference between vector art and raster art:

Vector Art

Vector graphics are generated with programs like Adobe Illustrator and are composed of paths and shapes.

Advantage: Scalability and therefore resolution independent, can be easily converted into raster.
Disadvantage: Harder to work with color transitions, shades and shadows.

Uses: Logo design, Signage, Fonts, Posters, Icons, Line Art

Raster Art

Raster graphics are generated with programs like Adobe Photoshop and are composed of pixels.

Advantage: Best for photo retouching and manipulation due to the ability to show subtle changes in shades and color transition.
Disadvantage: Resolution dependent and therefore larger file sizes, once downscaled, upscaling will have loss in image quality. Cannot be easily converted into vector.

Uses: Photo retouching, photo manipulation, collages, game art.

If you’re not sure whether you should create vector or raster graphic, simply follow this rule of thumb:
if you’re creating something from scratch with only a few colors, use a vector program like Adobe Illustrator, if you’re editing a photo, use a raster program, like Adobe Photoshop.

Many projects will use elements of both, vector and raster, and for the web all vector graphics will need to be converted into raster images unless they are in .svg format, which stands for “Scalable Vector Graphics”. But more on SVGs later…