"How to" Guideline series is coordinated by Helen
Mongan-Rallis of the Education Department at the University of Minnesota
Duluth. If you have any questions, comments,
or suggestions to improve these guidelines please me at e-mail firstname.lastname@example.org.
Photoshop Guidelines: Basics of Edit Images Using Photoshop
(by Helen Mongan-Rallis). Last modified on
June 10, 2005
To guide beginning users through the basics of editing a photograph
using Adobe Photoshop. Although these guides are designed specifically for Photoshop,
the same or very similar steps apply in most image editing programs.
Overview of topics in these guidelines
- Opening image in Photoshop
- Saving the image
- Tips for naming image
- Changing the size of the image
- Cropping an image
- Making image darker or lighter
- Lasso Tool
- Magic Wand
- Manipulating an image
- Rubber Stamp/Cloning
- Adding Text to Images
Opening image in Photoshop
- 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.
- 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.
- 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:
- Go to the File menu
- Choose Save As
- 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.
- 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.
- 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:
- 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.
- 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.
(source: taken by Helen Mongan-Rallis, Duluth January 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:
- 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)
- 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).
- 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:
- Open the image.
- 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.
- 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
- 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).
- 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!
- Once you have the image at the desired size, you can reduce the size even
further to optimize it for the web:
- From the file menu --> select "Save for Web."
- 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."
- 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.
- 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).
- 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:
- Choose the Crop Tool from the Photoshop tool bar.This will turn the cursor
from an arrow into a box.
- 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
- 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).
- Once you have have achieved the desired result, save.
Making image darker or
- Open the image
- 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).
- 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).
- To make image darker, do as above, but click on the box showing the darker
- Once you have have achieved the desired result, save.
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
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
- 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
- Open the desired photo/image.
- Choose the magic wand.
- Make sure the options palettes are open (if not, choose WINDOW > SHOW
- Click the wand on a typical color in the background of the image.
- Hold the shift key to select additional pieces of the image of similar color.
- Choose SELECT > FEATHER (set at about 3 pixels). This should even out
- Delete the background (hit DELETE key) or you can color it.
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
- 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.
- Select the paint brush and draw an outline around the image.
- 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).
- Using the magnetic lasso tool, draw around the image so that the line snaps
to the border of the image.
- 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)
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.
- Open the image trail.psd
- Open the image IvyLieRevised4a.tiff
- Using the Magic Wand, select Ivy from the background (select>inverse
to select only Ivy; also use feather tool).
- Paste Ivy into the trail.psd photograph.
- To resize Ivy so she fits better into the background:
- select LAYER > TRANSFORM > SCALE. This creates a box around Ivy.
- Use the corner arrows to resize Ivy.
- 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).
- To modify a particular layer, click on the little eye next to that layer
in the Layers palette.
- 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.
- 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
- Click on the text tool and then click on the image. A text dialog box will
- Select the desired font, style, size, etc.
- Change the text effects under the LAYER --> EFFECTS.
- When you are done, flatten the image and save.
Used to apply special artistic effects to pictures.
- Choose FILTER > and then select from the various filter effects that
- 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.
The steps described here are all you need to make most of the necessary adjustments
to images to adapt them for use in word processing documents and multi-media
presentations (e.g.PowerPoint presentations). To learn more about image editing,
check out the following resources:
- UMD ITSS: Graphic
Image Editing: From Digital Camera or Scanner to the Web (http://www.d.umn.edu/itss/support/Training/Online/Graphics/)
Reference Guide (http://www.informit.com/guides/content.asp?g=photoshop&seqNum=3&rl=1)
Guide to Adobe Photoshop (http://www.pegaweb.com/tutorials/beginners-guide-adobe-photoshop/)
to the Index of How To Guidelines