In this tutorial, you will use Photoshop Elements to: When finished, this image  will look like this, (though bigger)

Special thanks to Gary Sturgeon  for permission to use his great aerial shot of Bermuda!

Photoshop Elements Basics

For all of the work in this tutorial, you will want to use the "Aerial Bermuda" photo. Click here to download that image.

If you are brand new to the program, you may want to print our handy guide which labels all of the tools and palettes in the program. If you want to view it online, look here.
 
 


 

Open and Crop the "Aerial Bermuda" Image

Open Aerial Bermuda Image:

If you need to download this file, click here. You can open an image two ways:

  1. When you first open the program, you will have a dialog box that asks if you want to create a new image, or open another, among other options. Click 'Open" then find the image where you saved it on your hard drive. 
      2.  -- or --
  2. If your program is already open, select "File" from the menu at the top of the screen, select "Open", and find the image on your hard drive.

 

Crop your image: Screen shot - screen shot crop
We want to eventually make a map of this image, but we don't need the picture of the plane engine in the image. We are going to use the crop tool to crop that out of the image.

  1. Select the crop tool in the tool palette.
  2. Draw a box with your cursor over the part of the image you want to keep. You will see crop 'handles' around the good part, and the rest will be blacked out.  If you want to change the selection, grab one of the crop 'handles' and drag.
  3. When the crop selection is what you wanted,  hit "enter" on your keyboard.

 

Correct the Color Using Recipes

Photoshop Elements offers "recipes" - step by step instructions for popular procedures. Because this image was taken from a plane, the color is a bit off. There are several ways to correct color in Photoshop Elements or Photoshop, we're going to let the recipes guide us. Screen shot - screen shot adjust color
  1. At the top menu on the screen, click on the "Recipes" tab.
  2. In the pop up menu (it says "Select a Recipe") choose, "Color Correction".
  3. Select the "Adjust Brightness and Contrast" recipe.
  4. Follow the three steps to adjust the brightness and contrast.
    1. Choose "Enhance" > "Brightness/Contrast" > "Brightness/Contrast".
    2. Drag the Brightness and Contrast sliders to the desired settings.  Drag the Brightness slider to the left to decrease the level of brightness: drag to the right to increase it. Drag the Contrast slider to the left to decrease the level of contrast: drag to the right to increase it.  The text box to the right of each slider displays the brightness or contrast value.  Make sure that the Preview check box is selected to view the changes as you drag the sliders.
    3. When you are done, click "OK".

 
 
 

Re-size the Image to Use on a Web Page

The aerial bermuda image is a little big for a typical web site. How do we know that? By looking at the size of the image in pixels. When we measure a piece of paper, we use inches or centimeter. When we measure monitor size (also called resolution), we use little squares called pixels. Here's the tricky part: monitors are all different sizes: some are 800 by 600 pixels, others may be 1024 x 768 pixels. When we need to decide how big to make an image for a web page, if it looks good on smaller monitors (800x600) it will also look good on the larger ones. So , let's think of our monitor as 800 pixels wide by 600 pixels tall. Look at the image on the right. If you want an image to be the size of the black box (A little less than half of the web page...) what size would you want it to be? You can estimate: "if a screen is 800 pixels wide, and I want my image to be half of that, it will a little less than 400 pixels wide".
 
 

Our image is wide, but not very tall. We want it to be big, but not take over the whole screen.

  1. To adjust the size of an image (or find out how big it is) Go to the menu at the top of the screen and select "Image" -> "Re-size" -> "Image Size..."
  2. Notice the width of the image is 800 pixels and height is  350 pixels. (You may be looking at the size in percent, instead of pixels... if so, click on the pop up menu, and select in "pixels"). Ignore the "Document Size" for now, that is helpful for printing your images.
  3. A normal computer monitor is 800 pixels wide by 600 pixels tall. We want our image to fill the screen, but not so big it takes over the whole window. Let's make it about 600 pixels wide.
  4. Make sure the "Constrain Proportions" box is checked. Change the size of the image to be 600 pixels wide. Notice the height automatically changes to match. This way, your image won't get stretched. (Thanks to that constrain proportions box...).
  5. Click OK. Notice that the image is smaller. Remember, you can still use the magnifying tool to zoom in and look closer if you want to.









Save the Image to use on a Web Page

We're going to save the image twice... once for use in future tutorials, and once for the web. What is the difference? Web pages need images saved to a specific format: jpeg or gif. 

For future Photoshop work, you will want it as a Photoshop file:

  1. First, save it as a Photoshop file for use in the next tutorial.  From the menu, select "File" -> "Save As". 
  2. In the dialog box, rename it "cropped_bermuda".
  3. Change the Format to  "Photoshop (*.PSD,*.PDD)".
  4. Click "Save".
Now, save it for the web: screen shot save for web.
  1. From the Menu, select "File" -> "Save for Web".
  2. Elements does a wonderful thing. It shows you the original image (on the top)  and what it will look like compressed for the web. Compression makes the file download faster, but it is is a trade off... some of the image quality gets lost. GIF and JPEG formats work in slightly different ways. Generally, JPEG is better for photos. Play with the settings on the right, until you are happy. We used JPEG Maximum.
  3. You can leave the name the same. You should have two files: one named "cropped_bermuda.PSD" and one named "cropped_bermuda.jpg". The "cropped_bermuda.PSD" image is a higher quality image, but the "cropped_bermuda.jpg" image can go on a web page.


You are good to go! You might want to continue with this image in the next tutorial. If you have some extra time, explore the Extension activities below to learn more.
 

  • Image size v. file size: these words are used a lot. Generally, image size is the physical width and height measurement of the image. File size is the memory size, or how much space it takes to be stored on your hard drive or disk. When your image size is smaller, there is less data to keep track of, so the file size is smaller as well.
  • Image size can be a tricky thing to understand. If you are really interested in learning more, look at the tutorial on Resolution. Also, try changing the image size to be bigger or smaller, save for web, then open in a web browser. You can get a feel of how big a 250 pixel wide image is versus an image that is 100 pixels wide.
  • When saving for the web, experiment with file format settings. Try saving as a GIF 32  no dither... what happens? How do the other settings change the image.
    		•