How to Edit Photos for the Web

Bringing Light From Darkness

From Dark to Light

Good Quality starts with Nice Placement and Focus

To start, you need a good quality photograph, the subject must not be blurry. For small items such as jewelry, that means using a tripod (avoids camera shake), and using the macro setting. I usually have the jewelry really close to the camera (less than 5 inches on a flat surface). On a display or model, I use auto focus and the camera is usually about 3 feet away. I have lots of lights, but no matter what I seem to do, the white turns to gray and the whole photo looks dark.

Worthwhile Time Investment

I use Photoshop Elements 3.0, but the settings should be similar in the newer versions. There's quite a bit to the learning curve if you've never used Photoshop before, but it's definitely worthwhile to learn the settings and keyboard shortcuts. If you can't find the settings I listed, you can press the F1 button while in the editing program and you can search in the help file. You can also search the web for Photoshop "Cheat Sheets" for the keyboard shortcuts.

Editing a batch of photos can take as long or longer than taking the images in the first place. But it's worth it to have a good record of your creations, and your customers will thank you as well.

Step By Step Editing Process

  1. Duplicate the file. (FILE>>Duplicate)
    You will be working on a copy of the original picture.
  2. Remove Color Cast and Adjust Levels. (Control + L)
    [In Paint Shop Pro - (ADJUST>>Color Balance); Adjust High/Midtone/Shadow (Shift + M)]
    Color cast is an artifact of poor lighting, the camera will try to compensate and the photo will have a hint of another color throughout the image.(ie. Greenish tinge.) In Photoshop and also in Elements, it can be accomplished by opening the Levels menu (Control + L) and using the eyedroppers on the right hand side of the window. There is an eyedropper for each of the three colors to be corrected (black, gray, and white). Click the appropriate eyedropper and then in the area with the offending color cast.

    In Photoshop Elements 3.0 there is an additional special menu item (ENHANCE>>Adjust Color>>Remove Color Cast) to complete this same step. But it will still be dark. Use the levels adjustment slider to change the brightness/contrast and shadows/highlights at the same time. (Control +L) The left side of the slider controls black, the right controls white, and the middle adjusts the black/white balance.

    I bring the subject of the photo as close to true life color as I can, but levels only get the image so far, the edges are still dark.

    Once you remove color cast the output levels will change and so the graph will update.

    If my photo starts with white pearls and crystals, sometimes I have to move the white slider towards the center and the middle slider towards white. All "white" photos are hard to adjust. If you can, try adding something that is colorful to one corner of the image, you can always crop it later. But I find that if the camera has colors to deal with the whites come out much clearer and there is less adjusting to do.
  3. Edit the background and edges.
    I use the eyedropper for plain backgrounds and the clone stamp for pattern matching. Just select the area to copy and fill in the areas that don't belong.
  4. Blur Shadows.
    I zoom in really close  and use the blur tool to fix the bead shadows, sometimes they are gray and speckled with pink and green. If you don't blend the dots, the jpg image compression makes those dots larger.
  5. Crop Image.
    Remove excess whitespace from the photo.

Save multiple versions in different sizes

At this point you have an image that is fixed, but huge, way too large for the web. Save this version as -large-fixed.  I usually resize the image to 25%. (Control + T) click the link (at the top near the menus) to keep the aspect ratio for length and width the same. It will ask if you want to change the background into a layer, click yes, by default it calls the layer: Layer 0. Then select the pixels in that layer, (Control Click on Layer 0 in the layers panel). Then IMAGE>> Crop. It automatically crops the image to the dimensions of the selection.[In PSP: (Shift + R) to crop to selection.]

Then save for web at jpg maximum, zero compression. FILE>> Save for Web... [In PSP: FILE>>Export>>JPEG Optimizer] save this version as -web-max Then I save for web again but try to move the compression slider down as much as possible while also keeping the image from getting too pixelated.  save this last version as -web-min.

It's good to have that many versions in case you ever have a chance get published, or get digital prints made for your own reference. If at a later date, you find a better editing method, you always have the original to fall back on. The large fixed file is saved as a psd because it is a lossless save file. Every time you edit a jpg the quality of the image suffers. It's just a feature of the way it stores the information, but it allows for lifelike images in a small amount of file space.

Enjoy your great new images!

Tell me what you think in the Guestbook
Free Guestbooks by Bravenet.com