vector graphic

By Carl Heaton

In this weeks tutorial Web Courses Bangkok’s newest Instructor Daniel talks about one of the fundamental pieces of knowledge that anyone learning Photoshop and Illustrator should know. The difference between a Vector graphics and a Raster image.

For many people this question could be rephrased as “what’s the difference between Adobe Photoshop and Illustrator?”.

Many people get their introduction to graphics on computers via Adobe Photoshop. It’s immediate, it’s fun and you can use your own photos as a starting point.

Often Adobe Illustrator is seen as more specialised and many general users don’t get very involved with it. Both programs are intended for different but complementary purposes, and knowing when to use one or other or both will lead to better results.

Let’s begin with an explanation of their distinct drawing methods.

vector graphics
A raster image of autumn leaves                   Closeup, each individual pixel is visible

Raster Images

Photoshop creates and manipulates raster graphics. Raster graphics, also known as bitmap graphics, is a digital image which can be displayed on a screen. It’s made from pixels which are points of colour.

It’s an ideal method of drawing a photo image on a screen as each pixel has its own colour value. Raster graphics are resolution dependent – this means it cannot be scaled larger without losing quality.

This loss of quality makes images look pixelated (the ragged square-like look you see when a raster image is enlarged too far).

Vector Graphics

Illustrator uses vector graphics. A single vector is a line between two points.

Vectors can be used to create shapes, lines, polygons, in fact any shape imaginable. The software thinks of it as a mathematical formula- for example, the user creates a line on a 45º angle from point A to point B for a distance of 50mm and is 2mm wide.

The software draws the line based on this data rather than each pixel. Therefore vector graphics are infinitely scalable – if it’s 50mm in length or 5 metres in length the relationship between the points will always be the same.

This is why vector graphics are always used with creating a logo. A designer can create the vector logo and that logo can then be applied to anything from a business card to building signage with
no loss of quality. However, vector cannot be used to efficiently draw photo images.

vector graphics

Above we can see a diagram showing the difference between a 45º angle line drawn using raster and vector. As you can, vector art is infinitely scalable whereas raster images become pixelated when enlarged.

Whilst the two methods are very different, both Photoshop & Illustrator understand them both. Vectors created in Illustrator can be imported into Photoshop, and Photoshop images can be placed in Illustrator.

Which program is best for what?

Photoshop is the best at manipulating images, but also is very good at creating graphics for websites and banners. Its text tools are good for low-resolution elements like website headers, buttons, banners and offer aliasing tools that make type look good on screens and displays.

Illustrator is better for drawing complex shapes, illustration and for layout of single page documents.

Illustrator’s type tools offer more control.

Type and vector shapes will be much sharper than their raster equivalents when output at large sizes and file sizes are much smaller. Logos, fonts, posters, signage, illustrations, scale drawings are typically created in Illustrator.

NEW

GRAPHIC DESIGN COURSES

Learn more about our signature courses
Choose the best schedule
to study ONLINE or at the school.

VIEW COURSES

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.