Digital Photography for Graphic Communications
Chapter 8 • Photoshop
Introduced in 1989, Photoshop is a market-leading image editing program that is useful in web design for opening, formatting, editing, and saving images for the web.
Image Capture
The best way to capture high-quality images for the web is with a digital single-lens reflex (DSLR) camera, whether mirrored or mirrorless. Today’s semi-professional and advanced amateur cameras typically capture 20–36 megapixels (MP), and the megapixel capacity increases as new cameras are introduced every year.
Camera raw format captures the full megapixel and density range of the camera, however such large images are seldom necessary for the web. in fact, they can be detrimental to loading times. Camera Raw includes both proprietary formats for each camera manufacturer and model, as well as the universal digital negative (DNG) format.
When opening camera raw format in Photoshop’s Camera Raw plugin (Figure 8-1), web designers should think about the maximum image size they will need, then use the image resizing feature to get the desired size. The site websitedimensions.com says that 35% of web surfers use a browser window that’s 1366×768 px, while 20% use 1920×1080. If this is true then the maximum size window would be 2 MP (1920×1080) and a full-size image would not need to be larger than that. It may be useful for the designer to think about the anticipated maximum size of an image as being a full-page, half-page, or quarter-page image. A quarter-page image would need to be 960×540 or 0.5 MP.
| Suggested Photoshop Workflow for Web |
| 1. Set camera exposure, white balance, and depth of field for optimum photo.
2. Record in camera raw format, bracketing exposures 3. Open photos in Camera Raw plugin, select correct exposure, set image size, and open 4. Edit as required 5. Export to JPG or PNG using Export > Save for Web. |
“Toning” Images
If you have a bracketed series of exposures, several features of Photoshop are useful for choosing the best image and preparing it for publication.
Obviously it’s easier to see the quality of a photo on a large-screen computer monitor than on a camera’s 3-inch display. However Photoshop and other programs also allow you to compare photos “by the numbers” by reading highlight and shadow values.
The lithographic printing industry took a systematic approach to image toning, based on the largest and smallest halftone dots that a press can typically reduce. Measured on a scale of 0–100% dot area, most presses can reproduce 3% highlight dot and a 97% shadow dot.
Applying the 3-97% minimum-maximum to the levels scale: 3% of 255 is 7.65, or 8 when rounded; while 97% of 255 is 247.35, or 247 (Table 8-1).
| Table 16-1. Highlight and Shadow Dot Values | ||
| Highlight | Shadow | |
| % Dot Area for Print | 3% | 97% |
| Levels for Web | 247 | 8 |
To select the best exposure from a bracketed series, make sure the file has no levels above 247 or below 8. After selecting the best