File Under: UI/UX

Photoshop Tips for the Web

It’s difficult to think of an electronic gadget that’s changed the way I look at the world more than my digital camera. I held off from buying one at first, but after a year of researching and one particularly hefty tax return from Uncle Sam, I made the plunge. Roughly US$500 later and I was staring down a convex lens at my life. Suddenly, every sight was a picture waiting to be taken! Every scene a perfect composition begging to be snapped up and stored on a memory card. After some advice from my pro photographer friends and a whole lot of practice, I officially became the annoying guy with the camera at the crowded party.

The truth is that digital photography is actually rather difficult. Not the taking pictures part, that’s easy. It’s the creation of a perfect end product that’s the sticky part. Taking a raw JPEG or TIFF file and crafting a digital image that looks beautiful on all the different monitor types is a process that transcends art and borders on science. Some photos turn out almost perfect from the get go – never underestimate the power of good natural light! – but most of your snapshots are going to need some gentle persuasion in the right direction before they are ready to wow the New York gallery scene.

Don’t panic, because Webmonkey is here to impart advice on creating that sharp, bright, and well-balanced image that you can show off on your site, your blog, Flickr, Zooomr or anywhere on the web. We’ll be using some tools and techniques that will be familiar to you if you’ve ever spent any time messing around in Photoshop. I’ll also be covering some basic rules about file handling, monitors, and display options.

Contents

  1. What you’ll need
    1. Colorful Language
    2. Brightness and Contrast
    3. Adjusting Color
      1. Using Levels to Adjust Color
      2. Curves
    4. Auto-Adjusting
    5. Cropping and Resizing
    6. Size Matters
      1. Making Thumbnails
    7. Tips and Advice

Introduction

What you’ll need

To get the most out of this tutorial, you’re going to want to play along at home. Of course, this means that you’ll need (at the very least) a digital camera and a copy of Adobe Photoshop, Gimp, or a lightweight editor like Pixelmator. I’ll be using Photoshop. I’m going to assume that you have at least some experience in using a digital imaging application.

I’d also recommend that you gain access to at least two different computers on which to view your photos as you work on them. Ideally, you should find one computer with a flat-screen display and one with a plain old CRT. You won’t need Photoshop on both computers, just web browsers, but the more computers with different video cards and display configurations you can use, the better.

Colorful Language

My girlfriend and I recently went on a trip to the Hawaiian island of Oahu to attend a friend’s wedding. It turns out that the weather didn’t exactly cooperate with our plans. Sometimes it was dark and stormy, and sometimes it was bright and sunshiny. Consequently, some of my digital photos are darker than I expected, and some of them even show a blue-green tint for some reason.

Several factors can alter color representation on a digital camera — the optics, the pixel depth, the type of compression the camera uses, and most of all, the quality of the available light. Plus, if you’re like me and you take pleasure in pushing the limits of your camera’s aperture and shutter speed settings, you can get some funky results that may need a little cleaning up.

There are dozens of ways to alter the brightness, color saturation, and overall presence of your digital photos in Photoshop. All of the tools we’ll be using live in the Image -> Adjustments menu. Using a combination of adjustments with the Levels, Color Balance, and Curves tools usually yield the best results.

Brightness and Contrast

The Levels adjuster is most valuable image correction tool I’ve encountered in Photoshop. This is the tool I use most often, and in some cases, it’s the only tool I’ll need to produce a sharp-looking finished photo.

levels1.jpg

When you open the Levels tool, you’ll see a histogram showing you all of the pixel information in the file. The histogram, when read from left to right, shows you how much dark (shadow), midtone, and light (highlight) information is in the photo. A photo that’s very dark to begin with would show a taller “peak” on the dark, or left, end of the histogram.

At the bottom of the histogram live three triangular Input sliders. On the left is the black shadow slider, on the right is the white highlight slider, and in the middle is the gray midtone slider. Moving the highlight slider towards the center of the histogram makes the image lighter. Experiment a little and you’ll get the feel for it.

The most common use for the Levels tool is adjusting the brightness and contrast of your photos. Some folks would tell you that the best way to futz with these settings is to use Photoshop’s Brightness/Contrast adjustment tool. However, in my experience, I’ve found that the Brightness/Contrast adjustment tool is a bit harsher than the Levels tool – the fine adjustments are more difficult. Try them both out and you’ll see that the Levels tool simply affords more flexibility.

If I’m working with a darker photograph, I usually begin my image correction by increasing some of the highlights in the photo. To do this, I move the highlight Input slider towards the middle of the histogram until it’s just barely touching the first significant “spike” of information. This increases the amount of brightness in the photo, so the next step is to balance out the contrast between the highlights and shadows. To do this, move the gray midtones slider to the right just a bit. You’ll notice that this cancels out some of the brightness that you just added to the photo, but it also gives the colors more “oomph” and makes the photo look a little more saturated.

levels2.jpg

Also try moving the shadows Input slider towards the center, and then balance out the brightness and contrast with the midtones slider yet again. You’ll see those colors start to come to life. Keep them natural, though. Don’t make your colors look too rich, or else they start to look fake. And remember to hit OK when you’re done!

Check out these photos of Honolulu at night. The original (on the left) looks OK to begin with, but notice how adjusting the levels brings it to life.

honolulu1.jpg honolulu2.jpg

Get a closer look at the before and after photos.

Even when they are taken during the daytime, most digital photos from my camera tend to come out on the darker side. However, if you have a camera that produces lighter-than-average pictures, the same technique can be used — just move the shadows slider first to make the image a little darker, then balance it out by adjusting the midtones.

Most pictures you take are only going to require a little nudge on either side of the Levels histogram to clip out the most extreme lights and darks and get the brightness and contrast setting just right. When you’re done, both the highlight and shadow Input sliders should be moved just a touch towards the center of the histogram. Most importantly, you should be satisfied with the results.

Adjusting Color

Now that you’ve succeeded in taking that dark or washed-out photo and making it nice and vibrant, you may notice that the sky looks a little… yellow? And why is the ocean so green? Whatever the reason for such unnatural oddities, Photoshop offers several tools you can use to bring those colors back to reality.

The first technique to explore is the use of the Color Balance tool. This is a simple tool that can be used to add or subtract certain shades from your photos. When you open the Color Balance tool, you will see three radio buttons underneath the sliders. For the best results, only bother with the midtones setting. Feel free to experiment with the highlights and shadows settings, but notice how they cause digital artifacts and “hot spots” to develop in the lightest and darkest parts of the photo. Arty, but rarely desirable.

color_balance.jpg

The Color Balance tool is easy to figure out. Just move the sliders away from the colors you are trying to tone down. If your photo has an overall yellowish hue, move the bottom slider away from “Yellow” and toward “Blue”. This may cause your other colors to fall out of balance, so the key here is to think small – make tiny adjustments, and make as few adjustments as possible until the photo looks natural.

Using Levels to Adjust Color

If you only have one portion of your photo that looks off-color, such as the sky or the ocean — both of which are commonly degraded by digital cameras — the best tool to use may be the handy Levels adjuster.

levels_channel.jpg

At the top of the Levels tool, you’ll see a Channels drop-down menu. The default is RGB, which is a combination of all three screen display channels, red, blue and green. Click on the drop-down and you will see choices for each individual channel. If your sky looks a little green, select the green channel and move the Input sliders to the right. You can also produce the same results by selecting the blue channel and moving the Input sliders to the left. Reducing the presence of one color is always going to make another color stand out. Again, the keys are small adjustments and a willingness to experiment.

Here is an example of a color adjustment that I made using the Color Balance and Levels tools. The original photo, on the left, has a blue tint because it was shot in low light on a cloudy and snowy Vermont winter afternoon.

garvey_blue.jpg

garvey.jpg

Garvey, looking a little blue, and then just right.

Curves

The last color tool I’m going to show you is the Curves tool. This one is a beaut — it combines the Levels tool, the Color Balance tool, and the Hue/Saturation tool into one device. However, it’s also the most difficult to get the hang of.

curves.jpg

The trick to using the Curves tool effectively is to place one or two points on the diagonal line that bisects the grid and move them on the x/y axis. Moving the curve toward the upper left makes the image lighter, and moving the curve to the lower right makes it darker. Using two points, you can create an S-curve which changes both the brightness and the contrast at once.

In the Levels tool, you are only adjusting the Input values when you move the sliders underneath the histogram, but the Curves tool automatically adjusts the Input and the Output channels in tandem, so the changes you make are more drastic.

In order to get the most out of the Curves tool, work with small adjustments. Sense a general rule of thumb developing here?

Auto-Adjusting

When you first clicked on the Image -> Adjustments menu, did you happen to notice those “Auto” options? Specifically, Auto Levels, Auto Color, and Auto Contrast? Hmm, well, let’s talk about those.

Adobe’s auto-adjusting tools are pretty helpful most of the time. I’ve used the Auto Levels tool many, many times to quickly make a no-fuss adjustment to a dark photo. However, as smart and helpful as these tools may be, they aren’t smart enough to always please the human eye.

The Auto Contrast and Auto Levels tool are the best of the three. If you’re working on a photo that needs a little nudge here and there, they can clean it up in less than a second. However, if the photo needs some work, then these tools are more trouble than they are worth. The Auto Levels tool especially seems to over-saturate the darker shades of the color spectrum. Your best bet is to try an auto-adjustment, and if you like it, keep it. If you don’t, Undo your way back to the original state and adjust the photo manually.

The Auto Color tool is rather finicky. No matter how hard I try to figure it out, I never know what it’s going to do next. It seems to enjoy botching up skin tones repeatedly for hours. Then, all of a sudden, it gets one photo just right. The problem is that the tool isn’t smart enough to weigh all of the colors in the photograph according to importance. So, instead of trying to teach it, give it a whirl and if it doesn’t work, correct the color manually.

rita.jpg

rita_auto.jpg

This is a photo I took of my great aunt Rita standing in front of a seafoam green wall. On the left, I’ve color-corrected her manually. On the right is the Auto Color tool’s result. Rita, you look a little pink! You should eat something! I’ve got a lasagna in the freezer, have a seat!


Cropping and Resizing

Now that your photos are all clean and bright-looking, they’re ready for their close-ups!

To my eyes, the two most important steps in producing a stellar photo are the first and last steps:Framing the photo in your viewfinder and framing the final version with your computer.

Cropping isn’t just useful for getting rid of that little bird that snuck into the corner of the your otherwise-perfect composition. The choices you make when you crop can improve the artistic and emotional impact of your photo. I know, I know, maybe I’m stretching a little, but consider the visual presence of the photos at the last art exhibit you went to. The photographer made some difficult choices about how the subjects were framed within the four sides of the picture, and not all of those choices were made when artist clicked the shutter. Look at the work of Nan Goldin or Tina Barney for some nice lessons on inventive composition.

Photoshop’s crop tool is the easiest and best way to crop your photos. Drag the crop tool across the photo and you’ll see a framed rectangle — the cropped photo is everything in the middle. You can reshape the selection by dragging the handles on the sides or in the corners of the crop box.

Tip: If you want to keep the same dimensions for the crop box but you want to make the selection larger or smaller, hold the Shift key while you drag one of the corner handles.

crop.jpg

When you’ve framed the crop box over what you want to keep, either double-click your mouse or hit the Return key. All of the shaded stuff on the outside of the box will be dumped, and you will be left with a tightly composed image.

The crop tool is also useful for resizing your photos. You can specify the pixel dimensions that you want for your final image by entering them in the tool settings at the top of the workspace. When you set pixel dimensions and make your crop, Photoshop will automatically resize the photo based on the specified pixel width and height. Notice that the crop box will also retain the dimensions you asked for as you move it around and resize it.

crop_tool.jpg

So what’s a good size for photos on the web? At screen resolution, which is 72 pixels per inch, a good range to shoot for is somewhere around 300 pixels wide for smaller photos and between 450 and 600 pixels wide for larger ones. If you are building a collection of photos for a web gallery, it’s important to keep all of your photos relatively the same size — it’s easier to manage the gallery, and it doesn’t disorient the viewer. Consider this:When you order physical prints at the store for real film, they come to you as either four inches by six inches or three and a half by five inches. That’s a good ratio to apply for your digital photos as well, because it’s the most common ratio for photography, and it’s what your viewers will subconsciously expect to see. So if you have an image that’s 500 pixels wide, the height should be around 350.

Even if you’re posting to Flickr or some other photo-sharing site, try to crop at the same size anyway — your output will be cleaner and more uniform in general.


Size Matters

At this point, your photos are almost finished. But look at that file size! Beach picnic photos are no picnic to download when they’re 3381 kilobytes. The last step in preparing a photo for display on the web is making it web-friendly. So let’s talk file optimization.

What’s the right size for speedy downloads? Well, you don’t want to make your photos too lightweight, because over-compressing them can make them look like garbage and effectively ruin all of the hard work you’ve put in up to this point. Also keep in mind that the brighter and more colorful your photo is, the larger the file size is going to be no matter what.

So, there’s no one answer to the question of “how big.” However, a good range to shoot for is between 30K and 70K. This ensures that your download times won’t be massive, but also that your photos will still look relatively nice. Also, with smaller file sizes, you can fit more of them on your server. If all of your photos are 50K, that’s around 20 photos per megabyte of storage space.

I like to use Photoshop’s “Save for Web” feature. This feature lets you select the type of compression you want, move the sliders to adjust the amount of image compression, and even see the results on the fly. Select a photo to optimize and choose File -> Save for Web.

saveforweb.jpg

On the right-hand side of the screen, you’ll see several different drop-down menus. These menus change based on which file format you choose. Most digital photography on the web is displayed using the JPEG format — it produces clean results and preserves color saturation while keeping your file sizes low. Select JPEG as your file format (choose it in the upper-left hand menu) and you’ll see the Quality menu appear on the right. You can change the value by entering a number between 1 and 100, or by moving the little slider. As you change the value, look at the status bar at the bottom of the screen. That’s a download calculator — you can see the file size and estimated download time increasing and decreasing. I prefer to save my photos with a Quality setting of about 60. Sometimes, I nudge the slider a little bit higher if I’m saving a photo that doesn’t have a whole lot of color information in it, or lower if it’s a rich photo with gobs of bright colors.

At the top of the Save for Web window, you’ll find tabs marked “Original”, “Optimized”, “2-Up” and “4-Up”. Use the 2-Up tab to get a side-by-side comparison of the original and the optimized files. The 4-Up tab will allow you to view four different optimization options at once. When you’ve arrived at a setting that you like, click Save and name the photo something web friendly. They usually come out of the camera as “DSC000134.jpg” or something, so now is a good time to save it as “hawaii01.jpg

For an in-depth look at image optimization, check out Jason’s Site Optimization Tutorial.

Making Thumbnails

Chances are, you’re going to be sharing your photos by plugging them into a web service like Flickr. But you also may want to build your own gallery and host them yourself. If that’s the case, you’ll need to generate some thumbnails.

You’ve probably seen a thumbnail gallery before; a web page will have several rows of thumbnail images, maybe four or five images across. The thumbnails are linked to the full-size images – click a thumbnail and the full image loads. A slideshow gallery loads the full-size pictures one at a time, either by a mouse click or by a timed script.

Thumbnail galleries can be built in pure HTML, or you can enlist the help of a programming language like PHP or JavaScript. Check out the thumbnail gallery I built for my buddy Virgil’s site using HTML and JavaScript.

Slideshows and other auto-loading galleries are worth exploring (and I encourage you to!). There are a few software programs out there that will build a slideshow for you, but building one yourself is more rewarding. Even so, that probably deserves its own article. Powerful development suites such as Dreamweaver and GoLive can also generate different kinds of image galleries.

There is a useful tool in Photoshop that generates a quality HTML-driven thumbnail gallery on the fly. It’s called the Web Photo Gallery tool, and it’s accessed via the File menu under File -> Automate with the other batch process functions.

webphotogallery.jpg

You pick the folder where your images live, the folder where you want to save your thumbnails, the colors and fonts you want to use on the HTML pages it generates, and a host of other parameters. If you want it to, this tool will also take your image files and correct their levels, auto-resize them, and compress them. However, the Web Photo Gallery tool uses the same engines employed by the Auto Levels, Auto Color, and Auto Contrast tools which, as we’ve discussed, are better left to the amateurs. But I’ve found the Gallery tool handy when I need to create fifty-nine thumbnails, something that’s an incredible hassle to do by hand.

If you’re only creating ten thumbnails or so, try using the Save for Web feature again. This time, click on the Image Size tab on the right side of the screen and shrink your image down to thumbnail size before saving it.

My favorite size for thumbnails is 75 pixels across, just over one inch wide when displayed on most computer screens. Also, you don’t need to worry about optimization settings as much with thumbnails. They’re just place markers that aren’t intended to look good, so go ahead and squeeze the heck out of them.

One more tip:Create a separate folder called “thumbnails” and dump your thumbnail images in there. It’s important to keep thumbnails separate from your full size images.

Tips and Advice

  • Always resize last. Make your adjustments to brightness, contrast, and color while you still have the most pixel information. Cropping and resizing should be your final steps.
  • Look at your work on as many different monitors as possible. LCD screens run hotter than CRTs, so check your work on both. Eventually, you’ll learn to trust your eye for the correct amounts of brightness and saturation.
  • Most digital photos won’t need any cleaning up, but some will. Fix those blemishes with Photoshop’s healing brush and the rubber stamp tool.
  • Avoid using the flash if you can. Natural light is best, and flashes produce brightness imbalances that are difficult to fix. Experiment with the aperture and shutter speed setting on your camera.
  • Study the work of others. Look at professional photographers’ sites and pay particular attention to the way they display their photos and arrange their galleries.
  • The best way to learn the capabilities of your toolset is to experiment! Try making art, adding filter effects, and playing with color saturation.

By now you’ve learned how to fancy up your digital photos and prepare them for viewing by all. Hopefully, I’ve given you enough of a head start to dig in and begin showing off some great-looking pictures. Maybe we’ve even fired up your inner artiste, oui?