• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Resolution Solutions > Resolution and Grayscale or Color Images

Resolution and Grayscale or Color Images

When your image contains more than just solid black and solid white pixels, then the resolution of your image shouldn't be a 1:1 relationship to the resolution of your printer. For instance, you can have up to 256 shades of gray in a normal grayscale image. But when you print that grayscale image, most printers are limited to using dots of solid black ink. Different printer types use different methods for simulating shades of gray out of those solid black dots. It's the same with color images in that your printer is limited to using solid dots of cyan, magenta, yellow, and black ink to simulate the millions of colors you might have in a full color image. Let's take a look at how the different types of output devices reproduce your images and the resolution requirements for each device.


Let's see how an inkjet printer would simulate shades of gray (Figure 4.9). Most inkjets use fixed-size dots and just pack them closer and closer together to create darker shades of gray. As long as those dots are so small that your eyes can't focus on them, your eye can't tell the difference between those solid black dots and the original photograph. When you print a full-color photograph, it's just a bit different. The ink cartridge in most inkjet printers has four colors of ink (some have two shades of cyan, two of magenta, and two of black, for a total of seven). That means that it has to reproduce your color images using only solid cyan, magenta, yellow, and black dots. Just look at Figure 4.10 and you'll see what I mean. It's the same concept as creating shades of gray, only it's doing it with four colors of ink instead of just one.

Figure 4.9. Inkjets use tiny dots to simulate shades of gray.

Figure 4.10. Color images are made from four solid inks. (original image ©2005 PhotoSpin, www.photospin.com)

You'll get very high-quality results on most inkjet printers if you use images with resolution settings between 240 and 360ppi. Anything over 360 is just overkill. I doubt you'd notice the difference between a 360ppi image and one with a higher resolution even if you use a magnifying glass to compare them. If you have an older inkjet that has a printer resolution of 720 or below, or if you work with textured papers, then use 240ppi images. But if you have one of the newest models that is higher resolution and you print on very smooth glossy paper, then you should consider using resolutions closer to 360ppi. It's really a personal choice because not everyone has perfectly sharp images, and everyone has different quality standards. Do a few tests with different image resolutions to figure out the lowest setting that gives you acceptable results. The lower the resolution of your image, the smaller the file size will be and the faster it will print.

Laser Printer/Printing Press

A laser printer uses a different method than an inkjet printer to simulate shades of gray. Most laser printers are not attempting to deliver the photorealistic quality you can achieve on an inkjet printer. That's mainly because they use opaque toner instead of transparent ink. Because that's the case, they are more likely to be used as the starting point for an image that will eventually be reproduced on a printing press. If you ever look really closely at a grayscale photo in a newspaper, you might notice that it's made out of tiny black circles on a grid (Figure 4.11). That's known as a halftone, and it's used because commercial printing presses that are used to print newspapers, brochures, and magazines can't reproduce those incredibly tiny dots that result in near-photographic quality. When you print an image on a laser printer, there's a setting that determines how large those circles are. If we were to hold a ruler up to the image and count how many circles fit in an inch (in this case, they are on a grid that's rotated to 45 degrees), you might end up with five (Figure 4.12). So, you'd think that would be called 5 circles per inch, right? But it's not. That's because we don't always use a grid of circles. Printers can also use squares, diamonds, ovals, and other shapes (Figure 4.13). So we simply call this setting lines per inch, or lpi, really meaning how many lines (of whatever shape is being used) will fit in 1 inch. Once they get small enough that your eye can't focus on them anymore, then you get to the point where your eye can't tell the difference between those little black circles and a real grayscale photograph (Figure 4.14).

Figure 4.11. Simulating shades of gray using a halftone.

Figure 4.12. Five circles fit in an inch.

Figure 4.13. Different printers can output different shapes on a grid.

Figure 4.14. Dots small enough that your eye can't focus on them.

With a color image, the same thing happens. The only difference is that we use four colors of ink—cyan, magenta, yellow, and black (Figure 4.15). When the moment arrives that you finally click on the Print button (using Adobe Photoshop, Adobe InDesign, QuarkXPress, or the like), the program you're printing from needs a very important piece of information about how you want the printed version of your image to look: lines per inch (lpi). If you don't provide it, the program will use its own default setting, and that could be disastrous. You specify the lpi setting to use when printing by choosing File > Print with Preview, turning on the Show More Options check box, and clicking the Screen button.

Figure 4.15. Full-color photo created from four solid colors of ink. (original image ©2005 PhotoSpin, www.photospin.com)

So what does all this have to do with resolution? To find out, let's look at the most common lpi settings used for different printing processes. Keep in mind that the cruder the printing process (such as a high-speed newspaper press printing on cheap paper), the harder it is to reproduce tiny dots, and the more precise the process (such as a slow-speed, sheet-fed printing press with high-quality paper), the better it can reproduce those tiny dots. So it's the printing process (newspaper versus magazine, and so on) you'll be using that usually dictates which setting is necessary, rather than the printer type (laser, thermal wax, and so on). Table 4.1 shows the most common settings used. It also doesn't matter what the resolution of your printer is. Here's how the lpi setting you use when printing your image relates to resolution.

Table 4.1. Common LPI Settings
85Newspaper advertisements
100Newspaper editorial section
133Magazines and brochures
150High-end magazines and high-quality brochures
175Annual reports and high-end brochures
53300dpi laser printers
106600dpi laser printers
2121,200dpi laser printers

To determine the best resolution for your image, multiply the desired lpi setting by 1.5 if you want to see a lot of detail, or multiply it by 2 if you would rather have the image look smoother. For example, a portrait used in a newspaper ad would be something that should look smooth; otherwise, you'll exaggerate the detail in the face, which usually makes people look older. Because newspapers usually use an lpi setting of 85 and I want things to look smooth, I'll multiply 85 by 2 and end up with 170, which is the resolution setting I should use when scanning the image. If I use anything higher than that, I'll end up with more information (detail) than I need, which might cause me to do a bunch of retouching onscreen (unnecessary because my printer simply isn't capable of reproducing that much detail). If I use a setting lower than that, the pixels might end up being so large that you can see them (giving you the jaggy look).

There is one special instance when you'll want to use higher settings than those I've mentioned here. That would be when your image contains high-contrast lines. Examples would be guitar strings or a sailboat mast. If you're ever going to notice jaggies, it will be in these high-contrast lines. To ensure that the pixels are small enough, you'll want to bump up the resolution setting to at least 2.5 times the lpi setting that will be used to print the image (Figures 4.16 and 4.17).

Figure 4.16. Scanned at standard resolution. Look closely at the top paperclip and you might notice a hint of jagginess on its edges. (©2005 Stockbyte, www.stockbyte.com)

Figure 4.17. Scanned at optimal resolution for high-contrast lines. The top paperclip looks crisp and smooth with no jaggies.

You can use Photoshop's Image Size dialog box as a quick resolution calculator. With any image open, choose Image > Image Size and click on the Auto button. When you do, Photoshop will prompt you for the lpi setting that will be used when printing. Use the Good setting if you'd like to multiply the lpi by 1.5 to get crisp detail, or use the Best setting to multiply it by 2 and get a smooth result. The answer to the calculation will appear as the resolution setting once you click OK.

Dye-Sub Printers

Instead of using solid cyan, magenta, yellow, and black dots (like an inkjet or laser printer), dye-sub printers can really print shades of gray and shades of color without using solid dots. For this type of printer, you need to find out how small the pixels are that your printer is capable of printing. That's known as the resolution of your printer. The pixels that make up your image should be the exact same size (measured in ppi) as the resolution of the dye-sub printer (measured in dpi). So if you have a 314dpi dye-sub printer, the resolution of your images should be set to 314ppi. That will make the pixels in your image exactly the same size as the dots your printer uses to print them out with, so you will get the highest quality. You are welcome to use a lower setting than that, but if you do, you'll be sacrificing quality for the convenience of a smaller file size.

35mm Slides

Slides are similar to multimedia in that the resolution setting attached to the image is ignored. That's because you're always printing to the same-size end result, and Photoshop will just scale your info up or down to fit that size. Like a dye-sub printer, slides can truly reproduce shades of gray and color instead of using only four solid colors. In this case, we need to have the same number of pixels that our output device will use to reproduce the image. If you ask someone who owns a slide recorder, they might tell you they have a 2K or 4K slide recorder. That's just like people saying they have a 300dpi or 600dpi laser printer; it's just that slide recorders are measured in K instead of dpi. K stands for 1,024. That means a 2K slide recorder can reproduce 2,048 pixels in the width of the slide (2 × 1,024 = 2,048) and a 4K recorder can handle 4,096 pixels (4 × 1,024 = 4,096). To find the proper scanning resolution, you need to figure out how many pixels your slide recorder can reproduce and then divide that by how wide your original image is in inches. So, if I have a 6-inch-wide original and I'll be printing it to a 4K slide recorder, then I'd want to divide 4,096 by 6, and I'd end up with a scanning resolution of 683. That's the exact setting needed to end up with the right amount of information for that kind of slide recorder—that is, if you want to get the absolute highest quality. You're welcome to use lower settings, but if you do, you simply won't be getting as much quality as what that slide recorder is capable of.


Let's talk about how your web browser thinks about your images. It ignores the resolution setting. To show you what I mean, open Photoshop and choose Image > Image Size. Notice that the top describes how many pixels your image is made from and the bottom shows you how large the image will be when printed (Figure 4.18). But, if we switch to ImageReady, which is designed for web graphics, you will notice that it takes a different approach. Because web browsers ignore the resolution setting, ImageReady doesn't even list a resolution setting when you create a new document (Figure 4.19) or choose Image Size (Figure 4.20). Remember that a number called pixels per inch usually determines how large the pixels will be when they are printed. That's also why you'll never find the width or height of your image measured in inches in ImageReady. It has no idea how large the pixels are on your screen, so it has no idea how much space your image will take up on your screen. When Photoshop is only thinking about on-screen use, it ignores the ppi setting of the image. That's because Photoshop can't control how large the pixels are that make up your screen. Instead, you are in control of it. You can change it by adjusting your operating system's settings. In Mac OS X, choose Apple menu > System Preferences and then click on the Displays icon; in Mac OS 9, choose Apple menu > Control Panels > Monitors; or in Windows choose Start > Settings > Control Panel, then double-click Display and click on Settings. That's where you can determine how much information can fit on your screen. (Remember, you might be able to change this setting on your screen, but you won't be able to change it for all the people who will be visiting your web site. They will choose their settings, and you can't do anything about it.)

Figure 4.18. The Image Size dialog box.

Figure 4.19. ImageReady's New Document dialog box.

Figure 4.20. ImageReady's Image Size dialog box.

The more information you display, the smaller the pixels become. For example, let's say we used a setting of 1,024 by 768. That means that we'll have 1,024 pixels in the width of the screen and 768 in the height, which means we'd need an image that's exactly 1,024 by 768 pixels to fill that screen. Let's figure out how we'd end up with that. Let's say the physical original that I'm going to put on my scanner is 6 inches wide. Really what we're trying to figure out is how many pixels the scanner should capture in each inch of the original to end up with 1,024 pixels total. It's just simple math. Take the number of pixels we need to end up with and divide that by how many inches wide the original is. In this case 1,024/6 = 171. So that's what I'd need to type into my scanner to end up with exactly 1,024 pixels total.

But what if you don't want to fill your entire screen? Instead, maybe you want the image to be about the same size as the original you put on your scanner. When that's the case, just use a generic setting of 85. There really isn't any ideal setting; this is just the average pixel size for most people's screens. Two numbers you'll hear quite often are 72 and 96. That's because the original Macintosh had a built-in screen that displayed exactly 72 pixels per inch. But once Apple stopped making Macs with a built-in screen, that was no longer true. On other monitors, the “generic” setting has always been 96ppi. My preference is simply an average of those two: 85ppi should give you something close to actual size onscreen.

To complicate matters, when you first open an image in Photoshop, it's not trying to show you how large the image will appear when printed or viewed in a web browser; instead, it's just zooming out until you can see the entire image. To see exactly how large your image will look in a web browser, you'll want to view it at 100% scale. To view it at 100% magnification, double-click on the Zoom tool, or choose View > Actual Pixels. If you find that that's too large, here's a simple technique I use for resizing things for the web: Start by viewing it at 100%, then choose Window > Navigator. Move the slider at the bottom of the palette to scale the image. If it can't make the image small enough, use the large and small mountain icons to go even further. Once you've got it at the size you need, note the percentage that appears in the lower left of the Navigator palette. That indicates exactly how much you need to scale your image to get it to appear that size in a web browser. Now, to actually scale the image, choose Image > Image Size, turn on the Resample Image check box, then change the Inches pop-up menu to Percent and enter the number you saw in the Navigator palette (Figure 4.21). When you click OK, you'll notice that the image gets much smaller. To see how large it will appear in a web browser, double-click on the Zoom tool and you should end up with exactly what you were looking for.

Figure 4.21. Entering the percentage from the Navigator palette. (original image ©2005 Stockbyte, www.stockbyte.com)

Digital Cameras

The resolution of a digital camera is not measured in pixels per inch; instead, it's measured in megapixels. A megapixel is simply 1 million pixels. To find out how many megapixels you need to create a particular image size, try the following: Choose File > New, set the resolution to what's needed for your type of output, and then set the width and height to what you desire. Once you've done that, click on the Resolution field and then change the Width and Height pop-up menus to Pixels. Then multiply the width by the height to find out the total number of pixels you need. Finally, divide the result by 1 million and you'll find out how many megapixels you need to end up with an image of that size. So, if you want to print 8-by-10-inch prints at 300ppi, then Photoshop would let you know that you need 2,400 by 3,000 pixels. Multiplying 2,400 by 3,000 lets you know that you need 7,200,000 pixels total, which is 7.2 megapixels. Now, when you're out shopping for a digital camera, you know exactly what type of camera you need.

When you open an image from a digital camera, you'll find that the resolution is almost always set to 72ppi. That's because the camera doesn't know how large you want to print your pixels, so it just plops in the default setting. I'll show you how I deal with that type of image once we get a chance to talk about something that's known as resampling.


The pixels that make up all the images you ever open in Photoshop are perfectly square. In fact, the pixels that make up your whole screen (regardless of which program you're using) are square. That makes life pretty easy in Photoshop, but if your images are destined for video, it's another story.

When images are displayed on a video monitor (like your TV set or video camera), the image will appear to be squished (Figure 4.22). That happens because video hardware renders pixels as rectangles instead of squares. How squished your image will look depends on which video format is used—NTSC normal definition television, NTSC widescreen television, European PAL television, or high-definition television, for example. Each one of those formats produces a different amount of distortion by squishing or stretching your image horizontally.

Figure 4.22. The image on the right is how it would appear in Photoshop, whereas the image on the left is as it would appear in video. (©2005 Mark Clarkson)

The amount of distortion can be specified as the ratio between the height and width of the pixels as they get rendered to video. If the height of a pixel appears to be four times taller than it is wide, then that would be known as a 4:1 ratio. Photoshop simplifies that by calling it a factor of 4. All it's doing is describing how different the height of a pixel will be compared to its width, assuming the measurement for the width is always 1. The only problem with that is that sometimes you'll run into ratios like 4:3, meaning that if the width were divided up into three equal parts, then the height would equal four of those same-sized parts. To convert on odd ratio into a factor of 1, just divide the second number into the first number. In this example, 3 divided by 4 makes a factor of .75 (Figure 4.23). Pixels that are wider than they are tall will have a factor less than one. Pixels that are taller than they are wide will have a factor greater than one.

Figure 4.23. This image has a 4:3 ratio.

To create a custom pixel aspect ratio, choose Image > Pixel Aspect Ratio > Custom Pixel Aspect Ratio. The current image will be assigned the new pixel aspect ratio, and the new pixel aspect ratio will be added to the choices available in the future.

Unless you tell it otherwise, Photoshop will assume that your image will be displayed using square pixels. That means that if you draw a perfect square, Photoshop will create it out of an equal number of pixels in its width and height. On video, that “square” will become squished and look like a rectangle instead. If you want to get Photoshop to think of what your image will look like in video, you'll need to tell it the aspect ratio at which the pixels will be displayed. You can do that by choosing one of the choices under the Image > Pixel Aspect Ratio menu in Photoshop.

In a rectangular pixel document, Photoshop modifies the behavior and appearance of shapes, text, and brushes according to the pixel aspect ratio. For example, holding down Shift to draw a square object in a document set to a 2:1 Anamorphic ratio will produce a shape that is twice as many pixels tall as it is wide. By default, Photoshop turns on Pixel Aspect Ratio Correction when you create a document with nonsquare pixels, which will make that same square appear as it would in video. Pixel Aspect Ratio Correction distorts the image to make it appear normally proportioned within Photoshop, so that circles look round, squares look square, and so forth (Figures 4.24 and 4.25).

Figure 4.24. Image viewed with View > Pixel Aspect Ratio Correction turned on.

Figure 4.25. Image viewed with View > Pixel Aspect Ratio Correction turned off.

The more common video frame settings are also available from the Preset drop-down menu when you create a new document (Figure 4.26). When you choose one of these presets, Photoshop will automatically create a set of guides in the new document. The area within the outer set of guides is called the Action Safe area—a TV set should display everything within this area, more or less. If an element absolutely, positively has to be visible on a TV screen, make sure it fits within the inner set of guides, called the Title Safe region.

Figure 4.26. The most commonly used video formats appear in Photoshop's file presets.

It's possible to create multiple views of a single document by choosing Window > Arrange > New Window, and then choosing Pixel Aspect Ratio Correction to show one document as it will appear on a nonsquare device.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint