Hack Your Way to Great Web Pics: 10 Photoshop Tips for Non-Experts

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 Amount: 25%, Tonal Width: 15% and a large Radius, like 180px. Highlights I usually set much lower, defaulting to Amount: 5%, Tonal Width: 20% and Radius: 30px. Under Adjustments, set, everything to 0.

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

Unfortunately, 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 Hue and Lightness to +5. Then choose Yellow, and set the Hue to -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.

In the Layers palette, double-click the Background to make your image a layer. Press ctrl/⌘-T (or 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.

Make sure 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, 600 or 800 pixels wide is a good size. And for a photo that will only be used at thumbnail size, go for 200 or 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 6 and 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 Basic, choose 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.

This entry was posted in Photoshop and tagged , , , , , . Bookmark the permalink.

2 Responses to Hack Your Way to Great Web Pics: 10 Photoshop Tips for Non-Experts

  1. Great tut! Also, not a bad restaurant at all! Just ate there Saturday!

  2. Pingback: slacker | Panama & Pine

Your Thoughts?