Parkland College > CSIT Dept > Women in CSIT > Web Workshop for Girls >
Calendar > Lesson 4


WEB WORKSHOP FOR GIRLS
Lesson 4: Introduction to Photoshop
 Instructor: Paul Young

 

 

Objective

To be introduced to Photoshop's image editing tools. To learn how to enhance typical digital photos.

 

Discussion

The best way to learn Photoshop (and any software package) is to simply start working in it. Photoshop is essentially a pixel editing tool. However, it is so powerful that professionals are using it for many functions including retouching photographs, special effects, page layout for web sites, and much more. Anyone can start using Photoshop right out of the box, but it takes many years to master the application.

When using Photoshop for web work, keep in mind that images can be very large in file size and take a long time to download. Fortunately, Photoshop has very good optimization tools to help reduce file sizes.

In this lesson, you'll learn to prepare digital photos for web publication. We'll also use some of Photoshop's special effects tools to enhance images creatively.

Note: If you don't own Photoshop, try using Snipshot.

 

Procedure

Overview: Download a picture. Edit the picture, then optimize the picture for web publishing.

Prepping for the lesson

  1. download this picture to your desktop (RMB save image as...)
  2. launch Photoshop
  3. open "web_girls06.jpg" in Photoshop (note file size)
  4. file > save as "web_girls.psd" (format=Photoshop)
  5. image > image size (what are the dimensions of the file? what does Internet statistics tell you about monitor resolution? use the browser test pattern to help you size an image)
  6. practice Photoshop navigation keyboard shortcuts: space=hand; space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in window

Editing and optimizing the picture

  1. crop tool: select area to keep, ENTER
  2. image > image size: height=500px
  3. layer > duplicate "background" layer, rename "pix" (for safe keeping)
  4. layer > new adjustment layer > levels: make image lighter
  5. layer > new adjustment layer > hue/saturation: increase saturation
  6. filter > sharpen > unsharp mask (radius=1, threshold=0, amount=?)
  7. file > save for web "web_girls06_optimized.jpg" (preset=jpeg high)
  8. file > save (this saves the Photoshop authoring file)
  9. optional: remove the exit sign
  10. optional: draw a gradient mask for "levels"

Colorizing the picture

  1. select "hue/saturation" adjustment layer
  2. layer > duplicate "hue/saturation" layer, rename "grayscale" (hide previous layer)
  3. edit "grayscale" (double click icon): saturation=-100
  4. layer > duplicate "grayscle" layer, rename "colorize" (hide previous layer)
  5. edit "colorize" (double click icon): colorize=yes, adjust sliders
  6. file > save for web "web_girls06_tinted.jpg" (preset=jpeg high)
  7. add picture to your web site, write a caption for the picture
  8. use your content folder to organize your files

 

 

BACK TO TOP

______________________________

Last updated: 6/19/06 • Webmaster: Paul Young