Objective

To learn Photoshop's slicing and web production tools by creating the pixel elements for this landing page and this inside page.

Discussion

Photoshop also has powerful tools designed for for web development. Ideally, all prototyope screen mock-ups should be completed in Photoshop before slicing. In this exercise, we will some gain experience in slicing and optimizing images for Dreamweaver.

Procedure

Overview: Slice and optimize the home page in Photoshop. Modify the home page to make an inside page. Slice additional elements for the inside page.

Prepping for the lesson

1. duplicate "dm-home-lines.psd" 2x (from previous lesson)
2. rename files "dm_home-sliced.psd" and "dm-inside-sliced.psd"
   (or download this starter file)
3. launch Photoshop
4. practice Photoshop navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+opt+cmd= zoom out; cmd+zero=fit in window

Slicing the home page in Photoshop

1. open "dm-home-sliced.psd" in Photoshop
2. draw guides for slicing (view > rulers)
3. slice tool: draw 3 slices
4. name slices "home-logo", "home-links", "home-pix"
   (slice select tool: double-click)
5. hide "browser" layer
6. file > save for web (optimize each slice; images only, user slices, location=projects_html/exercises/dm_optimized)
7. save, save as "links-home.psd"
8. crop out all art except links area
9. view > clear slices (also clears slice names)
10. draw vertical guides for slicing
11. slice based on guides (slice tool: options bar)
12. reveal "normal" state layers
13. file > save for web (html, all slices)
14. reveal "over" state layers
15. file > save for web "links-home-over" (images only, selected slices)
16. save, close
17. inspect optimized files

Creating the inside page

1. open "dm-inside-sliced.psd" in Photoshop
2. adjust size and position of logo art
3. adjust position and line breaks of links
4. browse to www.lipsum.com and copy some text
5. paste text (text tool: drag to draw text frame)
6. make text verdana 11/18, light blue (anti-alias=none)
7. commit to edits in type layer (ENTER on numeric keypad)
8. add triangle with shape tool (option: shape layer)
9. copy and paste layer style from "program" layer
10. duplicate triangle 5x (move tool: option+shift drag)
11. move shape layers into new layer group
12. crop out browser chrome
13. file > save for web "tracing.jpg" (settings=JPEG high)
14. save

Slicing and optimizing the inside page

1. slice tool: slice logo art
2. slice select tool: name logo slice "upperRight"
3. file > save for web (images only, user slices)
4. save, save as "links.psd"
5. crop out all art except links area
6. view > clear slices (also clears slice names)
7. draw horizontal guides for slicing
8. slice based on guides (slice tool: options bar)
9. reveal "normal" state layers
10. file > save for web (html, all slices)
11. reveal "over" state layers
12. file > save for web "links-over" (images only, all slices)
13. reveal "hit" state layers (include triangles)
14. file > save for web "links-hit" (images only, all slices)
15. save, close
16. inspect optimized files

Grading

1. publish "tracing.jpg" (see separate lesson)
2. make a link from your process page to the JPEG