Three Things You Must Know When Working With Graphics

One barrier to successful visual design work is a lack of technical knowledge. In this excerpt from my book, Visual Design Solutions, I try to close this knowledge gap. Here are some foundation concepts you need to grasp to feel comfortable working with graphics.

As a designer, your job will be easier and you will make smarter choices when you understand the technical side of graphic creation and graphic file formats. Regardless of the graphics program you use, you need to know a few important basics about digital graphics. Some of these terms are discussed throughout the book, so this primer is important.

1. Width First, Then Height

The size or dimensions of a computer graphic are referred to with two numbers, such as 720 x 540 or 1024 x 768. The first number always refers to the width and the second always refers to the height. For pictures viewed online, the unit of measurement is the pixel, which is the smallest element of a computer image.

A graphic that is 720 x 540 pixels is 720 pixels wide and 540 pixels tall.

• When the first number of the two is larger, the graphic has a horizontal orientation.
• When the second number is larger, the graphic has a vertical orientation.
• If the dimensions are equal, the graphic is a square.

2. Size and Resolution are Different

The size of a graphic refers to its width and height (its dimensions) in pixels or whatever unit you are using. In contrast, the resolution of a digital graphic refers to one of two things: dots per inch (dpi) or pixels per inch (ppi). Pixels per centimeter (ppcm) is also used. These are measurements of dot or pixel density.

• Dots per inch (dpi). This measurement refers to the number of dots in a linear inch. Dots per inch is typically used for printing. Up to a point, as the dots per inch increase, the clarity of the printed image improves.
• Pixels per inch (ppi). This measurement refers to the number of pixels in a linear inch. A higher resolution has more pixels per inch, providing a better quality image but a larger file size.

Both image dimensions and resolution affect the file size of an image. Larger dimensions and a higher resolution increase the size of a file. When creating images to display online, you must find a balance between image quality and size of the file so the images will look good yet display quickly.

3. Bitmap Versus Vector Images

Image technology is easier to grasp when you know that images come in two main formats: bitmap and vector. Bitmaps are made up of pixels, and vectors are created by mathematical descriptions. Bitmap and vector images use different file formats. There are also hybrid graphic file formats that contain both vector and bitmap graphics.

Bitmap Images

Bitmap graphics are made from a blend of pixels—each one contains color information that comprises the image. Photographs and scanned pictures are bitmap graphics. Bitmaps (sometimes called raster images) have a fixed resolution, which means they can’t be made larger without losing quality. This is why a small photograph becomes blurry or has jagged edges when you enlarge it. You can’t add information that wasn’t there originally. The lesson? Use bitmap images at the size they were created or smaller. If you want the image to display in a large size, you must start with a large image.

Advantages of bitmap images:

• Can come from a digital camera, scanner, or a paint program
• Have subtle tones of gradation
• Can have a transparent background (in the PNG file format)
• Wide selection are available at stock photo sites

Disadvantages of bitmap images:

• Enlarging the image causes distortion or jagged edges
• File size is typically larger than for vector images

Bitmap Image Formats

The two most common bitmap image formats for online display are JPG and PNG. The key difference between the two formats is that the PNG format allows for a transparent background. When you see an image with a cut-out background, the area outside the shape is transparent so that only the non-rectangular portion of the graphic displays. PNG files store transparency data in what is known as an alpha channel, which indicates whether a pixel should be displayed as opaque or transparent. The JPG format does not have an alpha channel, so you cannot display a transparent background in a JPG file.

Vector Images

Vector graphics display via a set of instructions described through mathematical expressions. The instructions tell the software how to draw the points, lines, curves and paths. Because the graphics are created from instructions rather than pixels, they can be made any size without losing image quality. This means that vector images are scalable. You can create vector images with vector drawing tools, like Adobe Illustrator, Corel Draw and Inkscape. Many digital illustrations and icons are created as vector graphics.

Advantages of vector images:

• Scalable—the image maintains quality when enlarged
• File size is usually smaller
• Can have a transparent background
• Ideal when you need varied sizes of an image

Disadvantages of vector images

• Requires drawing software to create or edit
• Usually takes more time to create
• Complex illustrations require a skilled illustrator
• Selection of stock artwork is smaller than that of bitmap graphics

Vector Image Formats

The most common vector image format you will come across is EPS, particularly in stock photo sites. You may also see mention of the SVG format. This is a newer vector format for Web graphics that supports interactivity and animation. Images and their behaviors are defined in an XML text file. Older browsers do not support SVG files.

If you like what you’ve read, check out my book that teaches visual design to learning professionals, covering principles and creative inspiration.