Photoshop Guidelines: Basics of Edit Images Using Photoshop By Masood Shah

Opening image in Photoshop

1. Open the Photoshop program. Usually the defaults are set so that when Photoshop opens, it also opens a variety of palettes that you will use in editing pictures.
2. Go up to the File menu --> select Open. This will being up a dialog box asking you to locate the image you want to open.
3. Navigate to the location of the image on your hard drive (or zip/floppy disk) and then click on the Open button. This will open the image and display it in on your screen.

Saving the image

Save As Original

Before you begin doing any editing of your image (especially if it is a photograph), it is very important for you to save it first as a Photoshop document (rather than as the form that it is currently in, usually a JPEG or GIF). The reason for this is to preserve an original, high quality original copy. If you edit it and don't keep a copy of it in its original, high quality form, you can never re-create this quality. To do this:

1. Go to the File menu
2. Choose Save As
3. In the dialog box that appears, click on the arrow next to format. A list of items will appear (a drop down list). Select Photoshop.
   • Name the image something.psd, where "something" is the name you choose for the image. This should be one word, no spaces, followed by .psd (the ".psd" extension tells you that it is a PhotoShop Document). Depending on the type of computer or version of Photoshop, the extension may be inserted automatically, so you may not need to type it in yourself.
4. Choose the location where you would like to save the image (e.g. If you are saving the image to use on your web page, save it into the folder where you have your web page. I recommend creating an images folder (directory) inside your web folder and saving all the photos you have on your web pages in this folder.
5. Once you are sure you are saving the photo to the desired location, it is in the format you have chose (in this case, a Photoshop or .psd format), and you have given it a name, click on the OK button (see below for suggestions on how to name images).

Saving in other formats

Once you have saved a copy of your original image as a Photoshop document, you can then go ahead an edit the image and re-save it in other formats. (To learn more about which format to choose and what the differences mean, check out the UMD ITSS: Graphics on the Web page). See also "Changing the size of the image" below -- this describes how to resize and save for the web.

Saving as JPEG

If you save the image as a JPEG, (.jpg), an Image Options dialog box will appear asking you to choose the quality for the image. To change this, slide the arrow on the scale to the left or right, or enter a different number in the box next to quality (the higher the quality, the larger the file size). Then click the OK button.

Tips for naming images

When naming an image, I recommend the following:

1. Name it something that will make sense to you 6 months or a year from now. Example: "cat" may make perfect sense to you today, as you know you took a photo of your favorite cat Cuddles at your home. However, a year from now, when you have amassed a collection of 50 photos of your favorite cats, "cat" will not longer make much sense.
2. Name it something unique and something that will help you identify when you took the picture. To do this I usually date the photo. Thus the picture shown below I have named "FreezingRainStickJan1_05" -- so it is of the freezing rain on a stick, taken January 1, 2005.

 

Changing the size of the image

Once you have taken a photograph you very likely will want to crop out extra parts (see steps below) and resize it to fit into a document, onto a PowerPoint slide, or onto a web page. The size you choose will depend on your intended purpose. There are three aspects of size that are important:

1. Pixel dimensions (pixels per inch -- ppi-- on your computer monitor): you need to make sure that the picture isn't wider than the number of pixels that can be displayed on a computer monitor. If you don't know the specifications for your computer or the computers on which you will show the picture, then you should play it safe by going with an image no bigger than 800 pixels horizontally and 600 vertically (this will fill a 15 inch monitor screen). To change the pixel dimensions in PhotoShop, insert the desired numbers in the boxes provided under the section "pixel dimensions" (see screen shot of dialog box below)
2. Print size: this will be the size of image when you print it on paper (to change print size, change the numbers in the spaces under "print size" (see screen shot of dialog box below).
3. Image size: this is the size of the image file (in K). This tells you how much space the image takes up on your computer. It is important if you are inserting a picture on a web page. The reason for this is that large images result in the page taking a long time to load -- which is very frustrating if people are accessing your pages via modems. Thus before you insert an image onto your web page it is important to reduce it to a reasonably small size (at least lower than 100k, but lower than 50k is even better).

The steps below will guide you through changing the size of a photograph and, if needed, for optimizing it for publishing on the web:

1. Open the image.
2. From the menu at the top of your screen, select Image --> and then Image Size. This will bring up a dialog box that tells you the current image size.
3. The first thing to check is if your original picture is at a resolution greater than 72 pixels/inch. If it is, you should reduce it to 72 (since most monitors cannot display more than 72 ppi). Do this typing "72" in the box next to resolution under the section on Print size. This will greatly reduce the image size if your original was at a resolution higher than 72 ppi.
4. To change the image size, you can also change the width or height size either under pixel dimensions or under print size (click on the relevant box, delete the number that is there, and type in a smaller number). You need only change one of these dimensions as the other with change proportionately (because the "constrain proportions" box is checked).
5. When you do this, notice that the image size (the figure next to "Pixel Dimensions" will also change. Keep playing around with these numbers until you get the image to a size as closer to 50K or less -- but make sure the image is still large enough to see!
6. Once you have the image at the desired size, you can reduce the size even further to optimize it for the web:
   1. From the file menu --> select "Save for Web."
   2. In the next step, from the tabs at the top of the dialog box that appears, make sure "4 up" is selected. This shows 4 versions of your picture, each at a different resolution. If your program is not set to default for 4 different resolutions, you can set these: Click on the first image and in the box to the right of the image, under "settings" select "Original." Then click on the second picture and select for presets, "JPEG high." For the third picture select "JPEG medium," and for the last "JPEG low."
   3. Decide which picture shows the best compromise between quality and image size (because the smaller the image, the faster it will load on the web or the lower the the amount of space it will take in a PowerPoint file). I usually select "JPEG high" (60 quality) for web photos.
   4. Click the "save" button --> give it a name (see naming conventions above) and choose the location where you want to save it (if you are going to put it on a web page, make sure to save it to where you store images within your website folder).
   5. Notice that the original image is still open with the original name. When you close this image iou will be asked if you want to save it. I usually say "no" so that I don't lose the formatting of the original picture (since I saved it as a web image in the step above).

Cropping an image

Often you will find that you only want a part of an image and not the whole thing, especially if you are trying to reduce the size of an image for your web page. To cut out (crop) the excess:

1. Choose the Crop Tool from the Photoshop tool bar.This will turn the cursor from an arrow into a box.
2. Place the box at the top left corner of the area you want to select and drag down to the bottom right of the area. This will draw a box of "walking ants" around the area you have selected. On the corners of the box and mid point along the size are small squares. These are resizing handles. Click on these to increase or decrease the size and shape of the area that you wish to crop.
3. When you have selected the desired area, double click somewhere within the section of the picture that you have selected to crop (but not on the mark in the exact center of the image). This will crop the picture. TIP: if you don't like the result, you can go up to the Edit menu --> select Undo (or use the history palette to return to the step prior to cropping).
4. Once you have have achieved the desired result, save.

Making image darker or lighter

1. Open the image
2. From the menu --> select Image --> Adjust --> Variations. This will bring up a series of smaller versions of your image, showing what it looks like now (original), and what it will look darker or lighter (as well as by adjusting the colors).
3. To make the image lighter, click on the box showing the lighter version. If it still looks too dark, click again. Once you have achieved the desired effect, click the OK button.(As explained before, if you don't like the result, you can go up to the Edit menu --> select Undo).
4. To make image darker, do as above, but click on the box showing the darker version.
5. Once you have have achieved the desired result, save.

Lasso Tool

1. Used to select irregular shapes.
   
   • Lasso tool: for free form drawing around an object.
   • Polygon tool: Click in successive spots. Each click will be connected to the previous spot by a straight line of walking ants. To close the polygon, either double click or put the pointer on the original point where you started.
   • Magnetic polygon (in Photoshop 5.0): Allows you to drag close to an object and then the selection line snaps to the surface of the image you are outlining.

Magic Wand

1. Used to select pixels based on color similarities. You can adjust the sensitivity of the color selection by changing the tolerance in the Magic Wand Options palette (open this by double clicking Magic Wand toolbox or choosing "show options" under the "window" menu.
   
   • To use the wand, click on the area of the picture you wish to select. This will draw a set of walking ants around all similar colors.
   • Tolerance level: If too much or too little of the image is selected, then adjust the tolerance level accordingly. (e.g. 30 selects only similar shades)
   • Feathering: Use this to make selections that have fuzzy, feathered edges rather than clearly defined ones. Usually this option is used if you want to select an object from one picture and paste it into another. The fuzzy edge helps the object to blend into the new setting (e.g. the imagine stone in the school photo).

Manipulating an image

1. Open the desired photo/image.
2. Choose the magic wand.
3. Make sure the options palettes are open (if not, choose WINDOW > SHOW OPTIONS).
4. Click the wand on a typical color in the background of the image.
5. Hold the shift key to select additional pieces of the image of similar color.
6. Choose SELECT > FEATHER (set at about 3 pixels). This should even out your selection.
7. Delete the background (hit DELETE key) or you can color it.

Alternative:

If you cannot clear all the background around an image, you can use paintbrush or pencil tool to draw an outline around the image to clearly differentiate the image.

1. Using the eye dropper tool, select a color from the color swatch palette that is unlike any color in the part of the image that you want to keep.
2. Select the paint brush and draw an outline around the image.
3. Go back and paint in the area on the outside of the line you just drew so that there is a wide band of this color bordering the image (this helps create a marked contrast between the image and its surroundings).
4. Using the magnetic lasso tool, draw around the image so that the line snaps to the border of the image.

Rubber Stamp/Cloning

• Used to copy small parts of a picture and paste them into another part of the picture or into a separate picture.
• Select the rubber stamp tool.
• Select OPTION (ALT) while clicking the mouse on the point you want to copy.
• Release the mouse, position it where you want to begin inserting the cloned image, and start clicking repeatedly as you move the mouse around.
• Note: the rubber stamp functions like a brush, so you can select the same options as you use to alter the appearance of brush strokes (e.g. dissolve, or change the brush size and shape)

Layers

Used to alter an image so that it is composed of a series of levels one on top of the other. You can modify a layer without affecting the layers above or below it.

1. Open the image trail.psd
2. Open the image IvyLieRevised4a.tiff
3. Using the Magic Wand, select Ivy from the background (select>inverse to select only Ivy; also use feather tool).
4. Paste Ivy into the trail.psd photograph.
5. To resize Ivy so she fits better into the background:
6. select LAYER > TRANSFORM > SCALE. This creates a box around Ivy.
7. Use the corner arrows to resize Ivy.
8. Click the small page icon at the bottom of the Layers palette. This adds a layer. You can then type text onto the image. (Note: each time you paste an object or image onto the original photo it creates a new layer).
9. To modify a particular layer, click on the little eye next to that layer in the Layers palette.
10. Once you have finished modifying layers and you are ready to save the image (actually series of images composed of different layers one on top of the other) you need to flatten the layers so they fuse to form one layer. To do this choose LAYER > FLATTEN IMAGE.

Adding Text to Images

Use to add text (with or without special text effects )on top of an image.

1. On the bottom of the layers palette, click on the icon to add a new layer (notice that there will be two layers now in the layers palette, namely the background = the original photo, plus a blank, transparent layer called "Layer 1.")
2. Click on the text tool and then click on the image. A text dialog box will appear.
3. Select the desired font, style, size, etc.
4. Change the text effects under the LAYER --> EFFECTS.
5. When you are done, flatten the image and save.

Filters

Used to apply special artistic effects to pictures.

1. Choose FILTER > and then select from the various filter effects that are listed.
2. When you select a filter effect, a preview box shows you what the effect will be on your image. Some filter effect boxes allow you to modify the intensity of the effect.

Note: all filter effects work with all photographs.