The Artist's Corner :: Designing Art & Graphics for Print

If you've ever tried to print a picture directly from the internet, you'll know that what looks good on your computer screen doesn't necessarily look as wonderful once it's chugged its way through your printer. But why? 

This tutorial will help clarify such mysteries as "Dots Per Inch" (DPI), pixels, color modes, resolution and image formats and advise you on the differences between graphics made for the web and graphics made for print, to help you get the best from your work.

Resolution: what is it?
Resolution, as it applies to printing, relates to the size of the dots that make up the images of the printed piece. This resolution is usually expressed as "Dots Per Inch" or DPI. The more dots per inch, the higher the resolution, and thus better the quality.

In printing, the size of the dot changes according to the number of DPI. For example, a printer with a DPI of 600 has one sized dot, a printer with a DPI of 1200 has a smaller dot and a printer with a DPI of 2400 has an even smaller dot. This means that graphics output from a higher resolution printer (smaller dots and more of them) will produce more detailed and crisper looking artwork.

DPI (Dots Per Inch) and PPI (Pixels Per Inch)
Resolution is also used to describe images produced by digital cameras and scanners. This type of resolutions is referred to as "Pixels Per Inch" or PPI so, in short, DPI is for printing and PPI is for digital images.

RGB and CMYK color codes: RGB Mode
Scanners use RGB (red, green and blue), to capture color images. Each color is on its own "channel". When the 3 channels of color are combined they result in a full color image. Each of these channels contains 256 shades of color. Each channel is also 8-bit, so the four colors combined creates a 24-bit image.

You can never tell what a color will actually look like once it's printed in on paper, just from what it looks like on your monitor. Computer monitors use an RGB output but printers use CMYK. Unfortunately, there will always be a shift between these two modes. Fortunately in higher end programs, such as Photoshop, you can indicate what color mode to work in. Colors that cannot be reproduced as CMYK are referred to as "out of gamut" and so should be avoided if you intend to print your work.

In Photoshop, colors which are "out of gamut" will display an alert symbol (a yellow triangle with an exclamation mark) to warn that they cannot be reproduced in print.

Luckily, a print-artist can click the alert symbol to convert the selected color to the closest color within the CMYK gamut. Here, web designers will also recognise the 3D cube for converting to "web-safe" colors.

RGB and CMYK color codes: CMYK Mode
CMYK refers to cyan, magenta, yellow and black; the colors used by a printer. The computer CMYK mode is only used for images that are going to be reproduced on paper. CMYK colors can also be referred to as processed colors or process printing.

Just as with RGB, the colors in CMYK are all separated into their own channels. The channels show the amounts of each color that will be printed. These are also referred to as "separations". The combination of all four channels creates the final "composite" image.

Important tip to remember with CMYK modes
The image you see on the computer is shown to you in RGB mode because your monitor is RGB, even if your using CMYK mode in the program!

The best way to choose your colors for print jobs is to use a "process color book" or "commercial color guide". Companies such as Pantone or TRUMATCH sell these guides through their websites, commercial print shops and art stores. Also look at the name of your color picker in your image editing program. These programs contain pre-made libraries of various commercial color guide colors.

Photography and scanners
All digital cameras and scanners use the RGB mode. However, once in the computer these images can be converted into CMYK mode. It is good to keep the image in RGB mode when working in image editing programs like Photoshop for 3 main reasons;

• RGB images are smaller than CMYK images so they will open and save faster.
• Some effects and filters are only available in RGB mode.
• Converting back and forth between modes can cause image information loss. Making the conversion from RGB to CMYK should be the last stage of working on an image.

Raster images and resolution
Raster refers to images, monitor displays, and computer graphics that use dots (printing) or pixels (monitor). You can also hear of them referred to as “bitmap” images. Programs, to name a few that use raster images include Photoshop, Paint Shop Pro, and Corel Painter. These are programs that use pixels on the screen to make up the images. Vector drawing programs like Illustrator work with images as a collection of independent lines and shapes. Vector programs don't apply to the resolution rules, only raster programs do.

It is very important to know the size of your canvas (work area) in a raster program before you start your artwork! Resizing up will cause blocky and jagged images while re-sizing down is no problem. It is advisable to always work a little larger than you need too just to be safe! Also consider extra space for borders.

Image resolution
To understand image resolution, you need to consider two things;

• The lower the resolution, the larger the pixels
• The higher the resolution, the smaller the pixels and more detail

Artwork, if created with the wrong resolution, will look blocky or jagged. Artwork should be created at 300 PPI at the very least and web graphics at 72 PPI. One thing that should be kept in mind is the more pixels in a raster image, the greater the file size.

Scanning and enlarging raster images
Let's say you have a picture that you want to enlarge in Photoshop. It's only 1" wide but you need it to be 8" wide. Here is a formula for scanning with "extra" resolution.

1. Note the desired final width and divide it by the width of the original image
2. Multiply the answer by the final desired resolution or final PPI
3. The result is the resolution at which you should scan your image
4. So for our example (8/1) x 300 PPI=2400 PPI

File formats for saving images
TIFF file: the TIFF format (Tagged Image File Format) is a raster (bit-mapped) file format. These files are extremely flexible. A TIFF can be CMYK, RGB, gray-scale, index, or bitmap format, any bit depth, and any resolution. When saving as a TIFF file you have the option to apply LZW or ZIP compressions. These compressions are LOSSLESS.

PNG Files: The PNG format is similar to GIF files in that it is designed as a compressed format. PNGs can support 24-bit color and transparency without causing jaggy edges so prevalent in GIF images.

Websites for color guides
Pantone: http://www.pantone.com/pages/pantone/index.aspx
TRUMATCH: http://www.trumatch.com/

Content prepared by Amjara - 2010 JemCon Graphics Coordinator