Basic Photo Editing Techniques in Photoshop

This Photoshop CS tutorial will include some basic photo editing techniques including: Curves, Levels, and Brightness and Contrast Adjustment Layers, resizing images, and optimizing images for the web. This tutorial was written for the students in the Contra Costa ROP Web Page Design class.

Downloading the Files

When you want to use scanned images or images from a digital camera on a web page you will usually need to resize them. Most scanned and digital camera images are too large to place on a web page. For this tutorial we will use a 2272 x 1704 image from my 4 megapixel Canon G2 digital camera.

Right click this link and select Save Target As. In the Save As dialog box click the Save in drop down list and select drive F:\ (if you are not in class, use C:\My Documents or another folder). Keep the existing file name, IMG_5759.JPG, and make sure that the Save as type is set to JPEG and click Save.

Starting Photoshop and Opening the Image

Open Photoshop by clicking Start > All Programs > Web Design > Adobe Photoshop CS

Click File > Open. In the Open dialog box click the Look in drop down arrow and select drive F:\ or navigate to the folder where you saved IMG_5759.JPG.

Double click IMG_5759.JPG to open the file. If you get an Embedded Profile Mismatch error, click OK.

Saving the File with a New File Name

Before we begin to modify this image I recommend that you re-save the file with a new name. You always want to keep your original higher resolution image intact in case you want to print it at a later date. I would also recommend that you save this image in Photoshop's Native File Format which is PSD. Saving the file as a PSD file will make editing the file at a later date much easier. Click File > Save As. In the Save As dialog box change the Format to Photoshop (*.PSD, *.PDD) and click Save.

Turning on the Rulers

Rulers On In Photoshop I always work with my Rulers turned on. Rulers enable you to quickly see the image size and they allow you to place and measure various objects in your image. To turn on the Rulers click View > Rulers. By displaying the rulers you will be able to see the approximate size of the image. The default unit of measurement in Photoshop is inches. Since we measure web elements with pixels you should change the default setting. Click Edit > Preferences > Units and Rulers. Change the Units for Rulers from Inches to Pixels if necessary.

Working with the Image Size Box

Pixel Dimensions are used to adjust the on-screen image size.

Document size is used to adjust the size of the printed image. The document size settings only effect the printed image; the screen size will not change.

You can see the exact size of the image by clicking Image > Image Size. The current image is 2272 pixels wide and 1704 pixels high. This image is too large to be displayed nicely on a web page. Most people surf with a resolution of either 800 (width) x 600 (height) or 1024 x 768. If we keep the current image dimensions the average web visitor would have to scroll quite a bit to see the entire image. Click here to see an example.

We can resize this image in the Image Size dialog box. Notice that the current resolution of the image is 180. A quick way to downsize the image is by adjusting the resolution. For images that are only going to be viewed on the screen we can reduce the resolution to 72. Change the Resolution setting to 72 and press the tab key (do not press Ok or the Enter key we want to continue to work in this dialog box).

Pixel Dimensions after reducing the resolution to 72 When you reduce the image resolution to 72, your image will also downsize. Take a look at the new Pixel Dimensions they should now be approximately 909 x 682. Notice that the file size has also reduced from 11.1 M to 1.77M. In one quick step you have reduced the image dimensions by more than half. You can learn more about the way that Photoshop handles resampling and resizing at About.com and Scantips also has some good information on resampling. For a detailed discussion on resampling methods (nearest neighbor, bilinear, bicubic) read making the most of image resolution through resampling.

Note: You do not have to change the resolution of the image. I simply wanted to demonstrate what happens to an image when the resolution is adjusted. Instead, you can use the following steps.

The image's pixel dimensions are still too large. Remember that many people surf the web at an 800 x 600 resolution. If we keep the width at 909 people surfing at 800 x 600 would still have to scroll to the right to see the entire image. To resize the image even further we will adjust the dimensions of the image.

Before we proceed, make sure that Constrain Proportions is checked in the Image Size dialog box. By checking this option you can adjust just the width setting and Photoshop will adjust the height automatically or visa versa; you can adjust the height and Photoshop will automatically adjust width.

To further resize the image we will change the width setting to 480 pixels. In the Width box type 480 and press the tab key. The height should automatically resize to 360. I resized the width because it was the larger of the two and I wanted to be sure to get that to an acceptable size. To complete the process, click OK.

Adjusting the Zoom

Small Flower Image at 25% When the image displays it will be much smaller (see image to the left). This is not the actual size of the image. Photoshop is displaying this image at a reduced magnification; it is only 25% of its actually size. If you look at the Photoshop status bar, in the lower left-hand corner of the screen, just above the Start button, you will see the magnification setting at 25% .

Double click the 25% and type 100 and press enter. What happened Adjusted Magnification to the image?! The image to the right is what my image now looks like. We need to resize the image so that the contents display.

Move your mouse pointer over the lower right-hand corner of the image until the resize pointer displays. Hold down your left mouse button, drag the edge of the image down and to the right about four inches, and release the mouse button. Alternatively you can select View > Fit on Screen View > Actual Pixels.

Basic Image Correction

All images that come from a digital camera or scanner will require some basic image editing. Here I will outline some of the corrections that I make to each image that I display on my photography blog.

Layers Panel

Before we begin let me briefly explain the Layers panel. This panel is usually located in the lower right-hand corner of the Photoshop screen. If you do not see the Layers panel, click Window > Layers or press F7.

The Layers panel is used to make adjustments to images and to store drawing objects, images, and to apply effects. Currently we only have one layer in our Layers panel called Background and it contains our flower picture. By the time we are done with this tutorial we will have several layers.

At the bottom of the Layers panel there is a series of icons . These icons are used to apply effects, add new layers, add layer folders, and to delete layers.

Adjustment Layer Menu For this tutorial we will concentrate on the Create New Fill or Adjustment Layer icon (I will call this the Adjustment Layer icon for the remainder of the tutorial). This tool will allow us to add Adjustment Layers that correct image imperfections. When you click the Adjustment Layer icon a menu will appear with a variety of image correction tools.

Correcting the Color and Tone of the Image with Curves

The first correction that I make to my images is to adjust the Curves. Curves are used to make fine tonal and color adjustments to an image. For this tutorial we will only use the automatic curve correction, but you can use curves to make very fine color and tonal corrections. I will give resources for learning more about curves at the end of this lesson.

Curves Adjustment Layer Dialog Box Click the New Adjustment Layer icon at the bottom of the Layers panel and select Curves from the menu.

The Curves dialog box will appear. If the curves dialog box is covering your image, hold down your left mouse button on the title bar (blue bar with the file name) and drag the Curves dialog box until you can see your image.

Click the Auto button and you should see a slight change in the overall tone of your image. The sky should appear a somewhat richer blue and the shadows of the image should be more apparent. Click OK.

Again, we are barely scratching the surface of the power of curves. For a more detailed example of Curves adjustment visit ePasture.com.

Curves Layer If you look at the Layers Panel now you should see a new layer called Curves. You can edit the Curve settings by double clicking the curve icon . You can also turn off the visibility of this layer by clicking the eye .

Further Correcting Tone with Levels

Next we will add a Levels Adjustment Layer. Click the Adjustment Layers icon and select Levels.

The Levels dialog box appears. The middle section of the dialog box contains what is called a histogram. The histogram graphically shows the distribution of pixels in the image. For additional information on histograms, visit Earthbound. You will need to adjust the Input levels (indicated by the yellow and red boxes on the image to the right). The black slider (shadows) will adjust the darkest pixels in the image. Drag the black slider to the right so that it is just to the left of the first group of pixels (to the yellow x). Your image should appear darker. Now drag the white slider (highlights) to the left so that it is just to the right of the last of the pixels (to the red x).

Finally, you can drag the gray slider (midtones) in the middle to make final tonal adjustments to suit your taste.

Levels Adjustment Layer After you are done making your adjustments, click OK. Notice that another new layer has been added to the Layers Panel. See image to the right. For a more detailed description of Levels, read the 1-2-3 of Photoshop Levels.

Adjusting the Brightness and Contrast

Brightness and Contrast I find that most images from a digital camera need a boost to the contrast. We will add another adjustment layer to accomplish this task. Click the Adjustment layers icon and select Brightness/Contrast. Drag the contrast slider to the right until the contrast suits your liking. You can use the Brightness slider to brighten the image. The settings that I used are to the left. When you are happy with your image, click OK.

Sharpening the Image

All digital camera images need a little sharpening, they tend to be a bit soft. The Unsharp Mask is the preferred tool to sharpen images.

The Unsharp Mask is applied to the layer that is selected in the layers panel. Click the background layer on the Layers panel.

From the Photoshop menu, click Filter > Sharpen > Unsharp Mask. There are three settings in the Unsharp Mask, Amount, Radius, and Threshold. Amount sets how much sharpening will be applied to the photo. Radius determines how many pixels will be sharpened, and Threshold adjusts the intensity of the sharpening. You can use the settings that I used in the image to the right and click OK. I would recommend that you experiment with different settings. I adjust the settings depending on the image I am working with. A common setting that I use is Amount-85%, Radius-1px, Threshold-4.

Your image should appear crisper.

I would recommend that you apply the corrections in the order I presented here: Curves, levels, Brightness and Contrast, and Unsharp Mask.

Save for Web

The final step is to save this image for the web. From the File menu click Save for Web.

Due to the large file size of the Save for Web screen capture the instructions are on a separate page, Click here to go to the Save for Web Instructions.

Final Notes

This tutorial covers very basic Photoshop image editing techniques. I would recommend that you read Scott Kelby's Photoshop CS for Digital Photographers (available in the classroom) or at Amazon for more advanced photo editing techniques.

Here are some additional images that you can practice with:

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.