Introduction | Readings | Instruction | Assessment | Calendar

 

Module 3.1: Modifying Images with Picasa
Extended Learning Opportunity

Picasa logoPicasa is available for both PC and Mac. A product of Google, this freeware is excellent and can do a lot of useful things to photos and other images.

In the following tutorial you will learn several frequently used actions in preparing images for use on a web page. NOTE: these activities just scratch the surface of this very nice program.

Getting Started with Picasa

  1. movie buttonIn preparation for some guided practice, please go to this Graphics Resource Page and save all of the images there to your computer. View this short movie if you need a review of how this is done. Close the window to return to this page.
  2. Download Picasa if you haven't already done so and install it on your computer. As soon as Picasa becomes activated on your computer it will start to scan your hard drive for images. This may startle you at first as you wonder what's going on, but from now on you'll have every image on your computer catalogued and ready to use through Picasa. As you add more images, Picasa will add them to your Library.
  3. Start Picasa.
  4. Here's a tutorial from Atomic Learning that helps with Understanding the Library View.

Cropping an Image

Here are the steps in cropping an image (deleting unwanted portions of the image).

  1. Select the image from the Library (the column of folders on the left of the Picasa screen). Double-click to open it in the Workspace. NOTE: the image may not be viewable in its original size. In this case Picasa reduces it so that it is all visible in the workspace.
  2. A set of buttons now appears on the left. crop buttonBe sure you're on the tab called Basic Fixes. Click on the Crop button: You'll see that you have several preformatted options, such as 4 X 6, but we want to use Manual, so click on that.
  3. Move the cursor back to the image. Click in the upper left corner of the area you wish to keep. Drag the cursor toward the bottom right of the area and release. The "discard" area will now be shadowed. If you want to move the "saved" area to the left or right, click in the area and drag it to the new position. If you want to start over, click Cancel.
  4. When you have the crop area set exactly right, click Apply. If you like what you see, Save it. If not, look for the Undo Crop buttonmovie icon at the bottom of the buttons column.
  5. This video shows the Picasa starting screen -- your image Library -- and the steps involved in cropping an image.
  6. Try following these steps to crop beatrice.jpg as shown in the video.

Cropping - Guided Practice

  1. Return to Picasa and your cropped version of beatrice.jpg. Look above her photo to see this:

index of thumbnails

    This index of thumbnails allows you to move among the images in your folder quickly. You can also return to the Library for a list of folders. If you don't see all of the images in your thumbnail index, click on the left or right arrows to see more.
  1. Find the image called cardinal_seed-pack.jpg (packages of garden seeds) in the thumbnail index. Click on it to place it in the workspace.
  2. Follow the steps above to crop the image so that we only see the carrot seeds.

Does your cropping change the meaning of the photo?

Generally, cropping the photo should not change its movie iconoverall meaning. That's the visual equivalent of not quoting out of context. However (or "but") sometimes it's handy to be able to change the meaning of a photo completely. Watch this video for an illustration.

Reducing the Size of an Image

Cropping and resizing an image are the two most often needed operations as you move images to the Web. But you may not have noticed the name of this section: Reducing the Size of an Image. You will rarely get good results when you enlarge an image. Here's an example:

fife and drum small
fife and drum enlarged
The original image is 60 pixels wide and 84 pixels high -- just the right size for a thumbnail, but pretty small for an illustration. But if I enlarge even a little -- in this case to 120 by 168 -- it starts to get blurry. If I were to enlarge it to 500 pixels wide it would look terrible.

The lesson here: it is better to reduce than to enlarge.

Steps in Reducing an Image

  1. Open dont_forget_right.jpg. Look at the image data bar (located just below the workspace) to see the properties of the image. image data bar
    NOTE: You can find this same information by right-clicking on the image in the workspace and going to Properties, or by using Alt + Shift. We learn that the image is 720 wide by 376 pixels high and the file size is 81 kb. But we want to use this as a kind of icon, to point out some important data on the page, so it needs to be much smaller.
  2. picasa export buttonClick on the Export button at the bottom right of the Picasa window, illustrated on the right. This opens the Export to Folder dialog window, shown below.
  3. Use the Browse... button to navigate to your images folder and set it as the Location of exported folder...
export to folder dialog
  1. Next look at Image Size Options. This is where we tell Picasa what size we wish the new version to be. Notice the options in the illustration above. We can export with Use Original Size (this simply places a copy of the image in the exported folder) or we can Resize to:. Select Resize to:, then click on the slider, indicated by the red arrow. Move it to the left or right to make the image smaller or larger. You'll notice the dimension changing in the window to the left of the slider. If none of these pre-set sizes works for you, enter the exact size by double-clicking in the window and entering the desired dimension. You can then hit Enter or click on OK to export and save the reduce image. NOTE: This action creates a copy of the original photo in the reduce size. It does not movie iconreduce the original file.
  2. To help you select the right size for your needs, here's an illustration that compares various sizes of images.
  3. Review the steps above in this short video on resizing images with Picasa.

Improving the Light Levels of an Image

One of the neatest things about a digital image is that it can be edited to bring out its very best attributes. Look at the image called lunar_rover.jpg (it's already in your images folder if you downloaded the Graphics Resource Page as described above). Look at the lower right corner and notice that the astronaut there is in shadow. Let's return to Picasa and open the photo so we can fix that problem.

  1. Open lunar_rover.jpg in Picasa.Fill light button
  2. Now find the button called Fill Light.
    Notice that there is a slider, allowing you to set the level of fill light, which is to say, lighten the dark areas as though you were actually raising the light level in the photo.
  3. Click and slide to make the area of concern bright enough to see clearlyMovie icon but not so bright as to wash out the colors.
  4. Review the steps above in this short video on improving light levels of an image with Picasa.

Gettin' Ridda Redeye

This last process isn't the most important, explaining why it's last. However, you may decide to use Picasa with your personal photo collection, so the Redeye button might come in very handy -- and it's really easy to use.

  1. redyeye buttonMy grandson looks a bit devilish in the photo called red_eye_sippy_cup.jpg. We'll open the photo in Picasa and look for the Redeye button. The icon looks about the same in most image editing programs.
  2. Click and drag the arrow cursor across the eye, creating an area the same size as the red. Release the mouse button. Repeat as needed.movie button
  3. When you are done with your touch-ups, click on Apply to save or Cancel to undo.
  4. Check out this short video on removing redeye with Picasa.

Picasa is capable of a lot more -- even some artsy stuff. You'll use the tools described on this page the most, however.

Additional Picasa Tutorials

Picasa Image Editor Tutorial - This is a good general tutorial on using Picasa. It comes from the University of Hawaii.

Resizing Your Pictures Using Picasa - This tutorial from Louisiana Tech focuses specifically on resizing images with Picasa. Excellent!

Picasa Tutorials - Geeks on Tour (yes, that's actually the name of the site) offers you a variety of tutorials about managing your image files.

Getting Started with Picasa - LearningElectric.com offers a number of tutorials for Picasa on topics not covered on this page.

To get back to where you were, click here: BACK

  Introduction | Readings | Instruction | Assessment | Calendar
Return to top
© COPYRIGHT 2009 James Erbe All Rights Reserved.
Logo design by Carlo Vergara and Phillip Martin.
Last Updated: February 4, 2009 11:05 AM
http://www.uwstout.edu/soe/profdev/advwebdesign