The terms used in graphic design when you first get started can be difficult to get your head around. Photoshop is a large and powerful program which, for those unfamiliar with it, can be equally (if not more) confusing.

With that in mind, today we’ll look at the differences between vectors, paths and pixels – all terms that you will come across regularly whilst learning to use Photoshop and Illustrator.

Pixels

Essentially, pixel means a picture element and is a contraction of the words picture and element. In photography, the first digital image was created by Russel Kirsch in 1957, in order to recreate photographs using a grid system of colours and tones. He used the language of computers (binary) to scan a photograph into a computer and came up with an image which we would know think of as pixelated.

(Source: Wired)

As you can see, the quality was poor and this particular image was made up of just 176 pixels. Today, images – both still and moving – contain 1000s of pixels in order to give us a more true representation of the subject.

A pixel is often referred to as the resolution of an image too. This is a means of ‘counting’ the number of pixels in an image by width and height. So, if the resolution of an image is 1280 x 1024 on a computer monitor, then the width would contain 1280 pixels and the height 1024. For digital imaging, the higher the resolution, the bigger the file size of the image. In print, this needs to be high to avoid pixilation, but on the web, it’s desirable to have low file sizes so you would want the pixels to be less. The more pixels an image has, the more you can enlarge it without losing the quality of the image.

Digital cameras allow you to set the resolution lower and higher and Photoshop allows you to optimise large images for the web without losing quality. Pixels also control colour, made of up of 3 or 4 components known as RGB (Red, Green, Blue) or CMKY (Cyan, Magenta, Yellow, Black). If you have a colour printer, you’re no doubt already somewhat familiar with this when you order new cartridges.

The more information stored in a pixel, the more colours it can represent. These are stored as ‘bits’ – so the more bpp (bits per pixel), the more colours can be represented. Raster is the term used for images that use pixels and rasterization involves converting a non-pixel image into a digital, pixel-based one.

Vectors

Whilst a raster image is made up of pixels, which are blocks or circles made up of different colours in order to display an image, a vector is something else entirely. A vector uses mathematical formulas which tell the path what shape it is and what colour it is filled, bordered with, or both.

The beauty of vectors is that they are scalable and unlike pixels, can be enlarged with no loss of quality. This is due to the way that they are made up, being reliant on maths rather than shapes. Recently, we’ve seen vectors being used in web design more frequently as HTML5 has made SVG (Scalable Vector Graphics) a standard in .xml format.

In web design, SVG has many advantages over other image formats such as Jpeg and Gif as, with a little knowledge of HTML and XML, you can create SVG images with any simple text editor such as Notepad.

SVGs can also:

 

• Be searched, indexed and compressed
• Printed at a high resolution and maintain quality
• Be highly scalable

SVG is an open standard too, which means that it can be used by anyone. SVG can also be animated and for this reason, we’re starting to see it replace Flash in web design now.

It will depend entirely on what you’re designing for when it comes to a decision to use raster (pixel) images or vectors. Whilst raster images are capable of displaying more colour and more photographic nuances, vector images can be used for more than one thing such as business cards, posters, web and more, without losing quality.

Vectors are more commonly used in Illustrator, whilst raster images are usually used in Photoshop. The former automatically creates the formula necessary for creating your vector when you’re working in the program. However, you can use Photoshop to create vectors too.

Paths

These are used to help you to manipulate vectors, but don’t show in the graphic, whether in print or web. See the video below for a fuller explanation of paths in Illustrator.

A path is a line that appears when you ‘draw’, usually in Illustrator. It’s made up of a series of points which are known as anchor points. At each end of the path, the anchor point has control handles which allow you to control the direction of the path itself.

There are 3 types of path

 

1. Open path – a simple line with two end points
2. Closed path – a closed shape which has no end point, such as a circle
3. Compound path – two or more paths which can be open or closed

The anchor points basically allow you to control how much you can manipulate the path, such as by bending it. They control the direction of the path bend and there are two types of anchor points that you’ll likely to be using in the first instance.

1. Smooth – these are made up of two, linked, control handles and help you to further control the path and stop it changing direction
2. Corner – these help paths to change direction and there are three main types: straight, curved and combination.

You can use paths when creating designs using the pencil, paintbrush or pen tools in order to draw them in the first instance. Once you’ve done this, you can further manipulate the path using anchor points and control handles.

Summing Up

It can be difficult to get to grips with the different tools that are available in Adobe products, but we hope to have given you a head start here. It’s always worth getting some formal training however, as anyone who has used Adobe products trying to teach themselves will tell you that it will include a lot of hair pulling.

Once you get the hang of it though, it’s very rewarding and you can begin to create improved images, artistic designs and much more!