Archived copy for reference only
 

 

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

Graphic Design Exercises
Photoshop: Web Mockup

(Archived from 2019)

Objective

To learn to Adobe Photoshop production techniques by example. To learn layout and web design techniques in Adobe Photoshop by recreating this landing page and this inside page template.

Discussion

Photoshop (or Illustrator) is often used by web designers as a layout tool to create "mockups" of screen shots for client approval prior to production. When using Photoshop as a layout tool, consider taking advantage of Photoshop's "smart objects" feature to retain the integrity and scalability of imported art. Having a visual mockup helps web developers in the coding process. A web mockup can also serve as a "contract proof" as any changes requested by the client during production can be chargeable.

Procedure

prepping the image

  1. download starter files, examine downloaded files
  2. open "home pix.jpg" in Photoshop, save as "home pix.psd"
  3. practice Adobe navigation keyboard shortcuts: space = hand; space + cmd = zoom in; space + cmd + opt = zoom out; cmd + zero = fit in window
  4. convert "background" layer to a normal layer (rename layer)
  5. new layer "white", fill with white (cmd+DELETE), re-stack
  6. magnetic lasso tool: silhouette figures (single-click a starting point; DELETE removes anchors; single-click adds an anchor; double-clicking will close the selection)
  7. layer > layer mask > reveal selection (or click mask icon)
  8. retouch selection: paint on mask
  9. load selection: cmd+click on mask thumbnail
  10. refine edge: shift+select > select & mask: view=on white, radius=1, feather=1, shift edge=?; output to=new layer with layer mask
  11. retouch name tag: remove "liz" with spot healing brush tool
  12. magic wand tool: click white name tag
  13. select > modify > expand (3px)
  14. edit > fill: content aware (shift+DELETE)
  15. clone stamp tool: clean up flaws
  16. hide "white" layer
  17. save "home pix.psd", close

laying out the landing page

  1. download web mockup template, move file to proper location
  2. open "web-mockup.pdf" in AI, examine artboards, examine layers, hide select layers
  3. file > export as: "web-mockup.psd" (format=PSD, artboard=page 3, layers=yes)
  4. dupe "web-mockup.psd", rename "kate.psd", open
  5. file > place "home pix.psd" (smart object)
  6. file > place "kate logo.ai" (smart object)
  7. open "kate.txt", copy links
  8. paste link text in Photoshop, rename layer "links"
  9. spec font: Futura Bold, 12pt, match confetti color
  10. duplicate text layer for inside page
  11. adjust layout for home page
  12. save

working with smart objects

  1. open "inside pix.jpg" in Photoshop
  2. convert "background" layer to a normal layer (rename layer)
  3. save as "inside pix.psd", close
  4. file > place "inside pix.psd" into "kate.psd" (smart object)
  5. edit smart object (double-click layer icon)
  6. marquee area to crop
  7. layer > layer mask > reveal selection (or click mask icon)
  8. unlink pixel and mask icons
  9. adjust mask: cmd+T (mask icon must be active)
  10. save, close window (smart objects will automatically update)

laying out the inside page

  1. type tool: new text frame (click & drag)
  2. spec font: Verdana, 11/18, match dark blue
  3. type > fill with placeholder text; break into paragraphs
  4. call-out: Georgia italic, 26/40, match green
  5. links: match magenta & dark blue
  6. initial cap: Georgia, 36pt, white
  7. new layer "initial cap": draw magenta rectangle, rotate
  8. new layer "box": draw green box, opacity=35%
  9. restack layers, adjust layout
  10. save

grading

  1. add your name and the exercise number to bottom of page
  2. file > export > save for web (tip: always present web mock-ups @ 100%)
  3. open the JPEG in Photoshop and print a proof on tabloid paper for grading (tip: JPEGs will print faster but all vectors will be converted to pixels)
  4. file your graded proof in your Process Book for individual review

BACK TO TOP
Last updated: 5/7/21