Objective
To learn Photoshop's
page layout and special effects tools by recreating this sample landing 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
- download starter files (move files to "assets" folder)
- download blank browser window art (choose 1024x768)
- open downloaded PSD file in Photoshop
- load browser test pattern in Firefox; scale browser to 1024x768
- load sample home page in new tab
- take a screenshot of the sample page (see instructions)
- paste screenshot into Photoshop
- new layer "bg", edit > fill: foreground color (opt+DELETE)
- restack layers
- save as "dm-home.psd"
- practice Photoshop navigation keyboard shortcuts: space=hand;
space+cmd=zoom in; space+opt+cmd= zoom out; cmd+zero=fit in
window
Adding type
- type "digital media" (Arial Black 55pt, white, track tight, antialias=sharp, baseline shift = -10)
- commit to edits in type layer (ENTER on numeric keypad)
- type "parkland college
computer science +
information technology" (Arial Black 12pt)
- type "Program • Curriculum • Job Market • Student Gallery • Contact Us" (Arial Black 12pt, all caps)
- layer > align > horiz centers (cmd+click 2 layers)
- save
Special effects: adding rays
- duplicate "digital media" layer (hide all layers except "black")
- scale 200% (cmd+T)
- layer > rasterize type
- select all
- layer > align layers to selection > vertical/horizontal centers
- new layer "rays"
- window > layers: opt+merge visible (flattens visible layers into "rays")
- filter > distort > polar coordinates: polar to rectangular
- image > image rotation > 90 CW
- filter > stylize > wind: method = wind (2x from right, 2x from left,
1x from right)
- image >image rotation > 90 CCW
- filter > distort > polar coordinates: rectangular to polar
- filter > blur > radial blur: amount=50, method=zoom, quality=best
- scale 50% (cmd+T)
- make type on "digital media" layer black (opt+shift+DELETE)
- layer > layer style > outer glow: color=white, size=20
- new layer "light": draw oval centered on light source
- make oval white (cmd+DELETE)
- select > deselect (cmd+D)
- filter > blur > gaussian blur (5)
- layer > duplicate layer
- stretch art to imitate wide light beam (cmd+T)
- delete unused layers; adjust stacking order of layers
- move appropriate layers into new layer group "logo"
- save
Adding pictures
- file > place 6 thumbnail images
- layer > align > vert centers (shift+click first/last layers of group)
- scale images down (cmd+T, shift+drag corner handle)
- layer > distribute > vert centers (re-position first/last image)
- new layer "mask"
- draw gradient: foreground to transparent (default colors)
- layer > duplicate layer
- edit > select all (cmd+A)
- edit > transform > rotate 180 (adjust position)
- move appropriate layers into new layer group "pix"
- save
Special effects: adding TV scan lines
- save as "dm-home-lines.psd"
- window > actions: load action "TVLines.atn"
- select "tv lines small": play action
- adjust stacking order of layers (images above lines, hue/sat below lines)
- select "parkland..." layer
- layer > layer style > outer glow: opacity=50, color=white, size=8
- layer > layer style > drop shadow: blend=normal, color=white, distance=0, size=5
- layer > layer style > color overlay: light blue
- copy layer style from "parkland..." layer to clipboard (RMB)
- paste layer style to "program..." layer (RMB)
- layer > new adjustment layer: hue/saturation (colorize=yes, hue=blue); rename layer "blue"
- create rollover effect: duplicate hue/saturation layer, adjust
colors; rename layer "red"
- save
- file > save for web (settings=JPEG high)
- move JPEG to "html" folder for publishing
Grading
- publish mockup (see separate lesson)
- make a link from your process page to this assignment