In addition to reviewing the Photoshop Tool Bar and Palettes, the skill development activities in this section include:

Opening Images in Photoshop

Cropping Images

Resizing Images

Creating Thumbnail Images

Adding Layers to Images

Adding Text to Images

Color Manipulations

Flattening and Saving Images

The Tool Bar is where you will select the tool you wish to use to make image manipulations. We will use several of the different tools in the skill development activities below.

Now that we know a little bit about the basics, let's open an image and make some changes.

Go to the File Menu and select Open. The following window will appear and you will need to navigate to find where you have saved your image. For this example, I am opening an image that is saved on a ZIP disk. To locate an image stored on your hard drive, simply click the arrow in the window next to the word "ZIP" and select your hard drive. As you can see in this example, there are several files listed. To open an image, select the image you want to open and click Open.

The first manipulation we are going to make is to crop the image. This means we are going to select a specific portion of the image and cut out the rest. The portion inside of the selection area will be retained and the portion outside of the selection area will be removed. There are two ways to crop an image. You can use the marquee tool or the crop tool.

Using the Marquee tool to crop an image:

Step 1

First select the rectangle marquee tool.

You will notice that when you place your cursor on the image cross hairs appear.

Step 2

Click the mouse and hold down while dragging the cursor over the area of the image that you want to retain. Once you have the area selected release the mouse. The image will display the selection area.

Step 3

Go to the Image menu and select Crop. The image will now consist of the area you selected.

Using the Crop tool to crop an image:

Step 1

Select the Crop tool.

Step 2

Place the cursor on the image, click the mouse and hold down while dragging the cursor over the area you wish to retain. One advantage of using the crop tool is that you can adjust the selection area.

Step 3

Go to the Image menu and select Crop.

Resizing an Image:

Step 1

Go to the Image menu and select Image Size

Step 2

Type in the desired width and height values. To retain the original proportions, make sure the Constrain Proportions box is checked. Notice that when you change the width values the height value automatically changes to keep the original proportions.

Step 3

Once you have entered the desired values, click OK. The resized image will now be displayed.

Step 4

Go to File then Save As. Give the resized image a different name than the original. When you create a thumbnail, you will need both images (the larger one and the smaller resized one).Make sure you save the image as a JPEG format.

Step 1

Follow the steps above to resize your image. You should now have two images with different names (a large image and a small image).

Step 2

Open Dreamweaver and insert the thumbnail (the small image) into a table by selecting the Image menu and clicking Insert. Click here for detailed help on Inserting Images.

Step 3

Once the image is inserted, click on the image so that it is active. When the image is active, the Source field "Src" should contain the name of your thumbnail image.

Step 4

In the link field of the Properties palette, select the larger image by clicking the folder to the right of the field and selecting the name of larger image file. You may need to navigate to locate the image. The Link field should contain the name of the larger image.

Step 5

You have now linked the larger image to the thumbnail. When you view your webpage in a browser and click on the thumbnail, it will display the larger image. Try it by clicking on the thumbnail below.

To add a new layer, click on the layer icon located at the bottom of the layers palette.

Step 1

Let's rename our new layer "Text" to indicate that the layer will contain text.

Step 2

Make sure that the text layer is the active layer by selecting it.

Step 3

Select the text tool.

Step 4

Click on the image to activate. The following text box will appear.

Step 5

Type in your text and click OK.

Step 6

To position the text, select the move tool and drag your text to the desired location.

Since the text is on a separate layer you can manipulate it without affecting the image of the lighthouse.

Step 1

Select the part of the image you wish to change. There are different ways to select parts of the image. For this skill development activity the magic wand tool was used.

Select the magic wand tool and click the part of the image you want to change.

Step 2

Select the paint bucket tool.

Step 3

Go to the color palette and select the color you want to use. Notice when you pick the color the eye dropper tool appears.

Step 4

Place the paint bucket tool over the selected area and click to change the color.

Step 5

The area will now display the new color. To deselect the area go to the Select menu and choose None.

To select more difficult areas on the image, use the lasso tool.

Trace along the edges of your selection making sure to close the selection.

To use the image on the Web, you will need to save the image as a JPEG. This will require you to flatten the image. Note that once you flatten the image, the individual layers will no longer be available. All of the layers will be flattened into one layer. This will prevent you from manipulating any of the data. For example you will no longer be able to move the text around.

Step 1

Go to the Layer menu and select Flatten Image.

Step 2

Go to File, Save As and save the image as a JPEG Format.