Raster
vs. Vector?
There are two basic ways that the computer creates images. Vector and Raster. Vector uses a series of lines and fills to create a design. Raster uses a bunch of little dots known as pixels. It is crucial to know the limitations and benefits of each. This will save you some headaches down the road.
Common File Types |
|
Raster |
Vector |
TIFF Bitmap (TIF) |
Window Metafile (WMF) |
Window Bitmap (BMP) |
CorelDraw (CDR) |
JPEG Bitmap (JPG) |
Illustrator (AI) |
Graphics Interchange Format (GIF) |
Encapsulated PostScript (EPS) |
Adobe Photoshop (PSD) |
Enhanced Windows Metafile (EMF) |
Vector images are created in programs like Adobe Illustrator, CorelDraw, Freehand, and Flash. They are different than Raster in several ways, but the main one is that they can be resized without affecting the quality of the image. If you take a vector image and import it into a PowerPoint slide and make it twice the size, it will still look nice and clean. That is because the image is created resolution independent. That is a fancy way of saying that the quality of the image isn’t tied to its size. This is what allows you to make the image any size that you want and not affect the quality. The original image or piece of clipart can be any size and still usable. The other advantage of vector images is that they are almost always smaller than a raster image in file size, which means it requires less storage space. Only very complex vector images are larger in file size than a raster with the same dimensions.
Raster images are created in a variety of ways and then manipulated in programs like Photoshop, Photopaint, and Fireworks. For instance, if you have a photograph that you want to put to use in a design you can scan it. As soon as you scan it, it becomes a raster image and tied to its resolution. When you scan an image it turns the image into a bunch of little dots (pixels). The number of pixels per inch is its resolution. The pixels can be changed in size and quantity, but this can affect the quality. Let’s say that you have an image that is 2” x 3”. You import it into a design and need it to be bigger. Most programs will let you click on the image and then drag to make it larger. After making it bigger though you notice that it doesn’t look as clean anymore. This is because when you enlarge a raster image in that manner, you are making the pixels that create the image bigger also, affecting the quality of the image.
Resizing a raster image can be a tricky procedure. If you are going smaller it is generally not a problem. This will actually make the pixels smaller causing the picture to look sharper. Making an image larger is almost always a big “No No”. Understanding pixels is key to using raster images. So I will make it as simple as possible.
When a raster image is created it contains a limited number of pixels. The pixels can be rearranged to change the image, but if at anytime the number of pixels is increased the quality of the image is affected. Even though a program like Photoshop allows you to add pixels it doesn’t do a very good job. It uses very complex algorithms to “guess” what the new pixels should look like. Does this mean that you can never increase an images size? There are ways to increase the size if you have enough pixels to work with. An image will have two variables that you can play with, pixels per inch (PPI) and the total number of pixels an image contains. Most often when you hear the term “resolution” used it is referring to the number of pixels per inch. That means that the more pixels that an image has per inch, the better it looks. The lower the PPI the worse it looks when printed. Resolution is more of a concern when a design is being printed than when it is being projected or used on a web site. Printed pieces rely on resolution to reproduce quality images. Designs that are viewed on a monitor or projected only need to have a resolution equal to those devices. In other words, the average printed image has 300 ppi while an image on a website only has 72 ppi. Websites are viewed on a monitor that displays 72 pixels per inch. If you have an image that is 144 ppi it will look twice as big on screen as a 72 ppi image, but both will look the same quality. The same images printed however will look the same size but the 144 ppi image will print with better quality. This is why images from the internet don’t print well. They are optimized for the web, which means that they are usually only 72 ppi. This makes them smaller in file size for faster web pages.
The total number of pixels along with the ppi determines the physical dimensions of the printed design. If you don’t want to add pixels to an image but want to enlarge it, these two variables come into play. If the number of total pixels is not changed but the ppi is increased, then the physical dimensions are reduced. The opposite of this is to decrease the ppi thereby increasing the physical dimensions. To do this type of editing you will need to have an image editing software package like Photoshop.
So, what resolution do you need? If an image is going to be used for printing it should be 200-300 ppi. The more pixels per inch the better the quality for printing. If you need to enlarge the image then you need more pixels per inch. For instance is you have an image that is 1 x 1.5 inches enlarge it to be a 2 x 3 inch image you are cutting the pixels per inch in half. In affect you would be making a 300 ppi image into a 150 ppi image. Now this is a simplistic view, but for the purposes of this book it will do.
If all this talk about pixels and resolution is confusing to you, don’t worry. It is confusing to a lot of people, even those who have been graphic designers for years. Just remember that all images are not the same. If you understand how each type of image works you will have an easier time