Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Lesson 5


CSC 121 WEB SITE DESIGN
Lesson 5: Introduction to Photoshop
 Instructor: Paul Young

 

 
 

Objectives

 

  

To become comfortable in the Photoshop environment by creating graphics for a simple web site similar to this site.

 

 
 

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 be asked to make some color decisions. Color is a very powerful visual communication tool. Fortunately, Photoshop can quickly preview your color choices and allow you to change them. If you're uncomfortable combining colors, this Color Scheme Generator might help.

 

 
 

Procedure

 

  

Overview: Download starter files. Modify the files to your liking. Slice and optimize the files for importing into Dreamweaver.

Prepping for the lesson

  1. download starter files, move to "prep" folder on server
  2. duplicate "browser.psd", rename "lesson5.psd"
  3. open "lesson5.psd" in Photoshop
  4. image > mode RGB
  5. image > image size (what are the dimensions of the file? what does Internet statistics tell you about monitor resolution?)
  6. practice Photoshop navigation keyboard shortcuts: space=hand; space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in window

Creating the layout

  1. type your name, choose a font, adjust size and position (type tool)
  2. repeat with "my blog", "my pictures", "my links", "contact me"
  3. layer > new layer "color1"
  4. select an area (marquee tool)
  5. choose a color (click foreground color)
  6. fill selection with foreground color (paint bucket tool)
  7. repeat with "color2", "color3"
  8. adjust size and position of color bars (edit > free transform)
  9. select "background" layer, fill with a light color
  10. open "scan.tif", drag art into "site2.psd" (move tool), rename layer "portrait", adjust position
  11. select white area, DELETE (magic wand tool: tolerance=32, anti-alias=yes, contiguous=no)
  12. choose an existing color for art (eyedropper tool)
  13. edit > fill: foreground color, keep transparency=yes (alt+DELETE)

Slicing and optimizing

  1. draw guides for slicing (view > rulers)
  2. slice based on guides (slice tool)
  3. name slices "name", "art", "links", "bg" (slice select tool, click SLICE OPTIONS)
  4. hide "browser" layer (click eye symbol)
  5. file > save for web
  6. select critical slices (slice select tool)
  7. settings: GIF 32 no dither, adjust colors (check download time, what does Internet statistics tell you about download times?)
  8. click SAVE (images only, selected slices, location="upload/lesson5")
  9. save "lesson5.psd" for future editing
  10. inspect optimized files

 

 

BACK TO TOP

______________________________

Last updated: 8/28/05 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts