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
- download starter files (location: faa999/class/html/exercises/dm_pix)
- note file sizes, note dimensions
- open "jvalazquez.jpg" in Photoshop
- practice Photoshop navigation keyboard shortcuts: space=hand;
space+cmd=zoom in; space+opt+cmd= zoom out; cmd+zero=fit in
window
- image > adjust > levels
- image > adjust > hue/saturation
- image > image size: 640x480 (for gallery slide show)
- filter > sharpen > unsharp mask (radius=1, threshold=2, amount=??)
- file > save for web
- settings=JPEG high (check download time)
- click SAVE "jvalazquez-640.jpg" (images only)
- image > image size: 200x150 (for gallery thumbnails)
- file > save for web: "jvalazquez-200.jpg" (settings=JPEG medium)
- close Photoshop file (do NOT save)
- repeat with other gallery images
Creating a spacer image in Photoshop
- file > new: 1x1 (bg=transparent)
- file > save for web: GIF 32 "spacer.gif"
Importing images into Dreamweaver
- launch Dreameaver
- define a new site (site > new site): name=dm_pix,
local root folder=class/html/exercises/dm_pix
- open "program.html"
- insert > image "maya_logo.jpg", repeat with other logo
- preview in browser (opt+F12 and cmd+F12)
- open "gallery.html"
- insert > table (rows=5, col=3; all other attributes=blank)
- drag gallery thumbnail images into column 1 and 3
- drag "spacer.gif" into row 2, column 2 (make size 30x20)
- repeat with row 4, column 2
- preview in browser (opt+F12 and cmd+F12)
- open "index.html"
- insert > table (rows=1, cols=7; all other attributes=blank)
- choose 4 thumbnail images and drag them into col 1, 3, 5, 7
- preview in browser (opt+F12 and cmd+F12)
- add <alt> tags
Adding javascript for pop-up windows
- open "gallery.html"
- select first image
- window > behaviors: add "open browser window": "1.html" (720x560)
- repeat with other images
Creating gallery pages
- file > new "1.html"
- insert > image "jvalazquez-640.jpg"
- add text "<< PREVIOUS", "CLOSE WINDOW", "NEXT >>"
- add 4 non-breaking spaces between each link (" ")
- link "previous" to "6.html"
- link "next" to "2.html"
- link "close window" to "Javascript:onClick=self.close()"
- add "close window" link as a snippet (window > snippets)
- change title to "Parkland College Digital Media"
- save, close
- duplicate "1.html" to make "2.html", etc
- swap image (double-click)
- change links
- preview "gallery.html" in browser (opt+F12 and cmd+F12)
- test and troubleshoot your site
Grading
- publish site (see separate lesson)
- make a link from your process page to this assignment