Objective

To learn to web site production techniques by example. To learn how to generate easy-to-manage slide shows using Photoshop's built-in HTML generator by recreating this web page.

Discussion

Photoshop has a variety of web galleries that can be generated. In this exercise, we'll generate a HTML-based slide show from Photoshop and then modify it to our needs.

In this sample web page, the live area of the slide show images are 500x480 px. To control the position of the images, each slide has been prepped in Photoshop to be at least 480px in height.

Procedure

generating the slide show

1. download starter files, move files to "projects_html"
2. launch Photoshop
3. examine "gallery_prep" folder: note dimensions
4. file > automate > web photo gallery:
   style=simple
   browse for folder "gallery_prep"
   destination = new folder "slides"
5. recommended options:
   general = .html
   banner = blank (space), font size=1 (throughout)
   large images = no numeric links, height 480, title none, quality high
   thumbnails = 100, title none, 3 col x 20 rows
   custom colors = all black

embedding the slide show

1. open "contact.html", save as "portfolio.html"
2. select <div#col3>, delete
3. select <div#col2>, change id=portfolio
4. select <div#text>, delete
5. insert > html > frames > iframe
6. edit code: <iframe src ="slides/index.html" scrolling="no" height="750" width="520" frameborder="0" >
7. modify menu
8. save, file > preview in browser (opt+F12)

replacing the thumbnail images

1. open "gallery_prep/01.jpg" in Photoshop
2. crop tool options: 100x100px
3. crop art
4. file > save for web (in "slides/thumbnails" folder)
5. repeat for all images
6. open "slides/index.html" in Dreamweaver
7. reset image dimensions
8. select <table>: cell space = 40
9. new CSS rule (this document): "table img" (padding: left/right=15)
10. delete 3 <br> in banner area
11. replace named anchors (use reguar expresssion = yes):
    find: <A name=\w\w
    replace: <A
    tip: in help menu, search for "regular expression"
12. save, file > preview in browser (opt+F12)

tweaking the slide show

1. open "slides/images/previous.gif" in Photoshop
2. image > mode > RGB
3. fill bg=black
4. line tool (2pt, arrowhead=start): draw arrow
5. fill art with light gray
6. file > save for web
7. repeat with "next.gif" and "home.gif"
8. open "slides/pages/01.html" in Dreamweaver
9. modify navigation table, modify links
10. repeat with "slides/pages/12.html"
11. publish the finshed page as a link from your personal projects page for grading