I
MAGES FOR WEB VERSUS PRINT

Resolution

I've been using a computer to color and to work with images in general for years and I've just recently started to feel like I have a grasp on resolution. The funny thing is I probably don't, and I just feel like I do ("Oh how sad" funny, not "Ha ha" funny) What follows is my best explanation of some basics of resolution.


DPI:
Stands for Dots Per Inch and refers to printer resolution.

PPI: Stands for Pixels Per Inch and refers to screen resolution

SPI: Stands for Samples Per Inch and refers to scanning resolution

Sounds straight forward, but software doesn't always keep its D, P, and S -PI's separate. Scanners will have a DPI setting when technically what you're adjusting is the SPI which will later affect the DPI (though mine does say it's adjusting the output resolution). The same window in Photoshop is used to adjust the print size and pixel size of an image, depending on whether a box is checked or not. Confused? Don't worry, I am too. Here's some stuff about resolution I've found helpful to know.


For scanning images to color: The higher the resolution you scan at the larger the image created on the computer will be in terms of pixels, and larger images are easier to color.

For scanning images to work with on the computer: Images that have been scaled down look better than ones scaled up. You can always sharpen to get rid of any fuzziness on a scaled down image. You can't do anything to get rid of the pixilated look of a scaled up image.

For displaying images on the web: Image size in terms of pixels is important, not inches. DPI and print size aren't a concern, just how large the image is on the screen. As an example of DPI and print size not affecting images on the screen check out the following 3 images
     
The one on the left is 20dpi, middle is 72dpi, and right is 300dpi. They all appear the same size, though, because they're the same size in terms of pixels.

I'll usually set the resolution of the images I'm displaying online to 100ppi. It's just a number I like. Then I'll adjust the actual pixel dimension of the image.

PPI more affected the viewer's computer than anything you can adjust. It's how many pixels the screen creates for every inch of its actual size. 640x480, 800x600, and 1024x768 are examples of screen resolution. So on the web you should think about whether your image might be too large for somebody's screen. Offer thumbnails when possible and if it's a website you're creating test how it will look with different screen resolutions by changing the resolution of your own screen and viewing your site.

For printing images: The higher the DPI the smoother the image will be, but it helps to know the max DPI of the printer you're using. If your printer can only do up to 300 it'd be silly to try to have it print a 700 DPI image. Ink jet printers can usually print at 300 DPI and laser printers can usually print from 600 to 1200 DPI.
 

How to adjust resolution in Photoshop:
Go to Images >> Image Size. You'll get a window something like this.

On the top is information about the size of the image in terms of pixels, on the bottom is info that helps you know how the image will print. Now below that there're two checkboxes. One that maintains the proportions of the image when the size is changed and another. Uncheck the second box.

The pixel size is locked and you can change the document dimensions or resolution of the document without affecting the size of the image on the screen.

 


Mode/Channels

The mode of an image can be found and changed in Photoshop by going to Image >> Mode. You can see the separate channels (if applicable) by clicking the Channels tab next to the Layers tab. Each channel represents how much of that color is needed to create the finished image.

For web images: Screens display images using levels of red, green, and blue (RGB). Generally that means you'll want to set the mode of any images you're planning to display online to RGB. There are other modes associated with web graphics, such as bitmap, grayscale, and indexed color, but knowing that screens display different colors using red, green, and blue is the important thing to remember. If you accidentally set the mode to CMYK the image won't show up online.

For print images: Printers use varying levels of cyan, magenta, yellow, and black (CMYK) to represent colors. If you're working with an image that you know is going to be printed change the mode to CMYK to give you a better idea of how it'll look printed. Generally CMYK won't be as bright as RGB so planning the colors in CMYK will help you avoid unwanted dull surprises. How well you can predict the printed product varies depending on the program and the screen you're using, but even if it isn't exact it'll be closer than RGB would be.

 


BACK TO STEP #1

BACK TO TUTORIAL INDEX

 

All content is © Grace Freeman unless otherwise stated. No stealing!