I am not a photographer, but I do use photos all the time. Whether it’s images I’ve shot myself for a Zagat Buzz article, or files sent to me for a website I’m developing, optimizing pics for the web is task I tackle often. This is true for almost anyone working online today. Good pictures make a difference (see also: “worth a thousand words”).
Though I’m not a pro shooter, I have used Photoshop for over 15 years. I also have a business partner who is a very talented commercial photographer. This has allowed me to develop an easy method for optimizing images for the web, one that anyone with access to Photoshop can adopt. The 10 tips below trace my quick processing procedure for just about all the photos I post online. Follow along with the steps or just use the tips as one-offs.
Part I: Fix the tonality
1) Bring out initial contrast with Auto Contrast
A good first step for any file is to choose
Image > Auto Contrast. Now you have a good sense of the colors and tones you’ll be working with in this photo.
2) Even things out with Shadows/Highlights
Image > Shadows/Highlights can help you recover dark areas, such as under tables or in corners, and also overexposed bright spots, like sun shining through windows or gleaming off white surfaces. Check off
Show More Options and start playing around with the settings.
I find good results usually come with
Shadows set to
Tonal Width: 15% and a large
Highlights I usually set much lower, defaulting to
Tonal Width: 20% and
Radius: 30px. Under
Adjustments, set, everything to
You may want to dial in settings such as these and choose
Save as Defaults for a quick starting point on your next photo.
3) Use Levels to adjust brightness
If the photo as a whole is still too light or dark, use
Image > Adjust > Levels. (Do not use
Brightness/Contrast – it’s destructive and won’t give good results.) The main thing to remember about
Levels is that you only want to play around with the
Input settings, and only the middle slider (called the gamma) which defaults to
1.00. By moving it left or right, you lighten or darken your whole photo.
Part II: Fix the color
4) Color correct with a Curves trick
Image > Auto Color is not quite as handy as
Image > Auto Contrast, and rarely gives pleasing results. Instead, use a relatively hidden dialog within the Curves panel for a one-click quick fix. Choose
Image > Adjust > Curves and click on
Options. In the
Auto Color Correction Options window that appears, check off
Snap Neutral Midtones, and try out the three different
Algorithms options, watching what effect each has on your image. Chances are, one of them will jump out at you as an enhancement.
Bonus Tip: if this step has taken you too far away from your original color, try using
Edit > Fade and bringing the effect down to 50%, combining your old and new results.
5) Fix skin tones with Hue/Saturation
The color of human skin is very tough to get right. A quick fix for lighter skintones is found in
Image > Adjust > Hue/Saturation. From the drop-down that says
Master, first choose
Reds. Set both the
+5. Then choose
Yellow, and set the
-5. This will even out a lot of splotchiness in your subjects.
Part III: Fix the perspective.
6) Straighten your horizon with the Ruler tool
For exterior or landscape shots where you can see the horizon, this is a great trick. Zoom into 100% and use the
Ruler tool (hidden below the
Eyedropper) to draw a line along the horizon (or anything that you know should be horizontally level. Then choose
Image > Image Rotation > Arbitrary. The pre-filled-in number will make your drawn line straight, righting your image.
7) Rely on Guides to correct perspective
All wide angle shots suffer from parallax, and lines that we know should be perpendicular to the horizon diverge outward from the camera’s viewpoint. To make your shot hew to architectural standards (and generally look more real and appealing), fix this with a simple transform.
First, drag a couple of vertical guides from the rulers (hit
ctrl/⌘-R to show them) and drop them next to obvious straight up-and-downs on the far left, far right and center of your photo, such as corners of walls, doorframes, bookcases or lampposts.
Layers palette, double-click the
Background to make your image a layer. Press
Edit > Transform > Distort). Hold down
ctrl/⌘ again, click on one of the corners and pull it in or out of the frame, until your reference line (e.g. the corner of the wall) is mostly straight up and down. Do the same with the opposite corner, and keep tweaking and pulling each corner until you have straightened all the vertical lines.
Hit Enter to keep the transformation, then crop out your new, perspective-corrected shot, and re-flatten your image (
Layer > Flatten Image).
Part IV: Shrink your image
8 ) Resize for the web
Now is the time to size your image appropriately for the web. First, save your work thus far at original size (as a TIFF, PSD or other non-lossy format). Then, resize with
Image > Image Size.
Constrain Proportions is checked off (we don’t want to smush or stretch the image). Also check off
Resample Image, and choose
Bicubic (best for smooth gradients) from the drop-down. We’ll be sharpening separately, later.
Use the top set of measurements, checking that the units are set to
Pixels. For a photo you want the viewer to be able to blow-up to full screen, type something like
1200 pixels into the
Width field. The
Height field will adjust accordingly.( If your file is already smaller than this, don’t enlarge it. It won’t help.)
For a photo that will be placed in a blog post or article and won’t be blown up,
800 pixels wide is a good size. And for a photo that will only be used at thumbnail size, go for
300 pixels. Choosing the right size is important because that’s the size that we’ll sharpen in the next steps.
Part V: Sharpen
9) Add contrast using Unsharp Mask
With its oxymoronic name,
Filter > Sharpen > Unsharp Mask is not best used for sharpening of detail. Instead, it’s powerful at adding that last bit of contrast and making colors stand out. To achieve this, dial in some unconventional settings as a starting point. Set the
Amount somewhere between
11%. Bump the
Radius almost all the way up, to around
220 pixels, and make sure the
Threshold is set to
0. You should see the photo pop and glow.
10) Smart Sharpen
To gain actual detail, use
Filter > Sharpen > Smart Sharpen. This wonderful filter came along in later versions of Photoshop, and is a fantastic solution for slightly blurry images, and also files that have been down-sampled (when you shrink a file, you lose hard-edge detail due to interpolation).
Keeping the settings on
Gaussian Blur as the type of fuzziness to remove. Start with an
Amount around 60% and a
Radius of 0.6 pixels, and play around with both. Settings here will vary greatly with the type and size of image you want to end up with.
And voila! Save your file as a JPG (I default to a quality setting of 8), and show off your work in your desired web destination.
Let me know if you use any of these tips, or agree/disagree with any of them. I’m always looking to refine my workflow.