Web Graphics Using Photoshop

Formats - Preparing - Resizing - Exporting - Compare

LESSON #2

 Step by Step -- Image Manipulation
In this section you will go step by step through the process of making your images the best they can be. When you are finished with this section you will have a large clean version of your image saved on your computer.

Step #1
Get Image
& Save It With
A New Name

 In this lesson, we could start out with a high resolution JPEG or a TIFF, which ever you have to work with. If you start out with a TIFF, the only difference is that you will be saving it as a TIFF throughout lesson #2.

But, since JPEG is most commonly used these days, let's start off with a JPEG image. I will provide it for you.

  • Click here and copy the image to your desktop.

The image is called 01_original. It is 1610 pixels wide by 1180 pixels tall at 180 resolution (pixels per inch). 

  • Open Photoshop.
  • Choose File>Open from the File drop-down menu. The finder will appear. Go to your image and choose it. The image will appear in Photoshop.
  • To make is easier to work, maximize Photoshop and click the Full Screen Mode (It is the center square on the bottom of the tool bar.

IMPORTANT: before you do any work on an image, you MUST save it with a new name.

  • Choose File>Save As, give the image a descriptive name and put it on your desktop. 
  • Call it primary_care_building_raw.
  • If it is a JPEG, keep it as a JPEG and choose the highest quality setting.

TIP: Notice, I did not abbreviate the words in the name. Other people may be using these images, so make it very clear what they are.

CAUTION: Don't just Save. You must use Save As, or you will be working on the original image.

IMPORTANT: Never put spaces in a file name.

Step #2
Put Image
In Proper
Orientation

 There's a problem. The image is turned 90 degrees clockwise. What do we do?
  • Choose Image>Rotate Canvas>90º CCW.

That looks better but the building looks like it is tipped to the left a little.

  • Choose Image>Rotate Canvas>Arbitrary, then from the dialog box type in 1º and choose ºCW.

Step #3
Cropping

 Much better, but now I have these white triangular edges.
  • From the tool bar, click and hold down on the top left tool until it presents other options. Choose the Crop tool. It looks like this:
  • With the crop tool, click and drag across the image starting in the upper left corner down to the bottom right.
  • With the crop handles, adjust each side until it is the way you want the image to crop.
  • Then double click anywhere in the middle of the crop area.

IMPORTANT:  Notice, we did not crop severely. We may have wanted to remove the red sign from the foreground, but DON'T. This is not the time to crop for the final image. Wait until all the image manipulation is done and you have saved a large clean version of the image.

WHY? Because, whenever you are reducing an image, whether you are cropping, resizing or changing the format, you are LOSING DIGITAL INFORMATION, information that you can't get back. Therefore, it is important to save a large clean version of the image. See Step 6.

Step #4
Adjust Colors
& Contrast

 OK, I've got the image I want but the colors and contrast look awful. Try this first.

Choose Image>Adjust>Auto Levels.

Wow, what a difference...

Nine times out of ten Auto Levels will fix the problem. When it doesn't, there are many tools under Image>Adjust that will help you fix color and contrast issues. But be careful. There is only one undo in Photoshop. Before messing around with the adjust functions, it might be a good idea to Save your work.

I'm not going to get into each of the image adjustment tools except for to list the most useful ones in order of importance.

  • Auto Levels
  • Brightness/Contrast
  • Curves
  • Color Balance
  • Hue/Saturation

The Curves adjustment can be another quick way to fix a poor image.

Step #5
Image Touchup

 OK, the color is fine, it is cropped just right, but there is this hairline in the sky or maybe it is a blemish on a person's face.
  • Choose the Rubber Stamp tool. It is the fourth one down on the left column in the tool bar.
  • While holding down the Alt key, click the curser next to the blemish in an area that looks similar to the area around the blemish.
  • Release the Alt key and click/drag on the blemish.

TIP: If the Rubber Stamp tool is making a mark that is too big, you can change the Brush Size. Window>Show Brushes.

There are lots of other tools that you could learn in Photoshop but the ones you just learned are all you need to crop and touchup digital images. If there is still a problem with the image, you probably need to re-shoot the image.

Step #6
Save As Large
Clean
Version

 Now we are ready to save. We haven't done anything that can loose important digital information. We haven't:
  • Cropped severely
  • Resized
  • Or changed the format of the image

This is the version we want to start with, each time we want to prepare an image for the web, or for that matter, for the press.

So save this image and give it a name that identifies that it is the large, clean version. I usually attach "_full" to the image title. You can do whatever makes sense to you.