Objective

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

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 on 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 opterations.

See an example of the entire process

Procedure

Overview: Make a screenshot of the sample page. Recreate the sample page as a layered Photoshop file. Add effects.

Prepping for the lesson

1. download starter files
2. download blank browser window art (choose 1024x768)
3. open downloaded PSD file in Photoshop
4. load browser test pattern in Firefox; scale browser to 1024x768
5. load sample home page in new tab
6. take a screenshot of the sample page (see instructions)
7. paste screenshot into Photoshop
8. new layer "bg", edit > fill: foreground color (opt+DELETE)
9. restack layers
10. save as "dm-home.psd"
11. practice Photoshop navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+opt+cmd= zoom out; cmd+zero=fit in window

Adding type

1. type "digital media" (Arial Black 54pt, white, track tight, antialias=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 (cmd+click 2 layers)
6. move type layers into new layer group "type"
7. save

Special effects: adding rays

1. duplicate "digital media" layer (hide all layers except "black")
2. scale 200% (cmd+T)
3. layer > rasterize type
4. select all
5. layer > align layers to selection > vertical/horizontal centers
6. new layer "rays"
7. window > layers: opt+merge visible (flattens visible layers into "rays")
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% (cmd+T)
15. make type on "digital media" layer black (opt+shift+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 (cmd+DELETE)
19. select > deselect (cmd+D)
20. filter > blur > gaussian blur (5)
21. layer > duplicate layer
22. stretch art to imitate wide light beam (cmd+T)
23. layer > new adjustment layer: hue/saturation (colorize=yes, hue=blue)
24. create rollover effect: duplicate hue/saturation layer, adjust color
25. delete unused layers; adjust stacking order of layers
26. move appropriate layers into new layer group "logo"
27. save

Adding pictures

1. file > place 6 thumbnail images
2. layer > align > vert centers (shift+click first/last layers of group)
3. scale images down (cmd+T, shift+drag corner handle)
4. layer > distribute > vert centers (re-position first/last image)
5. new layer "mask"
6. draw gradient: foreground to transparent (default colors)
7. layer > duplicate layer
8. edit > transform > rotate 180 (adjust position)
9. move appropriate layers into new layer group "pix"
10. save

Special effects: adding TV scan lines

1. save as "dm-home-lines.psd"
2. window > actions: load action "TVLines.atn"
3. select "tv lines small": play action
4. adjust stacking order of layers (images above lines, hue/sat below lines)
5. select "parkland..." layer
6. layer > layer style > outer glow: opacity=50, color=white, size=8
7. layer > layer style > drop shadow: blend=normal, color=white, distance=0, size=5
8. copy layer style from "parkland..." layer to clipboard (RMB)
9. paste layer style to "program..." layer (RMB)
10. save
11. file > save for web (settings=JPEG high)

Grading

1. publish mockup (see separate lesson)
2. make a link from your projects page to this assignment