Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Lesson 8


CIS 152 WEB DESIGN I
Lesson 8: Slicing pixel elements in ImageReady
Instructor: Paul Young

 

 
 

Objectives

 

  

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

 

 
 

Discussion

 

  

ImageReady is Photoshop's sister application designed for web production. Ideally, most creative layout should be completed in Photoshop before jumping to ImageReady (not Photoshop tools will work in ImageReady).

 

 
 

Procedure

 

  

Overview: Modify web page mock-up in Photoshop. Jump to ImageReady for slicing and optimizing.

Prepping for the lesson

  1. duplicate "lesson7-sliced.psd"
  2. rename "template.psd" (location: cis152/prep/lesson8)
  3. open "template.psd" in Photoshop
  4. view > clear guides
  5. view > clear slices
  6. delete unneeded layers
  7. practice Photoshop navigation keyboard shortcuts: space=hand; space+ctrl=zoom in; space+alt+ctrl= zoom out; ctrl+zero=fit in window

Creating the inside page

  1. adjust size and position of logo art
  2. adjust position and line breaks of text
  3. browse to www.lipsum.com and copy some text
  4. paste text (text tool: drag to draw text frame)
  5. make text verdana 11/18, light blue (anti-alias=none)
  6. commit to edits in type layer (ENTER on numeric keypad)
  7. add triangle with line tool (filled region, weight=10, arrow on end): draw horizontal line
  8. duplicate triangle 5x (move tool+option+shift)
  9. layer > merge down (ctrl+E)
  10. match color/layer style of "program" layer
  11. save
  12. file > save for web (location: upload/lesson8_html); publish
  13. grading: make links from your personal web site to this lesson

Slicing and optimizing in Photoshop

  1. draw guides for cropping
  2. hide "browser" layer
  3. crop live area
  4. file > save for web "tracing.jpg" (location: upload/lesson9_html/images)
  5. crop logo area
  6. file > save for web "upperRight.jpg" (location: upload/lesson9_html/images)
  7. undo
  8. crop navigation area, save as "links.psd"
  9. jump to ImageReady

Slicing and optimizing in ImageReady

  1. create rollover effect: duplicate hue/saturation layer, adjust color
  2. draw guides for slicing (view > rulers)
  3. slices > make slices from guides
  4. slice select tool: select > all slices
  5. window > optimize: settings=jpeg high
  6. choose 2-up tab
  7. reveal "normal" state
  8. save optimized as "links.html" (html & images, all slices)
  9. reveal "over" state
  10. save optimized as "links-over.jpg" (images only, all slices)
  11. reveal "hit" state
  12. save optimized as "links-hit.jpg" (images only, all slices)
  13. save
  14. repeat with "home-sliced.psd"
  15. inspect optimized files

 

 

BACK TO TOP

______________________________

Last updated: 9/18/06 • Webmaster: Paul Young

 
 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts