Photoshop can generate a web photo gallery from a set of images. This type of gallery is an interactive interface for viewing images using a web browser. By posting the gallery on a web server, you maintain a centralized storage location for the images on the Internet. E-mail a gallery link to your clients, team members, or consultants, or make the URL available to the general public to suit your project's needs.
TIP A network administrator can password protect a gallery URL if you want to maintain confidentiality.
A series of gallery styles comes with Photoshop CS; check the following folder:
C:\Program Fi1es\Adobe\Photoshop CS\Presets\Web Photo Gallery
These are customizable HTML templates that web designers can alter to adjust the look of the web photo gallery.
Let's create a web photo gallery of images from earlier chapters of this book.
1. Open the File Browser (press Shift+Ctrl+O).
2. Using the controls in the File Browser, navigate to the Web Photo Gallery folder under Chapter 9 on the companion CD.
3. The sequential order of the thumbnail images in the File Browser determines the order images will appear in the web photo gallery. Drag the thumbnails to reorder the images if desired. Arrange the "before" images earlier than their corresponding "after" images in the File Browser. Figure 9.15 shows one such sequence.
Organizing thumbnails in the File Browser
4. Press Ctrl+A to select all the thumbnails in the File Browser. You can optionally use the Ctrl key to deselect individual images to exclude them from the web photo gallery. Choose Automate > Web Photo Gallery in the File Browser to open the Web Photo Gallery dialog box.
5. Select Horizontal Neutral from the Styles drop-down list box. Notice the preview image on the right side of the Web Photo Gallery dialog box. Type your contact e-mail address in the E-Mail text box (optional). Click the Use drop-down list box, and choose Selected Images From File Browser. You can alternately select an entire folder for inclusion by clicking the Browser button. Click the Destination button, and select a folder on your hard drive where you want Photoshop to place the web files it will create.
NOTE You can control the order of images in a web photo gallery by using selected images from the File Browser; they appear in the order you see them in the File Browser. However, you cannot do this by selecting an entire folder in the Web Photo Gallery dialog box.
6. Under the General options, change the Extension to .html if your web server runs Linux or to .htm if your web server runs a version of Windows Server. Choose Banner from the Options drop-down list box. Type Enhancing CAD Drawings with Photoshop into the Site Name text box. Type your name in the Photographer text box if desired. Click OK to close the Web Photo Gallery dialog box (see Figure 9.16).
7. Be patient as Photoshop automatically opens, resizes, and captures each image in turn. After a few moments, your web browser will launch (see Figure 9.17). Preview your new photo gallery locally. In the example, you can click each of the thumbnails at the bottom of the gallery to jump to a larger version above. Each larger image has navigation arrows that allow you to navigate between images in the gallery. If you'd like to make any changes, repeat steps 3 through 6 until you are satisfied with how the gallery functions.
The Web Photo Gallery dialog box
Photoshop opens your gallery in a browser.
Photoshop opens your gallery in a browser.
NOTE The logo in Figure 9.17 was customized. You can change it and much more in the template's HTML code. HTML coding—and therefore web gallery customization—is beyond the scope of this book. Refer to HTML Complete (Sybex, 2003) for more in-depth information about the Hypertext Markup Language.
8. Use an FTP program to upload the files and subfolders Photoshop generated for the gallery to your web server. Look in the destination folder you selected in step 5 to locate the relevant files and folders.
TIP Check out filezilla.sourceforge.net for a full-featured open-source FTP client and FTP server for Windows.
9. Use an Internet browser and surf to the URL of the gallery to verify that it is online. E-mail the URL of the new gallery to its intended audience.
10. Close the File Browser and web browser.
Was this article helpful?