Vector images are used extensively in graphic design, however the average PC user has probably never heard of them.

The most common digital images, web graphics and digital photos are most often rendered as bitmap images not vector images. So what are vector images, and why should you care?

How are vector images different from bitmap images?

Bitmap images are composed of pixels, or small squares of color. For example, a 300 by 300-pixel image of a balloon is comprised of 90,000 pixels. Vector images are comprised of geometric primitives like points and lines. These geometric primitives are in turn represented by mathematical equations, like those you learned in high school geometry.

Why use vector images instead of bitmap images?

Because vector images are made up of points and lines, they can be scaled without any loss of image quality. This is because your computer is using the information in each geometric primitive to draw the image, instead of displaying a set pixel map. When bitmap images are scaled up, they become fuzzy, but when vector images are scaled up they remain crisp.

Does changing the size of a vector image change the file size?

Changing the size of a vector image has no effect on the image size. This is another great advantage of vector based images. Because the vector image is based on a set number of points and lines, scaling the size does not change the file size because it does not change the number of points and lines.

Is special software required for creating vector images?

Just like any digital format, some specialized software is required to work with vector images. Popular programs like Adobe Photoshop read and edit several common vector formats to a limited degree. For extensive work with vector images, a more specialized program like Adobe Illustrator is recommended. Adobe Illustrator provides several helpful tools for editing points, combining paths and exporting images.

If you are interested in graphic design, vector images are an important format to master. Vector images are ideal for a wide variety of projects and are typically provided by graphic designers to their clients. Now that you know about the basics of vector images, start using this great image format in your digital work.

How does a vector image differ from a raster image?

A vector image is the product of a computer’s interpretation of a vector image file. It is important to note that the vector image is quite unlike raster images like bitmaps. A bitmap literally codes color information for each pixel of the image in sequence. A vector image is very different. The code for a vector image carries the data for only a few points, but these points carry both color information and vector data.

How are vector images constructed?

A vector image is generated from discrete points and vector data attached to those points. These vectors, in combination with their relationship to other points and their vectors, define a path. The path follows a curve defined by the magnitude and direction of the vectors of its two endpoints. This path is given a stroke that acts as a border or a fill, or both.

What are the advantages of vector images?

The primary benefits of vector images are scalability and, for many applications, file size. The scalability aspect occurs because the lines that make up a vector image are not set in code, but generated each time according to the size and resolution of the screen on which they’re being rendered. Thus, unlike raster graphics, the lines and fills of vector graphics are clean and unpixelated at any zoom setting. This is also the reason for the smaller file size. In order for a raster image to have a large resolution, it must code for a very large number of pixels individually. A solid square of red in a raster image requires coding for each red pixel, despite the fact that it’s only one color. Vector images need only four points and color data to define a red square. Those points have more data each than the raster pixels, but there are far fewer.

What are the disadvantages of vector images?

The big downside of a vector image is in detailed images like photographs. Any feature, like a set of wrinkles on a person’s face, subtle shading and the like, require separate vector objects for each. When you need a great deal of these, the number of vector points becomes more similar to the number of points in a raster image. Because each of these points contains much more data than raster images, very detailed images in vector graphics become more memory-intensive than an identical raster image.

Graphics Guide: Bitmap vs. Vector Graphics

When making graphic designs, you have several choices for the style of your images. Among the most popular forms are bitmaps and vectors. Depending on how you plan to use your images and how much you need to resize them, each of these options may be useful. Consider these questions before deciding on bitmap vs. vector graphics.

What file format do you want your images to use?

Bitmap and vector images are saved in different formats, as they represent the information in your picture quite differently. Bitmaps are stored in some of the most common simple image formats, including BMP, EPS, GIF and JPEG. Vector images, meanwhile, require more specialized file formats, including EPS, PDF and PSD. If your uses require a specific file format, make sure to choose an image style that works with this format.

Do you need to resize your images?

When you resize an image, you want to maintain the highest resolution possible. For bitmap images, enlarging results in decreased image crispness and clarity. Because bitmaps store information in a pixel-by-pixel manner, enlarging them leads to stretching a single pixel to cover multiple pixels. Vectors scale much better, as information is stored in a relative manner; enlarging vectors leads to minimal loss of clarity.

Do you plan to use your images online?

If you want to upload your images to a website or blog, certain formats are easier to use than others. Many websites have difficulty displaying vector-based images, especially in terms of compatibility across browsers. Bitmaps are more easily displayed and maintain appearance well across different browsers.

Do you plan to use your image for printing?

When printing an image, the printer may request specific image types. Many shirt printers work with vectors rather than bitmaps; using a relative information scheme makes it easier to adjust the image for use on different shirt sizes. For some purposes, however, a printer may request you send a bitmap image, as this image type is sometimes easier to print.

Deciding on bitmap vs. vector graphics depends on how you plan to use your digital image. Before you begin designing and editing your image, make sure to determine which type is best for your needs. Although you can fairly easily convert from a vector to a bitmap, converting in the opposite direction is often more difficult.

The Advantages of Vector Graphics

Vector graphics are graphics rendered quite differently than standard raster graphics. They are a newer, entirely computer dependent type of imagery.

What are vector graphics?

Vector graphics are graphics defined by mathematical vectors. Vector graphics are defined by a set of individual reference points with data for the construction of a path running through them. The curve of this path is determined by the angle and magnitude of the vector. This path acts as the border for a fill of a color or color effect. Vector graphics are displayed by a computer taking the data from the individual points and extrapolating it to form the path and fill between the points.

What are raster graphics?

Raster graphics are the older form of graphics. The computer interprets not mathematical information given by a reference point, but color data for each pixel in the drawing area. The data for each point is simply stored in order of appearance and displayed according to that order.

What are the advantages of vector graphics?

The major benefit of vector graphics is scalability. Because vector graphics are generated from mathematical extrapolations from dimensionless points, they look exactly the same at any size. Whereas a raster graphic, no matter how high the resolution, looks pixelated at a certain scale, vector graphics never do. The image automatically adapts to the new size and resolution, because it is interpreted according to that size and resolution. This also means that, for simpler images, vector graphics are less memory-intensive than raster graphics.

What are the disadvantages of raster graphics?

The computational power needed to display a vector graphic is often less than a raster graphic because the vector graphic needs data from far fewer points than a raster graphic. However, each individual point in a vector graphic actually has more data than a raster graphic, which only needs color data for each pixel. This means that as images get more detailed and more points are needed to render them in vector graphics, the computing power needed to process them actually increases beyond that needed for raster graphics. Thus, very complex images are almost always rendered as raster graphics, despite the scalability advantages of vector graphics.

Vector graphics are a wonderful, relatively new type of graphics for certain applications, particularly graphic design. This type of graphic does have its limitations, however.

Creating a Vectored Image in Photoshop

Adobe Photoshop is well known for its advanced photo editing capability. Photoshop is a pixel-based graphics program, rather than a vector drawing program. However, it is possible to create vectored images in Photoshop by using the line, pen or shape tool. Photoshop works well in conjunction with Illustrator, Adobe’s vector drawing program. This tutorial is based on tracing a photo in Photoshop to create a digital illustration.

Choose a photograph of your image

What type of drawing do you want to create? Look for a digital photo that closely resembles the image you wish to draw. Choose a photo that clearly shows your subject’s outline, colors, highlights and shadow.

Create a layered file with your image

Open your photograph in Photoshop. Create a new file with two layers and save this file as your main drawing. Copy and paste your photo into layer one of your drawing file. Make the photo in layer one 50 percent transparent so that you can trace over it in layer two. The transparency slider is in the upper right corner above the tool palette.

Select a vector line drawing tool

Click on layer two and select a drawing tool. For the most versatility, choose the pen. The pen tool creates complex segments with anchor points. If you feel comfortable with freehand drawing, select the pencil. For curved line sections, use the arc tool. If your drawing is a simple geometric shape, choose the straight line tool.

Draw a simple outline around your image

Using a drawing tool, trace the outline around your image. Click once with the tool to establish a starting point. Drag the mouse to form a short line and click again to create the next segment. With the pencil, you have the ability to draw a freehand line in one stroke around the image. Once you have finished drawing the entire outline, click on the starting point to form a closed shape.

Trace around the major shapes within your image

Trace around the individual shapes inside your drawing. Don’t worry about tracing every detailed line in the image at this point. Focus on outlining the major shapes in your drawing. For simple shapes such as circles or squares, use the preset shape tools to draw these sections.

Color your drawing

Fill each shape in your drawing with color based on the values in your photograph. Use the eyedropper tool to select the exact color from your photograph. This color now becomes the main fill color in your palette. Select your shape and then choose the fill tool to color your section.

Add detailed lines and effects

Finally, look at your original photograph. What detail lines do you want to add? There is no need to trace every line in your photograph. Pick the major lines that add subtle detail inside the shapes of your drawing. Next, add basic effects such as drop shadow and lighting to enhance your image. Look in the “Effects” menu to find a wide range of additional options. When applying effects, click on layer two, which contains your drawing, and then select the effect.

It’s relatively simple to create a vectored image in Photoshop. Practice often and use a graphics pen tablet for the best results. With a pen tablet, you can draw easily as if you are holding a pencil. Save your drawing in Encapsulated PostScript format or Photoshop’s native format to store the vector data. An EPS file can also be opened in Adobe Illustrator, Corel Draw or other vector drawing programs.