Objective

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

Discussion

Photoshop 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.

See example of the entire process

Procedure

prepping the image

1. download starter files, examine downloaded files
2. open "front pix.jpg" in Photoshop, save as "front pix.psd"
3. convert "background" layer to a normal layer (rename layer)
4. new layer "white", fill with white, re-stack (cmd+DELETE)
5. silhouette figures (magnetic lasso tool)
6. layer > layer mask > reveal selection (or click mask icon)
7. retouch selection: paint on mask
8. load selection: cmd-click on mask thumbnail
9. select > refine edge: radius=1, feather=1, smooth=?, contrast=?
10. layer > layer mask > delete (or RMB on mask thumbnail)
11. layer > layer mask > reveal selection (or click mask icon)
12. retouch name tag (clone stamp tool)
13. save "front pix.psd", close

laying out the front page

1. open "browser.png" in Photoshsop, save as "kate-front.psd"
2. new layer "white", fill with white, restack
3. file > place "front pix.psd" (smart object)
4. file > place "kate logo.ai" (smart object)
5. open "kate.txt", copy links
6. paste link text in Photoshop
7. spec font: Futura Bold, 13pt, anti-aliasing=crisp, match confetti color
8. adjust layout
9. save, save as "kate-inside.psd"

laying out the inside page

1. open "inside pix.jpg" in Photoshop
2. marquee area to crop
3. select > transform selection, adjust, RETURN to accept
4. layer > layer mask > reveal selection (or click mask icon)
5. save as "inside pix.psd", close
6. file > place "inside pix.psd" (smart object)
7. go to www.lipsum.com, generate some "greek" text
8. copy & paste text into Photoshop as a text frame (click & drag)
9. spec font: Verdana, 11/18, anti-aliasing=none, match dark blue
10. initial cap: Georgia, 36pt, white
11. call-out: Georgia, 26/40, anti-aliasing=crisp, match green
12. links: match magenta & dark blue
13. new layer "initial cap": draw magenta rectangle, rotate
14. new layer "box": draw green box, opacity=35%
15. restack layers, adjust layout

grading

1. print a proof with your name on it for grading
2. file your graded proof in your 3-ring binder for individual review