Photoshop Lesson #2 – Pictures for Print Versus Web

I mentioned earlier that I’m teaching an upcoming Photoshop course at work. I’m not an expert but I can make my way around the tool. I’m going to start sharing my class in pieces. This post is about saving your images for the web and for print.

Defining DPI and When To Use What
DPI stands for Dots Per Inch. Although somewhat of an oversimplification, one way to view DPI is that on print to make something look nice you need to squish a lot more dots of color into each inch while on digital platforms you don’t need to have as many dots. There are different rules for when to use what, but if you remember two measurements, you are good:

• 72 dpi for digital
• 300-600 dpi for print (you’ll almost always be dealing in the realm of 300)

What happens if you prepare a print image at 72 dpi? It looks something like this:

(It’s a little hard for me  to illustrate this on the web…)

What happens if you prepare web images at 300 dpi? It slows down the time it takes your webpage to load. For examples of slow sites, check out this top ten list.

How to Adjust DPI
You can modify the DPI of an image down and achieve the desired outcome. It is nearly impossible to adjust the DPI of an image up and achieve good results. To confirm or adjust the DPI of an image: Image … Image Size … Resolution. The field next to Resolution is the DPI value. You can adjust it by typing a new number into the field.

Saving Digital Images
The two most common ways to save images are as .jpegs / .gifs for print or web.

Note: .jpeg versus .gif … If it’s a photograph save it as a .job. If it’s a line drawing, like a cartoon, save it as a .gif. If you aren’t sure, save it as a .jpeg.

Method 1, which can be used for print or web, but assumes you have already set your image to the appropriate dpi: Save your image by File … Save As … Select .jpeg as format and type in file name … Save As … Select the image quality* … OK

*Image quality for a print image should be 12 (nicest). If you are saving for web, you can set the quality at 7 (medium quality).

Method 2, which can only be used for images that will only be used digitally: File … Save for Web and Devices* … Select version of file you want … Save

*The first time you save an image this way, I recommend you set up the next screen like the version below. Once you have set this up once, you should not need to do so again.

Some notes about this screen:

1. I recommend the “4-Up” layout.
2. Select ,joeg or .gif, as appropriate.
3. If saving a .jpeg, set the quality at 60. This will act as a good default for you.
4. You can change the quality setting for each block. The thumbnail in each corresponding block will show you how the image, saved at that quality, will look. Pay attention both to the image quality as well as the file size. You want to achieve the highest quality as the smallest file size.

File Types
There are many file types to select from when saving an image in Photoshop. Here are the most commonly used ones and when to use them.

• .psd: If you are doing extensive editing work in Photoshop, saving your file as a .pdf will allow you to save your editing history and multiple layers. (I won’t be covering layers in any of my posts but am happy to answer questions if people have them.)
• .jpeg: This is the most widely used and popular photo file format. This is a good format to save a file in when you are done editing. If you are still working on the file, it’s better to save it as a .psd so you don’t lose any data. Every time you save resave a .jpeg, you are losing a small bit of data.
• .gif: The Graphic Interchange Format is great for graphics but less appropriate for photos. These file types can display up to 256 colors, which works for graphics but limiting for photographs.
• .png: This is a lossless file type, meaning that, unlike the .jpeg, you can save this file type over and over without losing any data. Unfortunately, this file type is not as widely supported as .jpegs and it does not support CMYK colors, meaning commercial printers can’t use them.
• .tiff: This is another lossless file type, so you can save it over and over without losing data. It also supports CMYK so it is good use in commercial printing. Unfortunately the file sizes are huge and often too unwieldy to work with.
• .eps: Files in this format are often used by printers because they can be imported into many printing programs. Unless requested by a printer, this typically does not make sense to use because it cannot be opened by many programs.

Want to start from the beginning? View class 1, which reviews the Photoshop toolbar.


As always, see something you disagree with or think is just plain wrong? Tell me! Seriously – I want to know.