Task 11 How to Build a Web Gallery

The Web Photo Gallery feature in Photoshop is a great way to quickly post to the Web a thumbnail directory of images that includes links to full-sized images, filenames, and the photographer's name. Anyone who wants to post a directory of images should take advantage of this feature, which is built around Photoshop's Actions technology. You place images into a single folder, set the parameters, and step back. The script runs everything right before your eyes, building the code, optimizing the images and thumbnails, and creating all the links.

1. Select Web Photo Gallery

In Photoshop, select File, Automate, Web Photo Gallery to open the Web Photo Gallery dialog box. Select a page layout from the Styles pop-up menu, observing the thumbnail on the right side of the dialog box to evaluate the results.

2. Set File Source and Destination

In the Source Images section, click the Browse button (the Select button on the Mac) and navigate to the source folder (the folder that contains all the images). Click OK (Select on the Mac) to close the Select Image Directory dialog box. Now click the Destination button and navigate to the destination folder (where the final files and HTML documents will be stored). Click OK (Select on the Mac) to make your selection.

3. Name and Date the Site

From the Options menu, select Banner. In the bottom section of the dialog box, fill in all appropriate fields, listing the site name, date, and photographer information. You can also select the date. The Font and Font Size options can be specified only with some site styles.

4. Resize Images

From the Options menu, select Large Images to see more options. Enable the Resize Images check box if you want to resize the main images that open from the thumbnails. With this box enabled, select the image size from the adjacent pop-up menu and the JPEG compression rate from the JPEG Quality pop-up menu. To enter a specific JPEG compression value, select the quality setting from the JPEG Quality menu.

5. Set the Page Layout

Select Thumbnails from the Options pop-up menu. To use the filename or the text stored in the File Info section as a caption, enable the appropriate check box. Some title options are not available for all site styles.

6. Build and Test the Site

Click OK to build the Web Photo Gallery site. Photoshop runs the script on its own, opening files, compressing, and saving everything to the source folder you specified in step 2. When the script is complete, Photoshop launches the Web Photo Gallery in a browser window for you to test. Click the thumbnails to test the links and ensure that everything is listed properly.

How-To Hints

File Structure

Photoshop creates several files and folders within the destination folder you designated to support the Web Photo Gallery. All the images are stored in an images folder; thumbnails go into a thumbnails folder. A separate HTML page also is created for each image and is stored in a folder called pages. The main gallery page is called index.htm. There can also be other support files, depending on the site style you select. When posting your gallery page online, be sure to upload the entire contents of the destination folder, including its subfolders and their contents, to your server.

Custom Colors

Select Custom Colors from the Options menu to specify the text, link, background, and banner text colors. Click each color swatch to launch the Color Picker and select the desired color. Enable the Only Web Colors check box in the Color Picker to restrict the choices to web-safe colors.