Archived copy for reference only
 

 

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

Interactive Design Exercises
Web Design (Part 2 of 5): Optimizing Web Images in Photoshop/Dreamweaver

(Archived from 2019)

Objective

To learn image optimization techniques. To learn web image gallery design approaches by recreating this web site.

Discussion

A major issue with web design is file size and download time. Pixel elements can easily bloat a web site unless they are optimized for for the web. Fortunately, Photoshop has very good image optimization tools to help reduce file sizes.

Procedure

Overview: Download images. Resize images and optimize for web publishing. Import optimized images into Dreamweaver and publish. Note: replace bold with personalized info.

Resizing images in Photoshop

  1. download starter files (location: faa999/class/html/exercises/dm_pix)
  2. note file sizes, note dimensions
  3. open "jvalazquez.jpg" in Photoshop
  4. practice Photoshop navigation keyboard shortcuts: space=hand; space+cmd=zoom in; space+opt+cmd= zoom out; cmd+zero=fit in window
  5. image > adjust > levels
  6. image > adjust > hue/saturation
  7. image > image size: 640x480 (for gallery slide show)
  8. filter > sharpen > unsharp mask (radius=1, threshold=2, amount=??)
  9. file > save for web
  10. settings=JPEG high (check download time)
  11. click SAVE "jvalazquez-640.jpg" (images only)
  12. image > image size: 200x150 (for gallery thumbnails)
  13. file > save for web: "jvalazquez-200.jpg" (settings=JPEG medium)
  14. close Photoshop file (do NOT save)
  15. repeat with other gallery images

Creating a spacer image in Photoshop

  1. file > new: 1x1 (bg=transparent)
  2. file > save for web: GIF 32 "spacer.gif"

Importing images into Dreamweaver

  1. launch Dreameaver
  2. define a new site (site > new site): name=dm_pix,
    local root folder=class/html/exercises/dm_pix
  3. open "program.html"
  4. insert > image "maya_logo.jpg", repeat with other logo
  5. preview in browser (opt+F12 and cmd+F12)
  6. open "gallery.html"
  7. insert > table (rows=5, col=3; all other attributes=blank)
  8. drag gallery thumbnail images into column 1 and 3
  9. drag "spacer.gif" into row 2, column 2 (make size 30x20)
  10. repeat with row 4, column 2
  11. preview in browser (opt+F12 and cmd+F12)
  12. open "index.html"
  13. insert > table (rows=1, cols=7; all other attributes=blank)
  14. choose 4 thumbnail images and drag them into col 1, 3, 5, 7
  15. preview in browser (opt+F12 and cmd+F12)
  16. add <alt> tags

Adding javascript for pop-up windows

  1. open "gallery.html"
  2. select first image
  3. window > behaviors: add "open browser window": "1.html" (720x560)
  4. repeat with other images

Creating gallery pages

  1. file > new "1.html"
  2. insert > image "jvalazquez-640.jpg"
  3. add text "<< PREVIOUS", "CLOSE WINDOW", "NEXT >>"
  4. add 4 non-breaking spaces between each link ("&nbsp;")
  5. link "previous" to "6.html"
  6. link "next" to "2.html"
  7. link "close window" to "Javascript:onClick=self.close()"
  8. add "close window" link as a snippet (window > snippets)
  9. change title to "Parkland College Digital Media"
  10. save, close
  11. duplicate "1.html" to make "2.html", etc
  12. swap image (double-click)
  13. change links
  14. preview "gallery.html" in browser (opt+F12 and cmd+F12)
  15. test and troubleshoot your site

Grading

  1. publish site (see separate lesson)
  2. make a link from your process page to this assignment

BACK TO TOP
Last updated: 5/7/21