Objective

To learn how to use Photoshop's layer effects for web graphics. To practice Photoshop production techniques by recreating the above buttons.

Procedure

creating the button art

1. download starter file
2. open "buttons.ai" in Illustrator
3. Illustrator > preferences > files & clipboard: AICB (preserve paths)
4. edit > select all (cmd+A), copy (cmd+C)
5. launch Photoshop
6. file > new "buttons.psd": 550x60, 72 ppi, RGB, bg=white
7. paste as shape layers (cmd+V)
8. practice Adobe navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+cmd+opt=zoom out; cmd+zero=fit in window
9. choose default colors (d)
10. add layer style "color overlay" (color=light blue)
11. add layer style "drop shadow" (color=dark blue, angle=110, distance=?)
12. add layer style "bevel & emboss" (style=inner bevel, depth=150, size=2, altitute=60)
13. add contour (linear, anti-aliased), edit curve (lighten shadows)
14. add layer style "inner shadow" (distance=3, size=6, opacity=40%)
15. add layer style "outer glow" (color=light blue, opacity 60%)
16. duplicate layer, change "color overlay" to green (over state)
17. duplicate layer, change "drop shadow" distance and size (down state)
18. save

creating rollover states

1. draw guides for slicing
2. slice tool: create slices from guides (options bar)
3. reveal layers for "normal" state
4. file > save for web: preset=GIF 32 no dither, (HTML and images, all slices, new folder="buttons_html")
5. reveal layers for "over" state
6. file > save for web: preset=GIF 32 no dither, (file name="buttons-over", images only)
7. reveal layers for "down" state
8. file > save for web: preset=GIF 32 no dither, (file name="buttons-down", images only)

adding javascript behaviors in Dreamweaver

1. open "buttons.html" in Dreamweaver
2. select "buttons_01.gif"
3. window > behaviors: add behavior "swap image" (+), set source to "buttons_01-over.gif", set behavior to "onMouseOver"
4. add new behavior "swap image" (+), set source to "buttons_01-down.gif", set behavior to "onMouseDown"
5. repeat with other buttons
6. save, file > preview in browser (opt+F12)

grading

1. publish a link to "buttons.html" from your projects page
2. from Photoshop, print a proof for grading (with your name and exercise number)
3. file your graded proof in your 3-ring binder for individual review