Integrating Technology in the Foreign Language Classroom

Images do not always come exactly as you wish to use them.  You may need to do some cropping, adjust their colors or luminosity (brightness), change their size (resolution), or modify their content (delete an ex-husband).  For this lesson, you will download the images on this page and follow the directions to change them using Photoshop CE or Photoshop Elements (a good buy on an academic discount) or any of the many image editing tools available.  You could also try GIMP, PhotoPlus, Paint.NET, Corel: Paint Shop Pro or other image editors for PC or for the Mac; for instance BME by SoftLogic for Macintosh or other Mac shareware.  In fact, there are many programs available, and one is usually included with the purchase of any scanner or digital camera.

Our directions will apply to Photoshop under Windows XP - for other software you will have to make some minor adjustments, but the basic functions are always the same. We will be producing final images in JPG format as these are best for compressed photos with many colors and smooth transitions.  Photoshop's own format PSD is the best for working copies to avoid losing quality over multiple saves, though, of course, PSD files are quite large and do not work on the web. JPGs compress well, but the compression is "lossy" - some image quality is lost with each save - though at the highest quality setting, very little is lost.  You should use compression until all of your editing is done and your final version of the photo is ready.
n.b. Always use your image editor to adjust image size; never adjust image size in your www page editor (though it is possible to do this, it is very inefficient and tends to result in poor image quality).

To begin, check to make sure that your video display screen is adequate.  Right click on the desktop and select properties.  Click on the settings tab and  make sure that the color palette is set higher than 256 colors  (we prefer True color 32 bit [but 16 bit color is ok] and at least 800 x 600 desktop area - though on a big monitor higher resolutions will work).  Click OK when you are satisfied - this may restart your computer under some older operating systems.  Keep this Web page open, and open Photoshop (or whatever image editor you are using) as well.  You will be able to switch back and forth between the Web browser and Photoshop to follow the directions while you complete the tasks.  If you prefer, you can print out the directions and work from paper.

Cropping

  

First, decide where you will be working, which folder on your hard drive.  For example, create a folder called "photos" in a place where you will be sure to find it, possibly in your My Documents folder or on your Desktop.  Download the photo of the church, "ph-church.jpg" into your "photos" folder (right-click on the image and save the image, taking care to navigate to the correct folder), and open it in Photoshop or other image editor. Remember that if you are using another program, the commands to accomplish these edits may vary.   We want to crop the image to get rid of the car, the pigeon, and the empty sky. Then we will make it smaller to fit our needs.

Once ph-church.jpg has been opened in your image editor, check to make sure that it is being displayed at 100% of its full size so you know exactly what you are looking at (Photoshop will display images at smaller resolutions to make them fit on the screen).  Look at the title bar of the ph-church.jpg window within Photoshop.  It should say 100% or 1:1.  If not, you can use the Zoom tool  to change the way the image is displayed.  When the zoom tool is selected, clicking on the image will increase its display size.  Hold the Alt key down and click to reduce the image display size.  This does not really change the actual or real size of the image, just its appearance on the screen. Don't confuse zooming with changing the actual image size. The key idea here is that unless you are at 100%, what you see is NOT what you get. Sometimes it is useful to zoom in or blow up an image while working on it, but always make sure you are aware of the zoom setting to avoid surprises.

Next click on the Marquee tool button  to select a rectangular area of the image. There are lots of different selection tools, but Marquee is probably the one you will use most often. When an area of the image is selected, effects will apply only to that area. To select the area, look at the image and imagine the rectangle within it that you wish to save as your final image.  In this case, the top should be a bit higher than the top of the church and the bottom should be a bit higher than the hood of the car.  The sides should come close to the edges of the original photo. Point your cursor at one corner of your imagined rectangle. Next, click and hold with the marquee tool on that corner, then drag the cursor to the opposite corner to select the area that you want.  When you are satisfied with the selection, choose the Image / Crop menu item to finish cropping the photo. 



Sometimes it is easier to see where you want the center of an image to be, rather than the corners. Hold down on the Alt key while you click and drag the Marquee tool from the center out to a corner instead of from corner to corner. Much more can be done with the marquee tool, but that is enough for now.

Save your work, and remember to save it often.  You may wish to keep an archived copy of your original photograph in case you some day need to go back to reprocess the image for some reason.  If you are not certain about where your image will be saved or which image format will be used, select File / Save As... and check the location and also make sure that you have selected JPG. (JPG tends to be good for photographic images.) For serious work in Photoshop with no loss of image quality or to save photos with multiple layers or masks or other special Photoshop tools, you should use Photoshop's native format (PSD) for your working copies. Another option that can help avoid loss of quality may be to use JPG but at the highest quality setting for working copies, then use more compression for your final version.

Finally, choose the Image / Image Size... menu item (Image / Resize / Image Size... in Elements) to reduce the size of the image.  Check that the constrain proportions box is checked so the proportions of the photo will be respected (This is the default setting). If you only change the width or the height, the photo will become distorted like the mirrors in a fun house.  There are two ways to proceed.  If the current resolution of the photo is 72, you can reduce the width and height by half (making the image 1/4 its current size or area) by changing the resolution to 36.  You could also change either the width or the height by a percentage or by specifying the target size as a number of pixels.  The other dimension will automatically change in the same proportion. Using pixels instead of percent can allow you to make all of a group of images the same exact height or width so they line up nicely on your web page or so that they present a consistent impression of size as an element of your web page style.

To preserve image quality, avoid making repeated changes.  If you are not satisfied with the results of the change and need to modify the image size more than once, use the Edit / Undo menu item to restore the original image before making the new change, use the History tab to undo multiple edits or just close the image without saving and start again.  Something is lost in any manipulation, so make as few changes in as few steps as are necessary.
 

Save your work and close the ph-church.jpg image, but not the Photoshop program. When working on your own images, it may be a good idea to save your work under a new name so you can always go back to your original raw image in case you change your mind about what looks best. Also note that at some point in the future you might discover that you need a higher resolution version of your image for some other purpose, so it may be a good idea to save a high res backup copy for posterity while you can.

Cutting out pieces

  

Next we will open the ph-diet.jpg image to cut a sign out for use in a new file. Download and open the photo. Because this file will be very small and the boxes and signs contain few colors, we will convert it to the GIF file format for our final copy. GIF is also the format to use for transparent backgrounds, so it is useful to know something about it. Click on the Lasso tool button  to select the outline of something in an image. We will begin with the green sign that says "cocolmeca para quemar la grasa." When doing careful work with small parts of images requiring good small muscle coordination, it is far easier to first zoom in on the part of the image you are working with. The more you zoom in, the easier it is to lasso the piece that you want. Point the lasso tool on one corner of the sign.  Hold down on the mouse button while you drag along the sign around the other three corners.  When you have completed the circuit, release the mouse button.  The dotted path around the sign will be closed and the sign will be selected.  Using the lasso tool wasn't too easy, but it lets us select irregular outlines that the marquee tool cannot capture. Masks are another way to do this, but that is beyond the scope of this tutorial.

 

Because the edges of the sign are straight lines, there is an easier way to do this.  Point to the first corner again, but this time hold the ALT key down at all times.  Click on the corner and release the mouse clicker (however, keep holding down the ALT key).  Click the mouse pointer on the next corner, forming a dotted line between the first point and the next point along the edge of the sign.  Click on the next corner, still holding down the ALT key.  You can continue clicking around the edges until you get back to your first point.  When you release the ALT key, the sign will be selected.  To make a new image containing just the sign, first copy the selected image to the clipboard: choose the menu item Edit / Copy or press Ctrl-c.  Next create a new image window by choosing the File / New... menu item.  The new window will be the size of the selection in the clipboard.  Make sure that the new window is active, then paste the clipboard contents into it by choosing Edit / Paste or pressing Ctrl-v.  Try saving your new image as GIF file (for simple images with few colors, the GIF format sometimes makes smaller files than JPG). In some programs, you may first need to change the mode from RGB Color (with millions of possible colors for each pixel) to Indexed Color (with no more than 256 possible colors for each pixel) using the Image / Mode menu item.  If your image has more than one layer, this will flatten layers (as will the Layers / Flatten Layers menu), leaving everything in just one layer. Layers can be very useful, but layers are also beyond the scope of this tutorial. In some programs that use layers, you might need to flatten layers before changing the image mode. The default options for an indexed color image (adaptive palette, 8 bits/ pixel, diffusion dithering) are fine for now. Finally, choose File / Save As..., change the file type to GIF, and rename the file before you save it. Some programs might use a File / Export feature to do the same thing. Remember GIF = few colors, cartoon-like; JPG = many colors, photograph-like. GIF can also produce transparent backgrounds or animated images, but that's for later.

Sometimes an image may be too light or too dark for our needs.  Ideally a photo should make use of the entire range of luminosity or brightness from black to white. This is also true in conventional photography. If an area of a photo is too light or too dark, it means that part of the contrast range is squeezed into too narrow a band.  There are several ways to illustrate this and to modify the way the image output will appear.  We will try to lighten the sidewalk in the ph-door.jpg image at the right.  First save a local copy and load it into Photoshop.

Choose the Image / Adjust / Levels... menu item (Enhance / Brightness-contrast / Levels in Elements) to work with the histogram for the image. A histogram is a graphical representation of the distribution of colors by order of brightness from black to white. The dark part of the image is mostly in the leftmost peak on the graph.  The input levels are the values that will be displayed as black (0 - the black triangle), white (255 - the white triangle), and the midpoint between them (1.00 - the gray triangle).  To change these values we will slide the triangles by dragging them with the mouse. Note that there is a second histogram under Image in Elements, but this only shows you the histogram - it doesn't allow you to change it.

First grab the black triangle and slide it to the right, lining it up with the beginning of the leftmost peak, changing the input level from 0 to 16.  Next grab the gray triangle and slide it to the left until the midpoint input level more evenly balances the light and dark areas.  This effectively spreads out the darkest colors, increasing the contrast in that region of the image.  The actual values used will depend on the adjustments needed to make any particular image look best.  Save the image with a new name (ph-door1.jpg).

One problem we encounter when making these brightness adjustments is that the changes affect the entire image, even if only a part of the photo has a problem. This is even more true when using the simpler brightness and contrast adjustments. To avoid this problem, we will select only the dark area of the photo in our next attempt to improve the brightness.  Selecting the dark area using the marquee tool or the lasso tool would be difficult because the area is not a simple shape.
  

We will make our selection using the Magic Wand  tool instead.  Click on the magic wand and look for the Tolerance option at the top of the window. Set the tolerance to 40.  Why 40?  Because the tolerance adjusts the sensitivity of the selection, and I experimented to find a value that seems to work for me for this task This is something that you may have to experiment with for each different magic wand selection, depending on the area of the image that you are selecting.


  

When you click the magic wand on the sidewalk, it will select that point and all adjacent points that are within the tolerance limits.  That means that it will select an area of similar color and brightness.  Your selection should look something like the picture at the right. Results are likely to be best if you can manage to select large uniform areas having similar exposures. It is also possible to modify the size of the selection using Alt to subtract an area from the selection or Shift to add an area to the selection. Now you can use the Image / Adjustments / Levels or even the Image / Adjustments / Auto-Levels menu item (Enhance / Brightness-contrast / Levels and Enhance / Auto Levels in Elements) to make adjustments only to the selected area.  Save your work under a new name. Many other adjustments found under Image, Filter and Enhance (in Elements) can be quite useful. If your manipulations make an image begin to appear faded, you can enhance the Contrast. If the colors are washed out, you can enhance the Saturation. If the colors look odd, the Auto-color function might help. If you know just what color correction you need and have a good eye for color, the Variations function gives you precise control over color changes.

Cloning

Sometimes there are things in a photo that you wish were not there.  The ads in the picture below attract attention away from the two women who are the real subject.



We can edit a photo in many ways, but to make it look natural, we will change the image by cloning from other parts of the photo using the Clone or Rubber Stamp tool. Cloning in photographs is not illegal   There are several steps to using this tool.  First decide what you want to remove or create and which part of the image you can copy over the part you do not want.  In this case we will take the white part of the wall as our point of origin to cover the ads.
  

First use the Zoom tool to zoom in on the area where you will be working  If it looks ok up close, it will look great when you zoom out.  Next select the Clone or Rubber Stamp tool.  Point to a white area that you want to clone, hold the ALT key and click once. This sets the origin from which you will duplicate.  Look at the clone brushes, pick one that's not too big and not too little, preferably a "fuzzy" brush where you wish to avoid sharp lines.  Make sure that the Rubber Stamp Opacity Options are set to 100% so the new image will completely hide the old image.  Now slowly cover the ads with white from the wall.  You will have to reset the point of origin several times as you do this to cover a large enough area.  Avoid covering over anything that you don't have to.  The more original material you leave, the better the finished product will look.  The farther the point of origin is from the cloning area, the harder it will be to see repeated patterns. (That's the psychology of perception.) If you make mistakes, use the Edit / Undo menu item to undo them or use your History window.  You might even get fancy and try to copy the brick wall, but watch out for those lines and the perspective .  If you end up with any bad looking transitions between old and new material, the smudge tool can help you smooth over the problem area. Save your work.

Putting it all together

  

Can you use all of the techniques to fix this image?  Crop it to get rid of the boy in the red pants on the left, the elbow on the right, and some of the ground in front.  Put the woman wearing a purple dress in a new image by herself. - Select, copy, File/New, paste. Use the rubber stamp to remove the little boy in the shadows to the right, the woman in the purple dress, and the shadow on the ground in front of the children.  Finally adjust the exposure as you see fit.


 

Can you find a way to use the magic want tool to combine the exterior from one photo with the interior from the other?  You may want to explore possibilities of the Select menu.

The more you know about Photoshop, the more you can do. But it is a big and complex program, so don't try to learn too much too quickly. Play around with various tools. Use web searches to find tutorials about how other people have done what you are trying to do. Change colors, remove red-eye, get rid of that tourist who walked into your photo just as you snapped the picture. And practice, practice, practice.

For more information

Adobe Photoshop Tips & Tricks
Adobe Photoshop Elements Techniques
Photoshop Tutorials / Tips & Tricks
Website2Go UserGuide: Image Editing Tutorial
Beginner's Guide to the Digital Camera
Microsoft Digital Imaging - MS has a great guide, well, maybe not "great"....
A Guide to Touching Up Your Digital Photos
CCV Software - a source for software at academic discounts