Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 7


CIS 152 WEB DESIGN I
Lesson 7: Photoshop Web Page Layout
Instructor: Paul Young

 

 
 

Objectives

 

  

To learn Photoshop's page layout and special effects tools by recreating this sample home page.

Also see Trevor Morris' Tutorial Site

 

 
 

Discussion

 

  

Dreamweaver is an excellent web production tool, but a poor creative design tool. This is why professional web designers prefer to design their web pages in Photoshop. Photoshop is a flexible layout tool and allows one to easily position any visual element in any color anywhere one screen. Once the web page"mock-up" is finished, Photoshop has some great tools to optimize all the pixel elements for Dreamweaver.

By making a Photoshop mock-up first, you are working as a visual artist, not a technician. The Photoshop mock-up is also used as a "contract proof" that clients can sign-off on before any time (read "money") is spent on production. If the client changes their mind later, the designer can charge extra for client-requested alterations.

See an example of the entire process

 

 
 

Procedure

 

  

Overview: Create a web page mock-up in Photoshop. Slice and optimize the pixel elements for importing into Dreamweaver.

Prepping for the lesson

  1. browse to Firefox Add-ons
  2. search for "screen grab", download and install
  3. search for "window resizer", download and install
  4. browse to sample home page, set browser to 1024x768 (RMB)
  5. grab viewport and save to hard drive as "temp.png" (RMB)
    (location: cis152/prep/lesson7)
  6. download blank browser window art (location: cis152/prep/lesson7)
  7. open "blank_browser.png" and "temp.png" in Photoshop
  8. drag "temp" art into "browser" window (move tool)
  9. new layer "black", edit > fill: foreground layer (opt+DELETE)
  10. restack layers
  11. save as "lesson7.psd"
  12. image > mode RGB
  13. image > image size (what are the dimensions of the file? what does Internet statistics tell you about monitor resolution?)
  14. practice Photoshop navigation keyboard shortcuts: space=hand; space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in window

Adding type

  1. type "digital media" (Arial Black 54pt, white, track tight, sharp, baseline shift = -10)
  2. commit to edits in type layer (ENTER on numeric keypad)
  3. type "parkland college computer science + information technology" (Arial Black 12pt)
  4. type "Program • Curriculum • Job Market • Student Gallery • Contact Us" (Arial Black 12pt, all caps)
  5. layer > align > horiz centers (ctrl + click 2 layers)
  6. save

Adding pictures

  1. open 6 thumbnail images from lesson 6 in Photoshop
  2. drag each image into "lesson7.psd" (move tool)
  3. layer > align > vert centers (shift + click first/last layers of group)
  4. scale images down (ctrl + T, shift + drag corner handle)
  5. layer > distribute > vert centers (re-position first/last image)
  6. layer > merge layers (ctrl + E)
  7. new layer "black"
  8. draw gradient: foreground to transparent (default colors)
  9. layer > duplicate layer
  10. edit > transform > rotate 180 (adjust position)
  11. save

Special effects: adding rays

  1. duplicate "digital media" layer (hide all layers except "black")
  2. scale 200% (ctrl + T)
  3. layer > rasterize type
  4. select all
  5. layer > align layers to selection > vertical/horizontal centers
  6. new layer "rays"
  7. window > layers: alt + merge visible
  8. filter > distort > polar coordinates: polar to rectangular
  9. image > rotate canvas > 90 CW
  10. filter > stylize > wind: method = wind (2x from right, 2x from left, 1x from right)
  11. image > rotate canvas > 90 CCW
  12. filter > distort > polar coordinates: rectangular to polar
  13. filter > blur > radial blur: amount=50, method=zoom, quality=best
  14. scale 50% (ctrl + T)
  15. make type on "digital media" layer black (alt + DELETE)
  16. layer > layer style > outer glow: color=white, size=20
  17. new layer "light": draw oval centered on light source
  18. make oval white (crtl + DELETE)
  19. select > deselect (ctrl + D)
  20. filter > blur > gaussian blur (5)
  21. layer > duplicate layer
  22. stretch art to imitate wide light beam (ctrl + T)
  23. layer > new adjustment layer: hue/saturation (colorize=yes, hue=blue)
  24. delete unused layers; adjust stacking order of layers
  25. organize layers in sets
  26. save

Special effects: adding TV scan lines

  1. save as "lesson7-lines.psd"
  2. download action "TVLines" from Trevor Morris' Tutorial Site
  3. window > actions: load action "TVLines.atn"
  4. select "tv lines small": play action
  5. adjust stacking order of layers (images above lines, hue/sat below lines)
  6. select "parkland..." layer
  7. layer > layer style > outer glow: opacity=50, color=white, size=8
  8. layer > layer style > drop shadow: blend=normal, color=white, distance=0, size=5
  9. layer > layer style > color overlay: blue (eyedropper art)
  10. copy layer style from "parkland..." layer to clipboard (RMB)
  11. paste layer style to "program..." layer (RMB)
  12. save
  13. file > print with preview
  14. file > save for web (location: upload/lesson7_html); publish
  15. grading: make links from your personal web site to this lesson

Slicing and optimizing

  1. save as "home-sliced.psd"
  2. draw guides for slicing (view > rulers)
  3. slice based on guides (slice tool)
  4. name slices "home-logo", "home-links", "home-pix" (slice select tool: double-click)
  5. hide "browser" layer; make layer groups
  6. file > save for web (images only, user slices, location="upload/lesson9_html/images")
  7. save
  8. inspect optimized files

 

 

BACK TO TOP

______________________________

Last updated: 9/18/06 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts