Graphic Design / Interactive Design / Fine & Applied Arts / Parkland College

Graphic Design Exercises
Web Design (Part 3 of 5): Advanced Web Mockup in Photoshop

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

  1. download starter files (move files to "assets" folder)
  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 55pt, 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. 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 > image rotation > 90 CW
  10. filter > stylize > wind: method = wind (2x from right, 2x from left,
    1x from right)
  11. image >image rotation > 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. delete unused layers; adjust stacking order of layers
  24. move appropriate layers into new layer group "logo"
  25. 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 > select all (cmd+A)
  9. edit > transform > rotate 180 (adjust position)
  10. move appropriate layers into new layer group "pix"
  11. 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. layer > layer style > color overlay: light blue
  9. copy layer style from "parkland..." layer to clipboard (RMB)
  10. paste layer style to "program..." layer (RMB)
  11. layer > new adjustment layer: hue/saturation (colorize=yes, hue=blue); rename layer "blue"
  12. create rollover effect: duplicate hue/saturation layer, adjust colors; rename layer "red"
  13. save
  14. file > save for web (settings=JPEG high)
  15. move JPEG to "html" folder for publishing

Grading

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

BACK TO TOP
Last updated: 3/2/17 ■ Webmaster: Paul Young