To continue our Photoshop theme I thought it would be fun to create a Web Photo Gallery in Photoshop. For our practice session you can use the photos that we worked with yesterday during the “Heal Thy Self” lecture or I have a folder of cute doggie images you can use at J:\webclass\galleryoriginals.

Here are sample two sample galleries Gallery 1 and Gallery 2 so you will have an idea of what we will create.

Notes: If you want your images to appear in a certain order you must rename them appropriately; images will be displayed in alphabetical order in the gallery. If you plan to display this gallery on f2o.org you should set the file extension to .html under the General Options in the gallery wizard.

1. Open Photoshop
2. Click File > Automate > Web Photo Gallery. The Web Photo Gallery wizard will appear
3. From the Styles drop down list select the gallery style you would like to use
4. The email address is optional
5. Under Source Images click the Browse button and navigate to the folder that contains the images you would like to display in your photo gallery (for this exercise navigate to F:\Photoshop for Digital Photographers\Version CS)
6. Click the Destination button and navigate to drive F:\Photoshop for Digital Photographers. Click the Make New Folder button, type samplegallery as the folder name and click OK
7. Under Options select Banner; complete the site name, photographer, and contact information boxes
8. Under Options select Large Images - here you can make adjustments to the size and quality of the image. You can also add borders to the images and titles and descriptions
9. Under Options select Thumbnails - the settings are similar to the large images; adjust the size and appearance of the thumbnail images
10. Depending on the gallery style that you selected you can also set custom colors in the Options and there are also security settings for the gallery
11. After completing the Web Photo Gallery wizard, click OK and the images will begin processing (resizing)

Once the gallery has completed processing it will display in your default web browser.

For students who do not have an f2o.org hosting account already, today is the day to sign up. Please visit the f2o.org sign up page to sign up for your free account. Be sure to ask me for specific sign up details.

After completing this workshop you should correct the photos that you took last Tuesday for the scavenger hunt and create a gallery with Photoshop. On Friday I will conduct a workshop on uploading the galleries to f2o.org and you can share your galleries with your classmates.

You can edit your galleries in Dreamweaver or your favorites text editor if you would like to make changes to the appearance of your gallery.

Open the index.html file to investigate the HTML code in Dreamweaver. Switch to split view and examine the code that Photoshop generated. Photoshop creates a frameset in the index.html file. The index.html frameset uses files located in the pages folder and a file called ThurmbnailFrame.htm. The actual thumbnail images are located in the folder called thumbnails and the larger images are in the folder called images. If you would like to inspect the gallery code, click this link and then click View > Source in Internet Explorer (you can also use Firefox). To view the source code for individual frames, right click the frame and select View Source from the menu.

While inspecting the code I found that the gallery was linked to an external css file called galleryStyle.css in the images folder. You can open the galleryStyle.css file and adjusted the css styles to your liking in Dreamweaver’s CSS Styles Panel or in your text editor.

In order to add file names, descriptions, credits, etc. to the gallery pages you can open the individual files located in the pages folder in Dreamweaver. (I added this item to my task list to do later).