College > CSIT
Dept > Web
Technology > CSC 121 >
Calendar > Lesson 5
CSC 121 WEB SITE DESIGN
Lesson 5: Introduction to Photoshop
To become comfortable in the Photoshop
environment by creating graphics for a simple web site similar
to this site.
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
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.
Overview: Download starter files. Modify the files to your liking.
Slice and optimize the files for importing into Dreamweaver.
Prepping for the lesson
- download starter files, move to "prep" folder
- duplicate "browser.psd", rename "lesson5.psd"
- open "lesson5.psd" in Photoshop
- image > mode RGB
- image > image size (what are the dimensions of the file?
what does Internet
statistics tell you about monitor resolution?)
- practice Photoshop navigation keyboard shortcuts: space=hand;
space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in
Creating the layout
- type your name, choose a font, adjust size and position (type
- repeat with "my blog", "my pictures", "my
links", "contact me"
- layer > new layer "color1"
- select an area (marquee tool)
- choose a color (click foreground color)
- fill selection with foreground color (paint bucket tool)
- repeat with "color2", "color3"
- adjust size and position of color bars (edit > free transform)
- select "background" layer, fill with a light color
- open "scan.tif", drag art into "site2.psd" (move
tool), rename layer "portrait", adjust position
- select white area, DELETE (magic wand tool: tolerance=32, anti-alias=yes,
- choose an existing color for art (eyedropper tool)
- edit > fill: foreground color, keep transparency=yes (alt+DELETE)
Slicing and optimizing
- draw guides for slicing (view > rulers)
- slice based on guides (slice tool)
- name slices "name", "art", "links", "bg" (slice
select tool, click SLICE OPTIONS)
- hide "browser" layer (click eye symbol)
- file > save for web
- select critical slices (slice select tool)
- settings: GIF 32 no dither, adjust colors (check download time,
what does Internet
statistics tell you about download times?)
- click SAVE (images only, selected slices, location="upload/lesson5")
- save "lesson5.psd" for future editing
- inspect optimized files