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 CSClick 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)
Turning on the Rulers

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).

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

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


Double click the 25% and type 100 and press enter. What happened

Move your mouse pointer over the lower right-hand corner of the image until the resize pointer

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.
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



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.

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.



Further Correcting Tone with 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





Finally, you can drag the gray slider (midtones) in the middle


Adjusting the Brightness and Contrast


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.
0 comments:
Post a Comment