Introduction to Photoshop CS3

You may print this page if you feel the need.  But we will be updating it as needed; so the online copy will always be most up-to-date.

Activity: Introductions

What this class is, and is not:
Photoshop is a powerful image authoring and editing tool.  This class will only touch on its most basic tools and concepts, which are generally associated with processing images.  We will deal with images that you might get from a graphic artist or digital camera.  We will not build graphics/images from scratch. 

This class is taught, face-to-face, on Windows machines, and references Photoshop CS3 Extended, Version 10.0.1.

Concepts Used in Web Design

[ back to top ]

In-line image formats: GIF and JPEG images can be loaded "in-line" (that is, on any web page).  Generally, the GIF compression format is most efficient and looks best when used with line art, screen shots, etc.  JPEG compression is more efficient and looks better for "photos" (images with fine gradations of color). When saving images, it is best to save the same image with each format and compare quality and file size.

Graphics: Though this term can be broadly applied to all non-text data on a page, it is commonly used to specify artist-created images.

Slicing: The process by which any graphic is sliced up to facilitate maintenance and make use of color to speed page download time.

Activity:

  1. Click the link to save the Photoshop file to your H:\ drive. csusm-site.psd (1649 KB)
    Note: You may want to make a folder on your H:\ drive to store files for this class.
  2. Open it in Photoshop (double clicking the image should open the application).
    Note: The file extension (.psd) indicates a Photoshop file, so does the file size (big).
  3. Save the image as a GIF:
    File > Save As... (Shift+ Ctrl+S)
    1. Change the "Format:" field to CompuServe GIF (*.GIF)
      Note: The file extension changes automatically.
    2. Save this version in your folder on your H:\ drive.
    3. When you are prompted to "Flatten layers?" click the "OK" button.
    4. Palette: is "Web"  Dither: is "None".  Click "OK".
    5. Normal vs. Interlaced: Normal will download the image in toto before displaying in a web browser; Interlaced will download a hazy image faster then clarify it as the full image is downloaded.  Generally, I prefer Interlaced.
      Note: Here is my saved GIF csusm-site-copy.gif (79 KB)

    Note: The PSD file is still the one that is open in Photoshop.

  4. Save the file as a JPEG:
    File > Save As... (Shift+ Ctrl+S)
    1. Change the "Format:" field to JPEG (*.JPG; *.JPEG; *.JPE)
      Note: The file extension changes automatically.
    2. Save this version in your folder on your H:\ drive.
    3. Set the "Quality" (balance quality with size) and note the file size under the "Preview" checkbox.
      Note: I chose a quality of "8" for this demo.
    4. "Format Options" should be set to 'Baseline ("Standard")'.  Click "OK".
      Note: Here is my saved JPEG csusm-site-copy.jpg (203 KB)
  5. Open your web browser and open the two newly saved images; compare the quality.
    Note: Look at the logo line and the text next to the DSS link for subtle quality changes.
  6. Compare the file size of each new image.
  7. Does the quality merit the size?
Digital Cameras

[ back to top ]

Digital cameras save images as JPEGs, by default.

Analysis: Why do you think this is?

When plugging your camera (or its memory stick) into your computer, you often need "drivers" to help your computer communicate to your camera/memory stick.

Drivers should be free.  Sites like camera-drivers.com require a free registration (that will put you on their mailing list, no doubt).  I prefer to go to the camera manufacturer site and download the drivers for my camera type and my computer operating system.  Look for drivers in the "Download" area of a camera maker's site.

In general, once you get your camera plugged in and talking to your computer, you will be able to view the camera memory stick as a disk (under My Computer, for Windows machines).  You can choose to copy or move images from your camera/memory stick to your computer or some other storage media (CD, DVD, etc.)

Analysis: What is an aspect of digital photography, specifically, that is a blessing and a curse?

Application Basics

[ back to top ]

As a powerful image editing tool, Photoshop can be daunting with all its tools and capabilities.  Don't worry.  Breathe.

Toolbars:
The horizontal tool bar, along the top of your window, changes depending on which tool you have selected.
The vertical toolbar, along the left side of your window, contains image editing tools.
The dock is located vertically, along the right side of your window.
All of these aspects of Photoshop are modifiable and movable to facilitate a larger workspace for your images.

  • Mouse over a tool and pause to see the title of that tool (note the key shortcuts).
  • Left click a tool (or use the key shortcut) to select it.
  • Right click a tool to see if it has configuration options.

Activity:

  1. Reconfigure the left-hand tool bar using the two triangles.
  2. Drag it around by clicking and holding and dragging the top of the bar.
  3. Notice the other triangles and bars that allow us to reposition tool bars and the dock.
  4. Try and put the tool bars back where they started. Workspace > Default Workspace
    Note: Any new positions for your tool bars and dock will be remembered for future sessions in Photoshop.

Windows:
At the bottom left of the document/image window, you will see the display percentage of the original image's size.  You will also see the file size.

Menus:
View > Rulers (right click a ruler to view it in another measurement system)
View > Zoom In/Out
Filter > Blur & Sharpen

Sizing Images

[ back to top ]

It is very important to match your image file size to your needs/use/goal for each image you work with.

If you are sending an image to a printer, it may be desirable to keep it at a higher DPI (Dots (of ink) Per Inch) resolution.  If you are going to display an image on the web, it is better to keep the file size down, and one good way to do this is to save it with a PPI (Pixels Per Inch) resolution around 72; this is because most computer monitors display between 67 and 204 PPI.

DPI is often misused as meaning the same as PPI; but the long and short of it is that they are both influenced by what Photoshop calls the image resolution (which is measured in PPI).

  1. If it is not still open, open the csusm-site.psd file you saved to your H:\ drive.
  2. Image > Image Size...
    will show us the details of this image. 
    Note:
    • Width and Height can be viewed in a number of measurements.
    • Width and Height are linked by default (this can be turned off my un-checking the "Constrain Proportions" box.
  3. Image > Canvas Size...
    allows us to decrease or increase the background size of your image (all layers).
    Note:
    • If you shrink your "canvas," it will crop your image.
    • You can choose to slide your image "Anchor" to crop/expand a certain side.
    • Width and Height are not linked when sizing the canvas.
    • You can make your canvas bigger to allow you to "stitch" together images.

Activity:

  1. Shrink this image to 25%.
    Notice the change in the "Doc:" file size.
  2. Edit > Undo Image Size (to return it to 100%).
     
  3. Change the image Width to 10 cm.
    Notice the change in the image Height.
  4. Click the "Cancel" button, in the Image Size window (to return to the unchanged image).
     
  5. Uncheck the "Restrain Images" box.
  6. Change the image Width to 10 cm.
    Notice the change in the image Height and Resolution.
  7. Click the "Cancel" button, in the Image Size window (to return to the unchanged image).
     
  8. Anchor your image to the bottom left corner of your canvas.
  9. Shrink the canvas Width to 4 inches and the Height 3 inches.
  10. Click OK and Proceed (when prompted).
    Notice the part of the image that was cropped.
  11. Edit > Undo Image Size (to return it to 100%).
Layers

[ back to top ]

Photoshop images often have at least two layers, the "Background" and "Layer 1," etc.  This allows us to apply certain effects to a single layer of our image without acting on the other layer(s).

Activity:

  1. If it is not still open, reopen the csusm-site.psd file you saved to your H:\ drive.
    Note: We see that the dock is set to display the image layers, by default.
  2. Copy any other image to your computer's clipboard.
    Note: You may use an image from the web or use an image from this presentation.
    1. View an image in your web browser.
    2. Right click the image and select Copy (or Copy Image) from the menu.
  3. Paste the copied image into your image, in Photoshop.
    1. Edit > Paste (or Ctrl + v).

Note: The layers in the dock (bottom right of your Photoshop window.  See the addition of "Layer 2"?

Layers can be selected (left click, in the dock, to select a layer) and individually set:

  • to be visible (or invisible)
  • to a percentage of opacity 
  • to be locked (in several ways)
  • to link to other layers
    1. Left click to select the first layer to link.
    2. Ctrl + click the second layer to link, to select the second layer while keeping the first selected.
    3. Click the chain-link icon at the bottom of the layer dock.
      Note: To unlink, select all the layers to unlink, then click the chain-link icon.
  • (dragged) to different positions in the stack of layers

New layers can be made without pasting by using the "Create New Layer" icon at the bottom of the layer dock (remember to hover over tools to see their description).

Layers can be deleted (but consider just making them invisible for a bit, first).

Activity:

  1. Make Layer 1 invisible and then make it visible again.
  2. Set Layer 1 to 50% Opacity.
  3. Left click and drag Layer 2, down, between Background and Layer 1, then back on top of Layer 1.
  4. Link Layer 1 and the Background layer and unlink them.
  5. Create a new layer without pasting.
  6. Delete the new layer you just created.
Common Tools

[ back to top ]

Move:
Moves a layer (or a selected piece of a layer) with a click and drag.  This tool also takes input from the arrow keys, moving the layer (or selection) one pixel in the direction that the arrow key indicates.

Activity:

  1. Select Layer 2 in the dock.
  2. Select the Move Tool.
  3. Click and drag, anywhere in the image.
    Note: You need not click on a part of the image to move the layer.

Analysis: What does this tell you about how Photoshop deals with layers?

Type:
Allows us to type text (horizontally or vertically) into a new layer.

Activity:

  1. Select either the Horizontal or Vertical Type Tool.
  2. Left click anywhere on your image.
    Notice that Layer 3 appears in the dock and has the "T" icon to denote a "text" layer.
  3. Choose a font, size, style, color (from horizontal tool bar) and then type some text.
    Note: If you do not choose your font settings before typing, you can always select your text and apply new settings.
  4. Play with the "Create warped text" tool (just to the right of the color setting).

Marquee & Lasso:
Selects the appropriate shape in a layer.  Drag your selection around to select a different area; or simply reselect using the tool, or another shape.

Activity:

  1. Select the Elliptical Marquee Tool (remember to right click tools for configuration options).
  2. Select an oval from Layer 1; have this selection overlap the image in Layer 2.
  3. Select the Move Tool.
  4. Drag the selection to a new position (experiment with your arrow keys to move the selection too).

Troubleshooting/Analysis:  I made my selection just fine, then selected the Move Tool; but I get an error (Could not move the selection because the selected area is empty.) when I drag it or use my arrow keys.  What am I doing wrong?

Note: The Lasso can be used to draw straight lines too, by letting Photoshop auto-complete your shape.  Double click when using the Polygonal Lasso to auto-complete your shape.  [Draw around the arrow, showing them this.]

Quick Select & Magic Wand:
Right click the Quick Selection Tool, to use the Magic Wand Tool.  This tool selects adjoining pixels that are similar.  Just how similar pixels have to be, is determined by the "Tolerance" in the horizontal tool bar.

This tool is very helpful when you want to select a portion of your image, but the Marquee and Lasso tools don't offer enough distinction.

Activity:

  1. Select Layer 2 in the dock.
  2. Select the Magic Wand Tool.
  3. Left click anywhere in the brown part of the image.
    Note: What is selected?
  4. Set the Tolerance to 255 (the maximum).
  5. Left click anywhere not on the image to deselect the brown area of the image.
  6. Left click anywhere in the brown part of the image.
    Note: Now what is selected?
  7. Repeat steps five and six, after setting the Tolerance to 0 (the minimum).

Analysis: Why are we spending time on learning to select a portion of an image?  How will you use this?

Crop:
This tool allows us to select a portion of your image (all layers) and discard the rest.  This can be very helpful to focus the eyes of those who view the image on what is important and also to increase efficiency by decreasing file size (and download time).

Once you select an area to crop:

  • You can left click and drag the "handles" at the edges of the crop selection to increase or decrease the selected area.
  • Clicking and dragging within the selection allows you to drag the selection around your image
  • Clicking and dragging outside the selection allows you to rotate the selected area.
    Note: The cropped area is still square, along horizontal and vertical axes.  This rotates the selection and crops it.
  • Double clicking within the selection crops the selection, discarding the area outside the selection.
  • To cancel the crop:
    1. right click anywhere in the image, and select "Cancel" from the menu or
    2. select any other tool in Photoshop and click the "Don't Crop" button that appears or
    3. click the "Cancel current crop operation" icon (from horizontal tool bar).

Activity:

  1. Use the Crop Tool to select a portion of the image.
  2. Click and drag the handles to change the selected area.
  3. Click and drag inside the selection to move a portion of it outside/off the image area.
  4. Double click within the selected area to crop.
    Notice that the area that was outside the image is included in your new image, as white, background.
  5. Edit > Undo Crop (to return to your uncropped image).
     
  6. Use the Crop Tool to select a portion of the image.
  7. Click and drag outside the selection to rotate the selection.
  8. Double click within the selected area to crop.
    Notice that the crop is still square, but that the selection was rotated.
  9. Edit > Undo Crop (to return to your uncropped image).

Red Eye:
Allows us to remove the red-eye effect from images.

Activity:

  1. Copy and Paste this image of a fine red-eye subject into a new Photoshop image window.
    1. View the image in your web browser.
    2. Right click the image and select Copy (or Copy Image) from the menu.
    3. File > New...
      Note: Photoshop selects a canvas the same size as our clipboard (the image we have copied).
    4. Click "OK"
    5. Edit > Paste (or Ctrl + v)
  2. Right click the Spot Healing Brush Tool and select the Red Eye Tool.
  3. Left click with the cross hairs, in the center of the red-eye effect.
    Note: Like other tools, there are different settings in the horizontal tool bar.

Clone Stamp:
Allows you to target a spot on your image and paint a different area starting at the targeted spot.

Activity:

  1. Select the Clone Stamp Tool.
  2. Hold down the "Alt" key and left-click to select the target area to clone..
    Notice how the circle pointer shape adds cross-hairs.
  3. Release the Alt key and move the circle pointer to the place where you want to paint the cloned spot.
  4. Left click and hold/drag to paint the cloned spot.

For this activity, please select the rabbit's eye as the target and clone/paint it in the top left corner of the image.

Transform:
Allows us to scale, rotate, skew, warp and add perspective, as well as rotating 180 or 90 degrees, and flipping horizontal and vertical axes.

Activity:

  1. Return to our first image in Photoshop (we will use the rabbit image again, later; so don't close it).
    If it is not still open, open the csusm-site.psd file you saved to your H:\ drive.
  2. Go to Edit > Transform and select a transformation to experiment with.
  3. Play.
  4. At lest look at: Flip Horizontal, Distort, Perspective, Warp and Rotate.
    Note: Like other tools, there are different settings in the horizontal tool bar.  Note especially the chain link "Maintain aspect ratio;" this will allow you to transform your image, proportionally (especially useful when using Edit > Transform > Scale).
  5. When you are ready to "Commit transform" click the check-mark in the horizontal tool bar (or "Cancel transform" by using the icon to the left of the check-mark).
    Note: how your transformation clarifies when committed.

Rectangle (and other shape):
Allows you to draw shapes on your image (in new layers).
Note: how you may set the style (in the horizontal tool bar) to empty or filled with the selected color.

Activity:

  1. Select the Polygon Tool.
  2. Set "Sides" to 8 (in the horizontal tool bar).
  3. Click and hold/drag to draw your shape in its own layer.
  4. Click the "Color" swatch  (in the horizontal tool bar) and select a unique color and click OK.

Zoom:
Allows you to zoom in and out on a point in your image.

Activity:

  1. Select the Zoom Tool and not how your cursor changes to a magnifying glass with a "+" in it, when you mouse over your image.
  2. Click the eye of the rabbit until you are viewing it at 500%.
  3. Hold down the "Alt" key and notice how the "+" changes to a "-".
  4. Click the eye of the rabbit until you are viewing it at 100%.

History Brush:
Allows us to paint a section of your image with a previous state of that image.

Activity:

  1. Return to our rabbit image in Photoshop.
    This image of a fine red-eye subject.
  2. Select the History Brush Tool.
  3. Click and hold/drag over the rabbit's original eye, then try the cloned eye.

One of the most popular uses of the history brush tool is to take a color picture, convert it to black & white, then brush the original color back into a particular feature.

History

[ back to top ]

Like the undo feature, in the Edit menu, the History list allows us to go back to a certain point in the editing of our image.  But History allows us to go all the way back to the beginning of our editing, one action at a time, if we like.

To access the image history, left click the History icon, at the top left of the dock.

To return to a place in our editing history, left click the description in the list.  Watch your image to see the changes, after that point, stripped away.

To hide the list of historic edits, simply click the History icon, at the top left of the dock again.

Activity:

  1. Using the History list, left click to select several previous states; notice how your image changes.
  2. Select the original image of our red-eye rabbit (to return to its original state).
  3. Close the History list.
Color (and the eye dropper)

[ back to top ]

Often you want to take a sample of a color you have (in an image/graphic/etc.) and use it (or a complementary color) as your text, brush or background color.

The Eye Dropper Tool allows you to take any color in your image and make it the default (foreground) color.

At this point let us also consider the Color Picker window.  Notice the color values are given in various formats (Hexadecimal, and RGB are common).

Activity:

  1. Select the Eye Dropper Tool and select a red from the rabbit's eye.
    Notice the change in the foreground color swatch.
  2. Select the "Set foreground color" swatch.
  3. Drag around in the swatch to pick a lighter variant of the red we just selected and click "OK".

Analysis: Can you think of an example of why would we use the eye dropper in an image?

Balancing Color/Brightness

[ back to top ]

Image > Adjustments > Auto Levels
Image > Adjustments > Auto Contrast
Image > Adjustments > Auto Color
These menu pre-sets are an easy way to balance the color and contrast of your image.  But be critical; the machine dos not always know best.

Activity:

  1. Using the rabbit image: Image > Adjustments > Auto Levels
    Notice how Photoshop chose colors that look like the photo was taken under florescent light?
  2. Edit > Undo Auto Levels (to return to the original).
  3. Image > Adjustments > Auto Contrast
    Notice how Photoshop chose warmer colors this time?
  4. Edit > Undo Auto Contrast (to return to the original).
  5. Image > Adjustments > Auto Color
    Notice how Photoshop chose cooler colors this time?
  6. Edit > Undo Auto Color (to return to the original).
Actions & Batch Handling

[ back to top ]

Actions:

Photoshop lets us record and save actions/edits we take/make to one image, so we can apply them to other images, in the future.

To access default and saved actions, left click the Actions icon, at the top left of the dock.

To select and apply an existing action to your image:

  1. Open the actions list and open the folder that contains the action you want.
  2. Left click the desired action to select it.
  3. Left click the "Play selection" icon.

To record your own Action:

  1. Open the image you want to perform this action on.
  2. Open the actions list.
  3. Left click the "Create new action" icon.
    1. Name your action (be short and descriptive).
    2. Select which "Set:" to add your action to.
    3. Click the "Record" button.
  4. Perform the action(s) on your image.
  5. Click the "Stop playing/recording" icon.
    Note: Your new action and its details will appear in the Actions list.

Batch Handling:

Allows you to run an Action on a folder, applying that action to all images in that folder.  Often you will designate a destination folder to place the processed images.

Be careful of using Actions that have "Close" sub-actions; these can override your "Destination" settings when processing batches. 

Let me strongly recommend that you make a copy of your original images and use Batch Handling on the copies.

To use batch handling:

  1. File > Automate > Batch...
  2. Choose the "Set:" your action is a member of and choose the Action.
  3. Choose your "Source:" folder by clicking the corresponding "Choose..." button.
    1. Set desired sub commands, like "Include All Subfolders."
  4. Choose a "Destination:" for your processed files.
    Note: I like to select  a separate folder so that, if things go wrong, my original files remained untouched in my source folder.
  5. Configure the "File Naming" so that your processed files are distinct from your originals (especially important if all your files will end up in the same folder). 
    I like to do something like: Document Name + 300 + extension
  6. Click "OK" (top right of the Batch window) to start the process.

Please fill out the evaluation for this course.

[ Designing for the Web ] [ Front Page 2003 ] [ Dreamweaver 8 ]
[ More Advanced Front Page 2003 ] [ Introduction to Photoshop CS3 ]

This page http://www.csusm.edu/garrett/electures/PhotoShopIntroSp08/index.html
maintained by Garrett Collins (garrett@csusm.edu)
for IITS, User Support Services

Last updated Friday, April 11, 2008 07:50:19 AM