Creating a Web Photo Gallery with Photoshop

By now, you may be so proud of your Photoshop artistry that you want to show it off to the world on a Web page. Photoshop has a crafty Web page construction tool built right in, so even if you don’t know anything about HTML — except that it’s an acronym you hear a lot — you can create a Web-based display page for your images with very little trouble. All you need to do is show Photoshop the location of the images you want to include on your Web page, select a style, enter a little information, and sit back and watch while your favorite image editor does the rest. Of course, you still need to upload the resulting Web page and images to a hosting service on the Internet and tell all your friends and colleagues where to find it.
But that’s not too difficult.

A Web gallery is a Web page that includes small thumbnails — miniature versions of your main images — and links that enable visitors to view those images in a larger size. But using thumbnails isn’t your only option. The gallery can also showcase one image at a time in large form and change the view at intervals, just like a slide show.

Planning Your Page
Creating a gallery requires using the Web Photo Gallery dialog box, which isn’t all that tough to use — after you know what your choices are. Here’s a rundown:
- Styles: Your options include a variety of horizontal and vertical layouts in several different color schemes with other options. The thumbnail image gives you an idea of the look of the gallery style.

Photoshop CS has revamped the style templates for Web galleries. The new feedback styles (see an example of one in Figure 4-1) are outstanding. Post your images or projects on the Web in a gallery format and your recipients can actually enter and save comments. They can also click the E-Mail Feedback button, which automatically launches their e-mail client and composes a message containing the feedback comments. Just be aware that putting an e-mail link on a Web page potentially can invite spam. So be sure and have your e-mail client’s spam filter on full bore if you plan on using the E-Mail Feedback feature.

- Source Images: Choosing your source images is as simple as remembering what folder and where you saved the files you want to share online. You also choose the folder where you would like your Web photo gallery files saved after they are processed. Or you can select multiple files in the File Browser, and then choose Selected Images from File Browser from the Use pop-up menu.
- Options: Your choices in the pop-up menu run the gamut (and each pop-up menu selection comes with its own set of options). Here’s a quick rundown of what you’ll find:
- General: From the Extension drop-down list, choose either .htm or .html as the file extension for your Web page.

The Web server that hosts your page may be fussy about the extension you choose for your Web page. Servers running Windows-based software may insist that pages have an .htm
extension. Those running under Unix or a similar operating system may prefer .html. Most of the time, the server software doesn’t care, and .htm does just fine.

Select Use UTF 8 Encoding for URL if you want that type of encoding. UTF-8 encoding allows for Unicode to be used on platforms designed around ASCII code, such as Unix and Linux.
Select Add Width and Height Attributes if you want that data for images displayed on the Web page.
Select Preserve All Metadata to maintain metadata info.

- Banner: The banner displays certain information about your page. Enter a name for your site, the name of the photographer, contact information, the date, and the font style and type for the banner.
- Large Images: With this option, you’re able to control how the full-size images appear when displayed. You can have them displayed in their normal size or resize them to small, medium, large, or custom-specified pixel widths. For Constrain, choose which dimension of the image you want to constrain during resizing. You can even specify JPEG compression/quality, add a border, and show or hide the filename, description, credits, title, or copyright information. You can also specify the font and font size.

You must enter the information for captions, credit, title, copyrights, and so forth for each image separately by choosing File➪File Info. In the File Info dialog box that appears, you’ll find boxes to enter all this information. You can also enter this data in the Metadata portion of the File Browser. Photoshop then saves that information with the image file and uses it with the Web Photo Gallery tool and some other specialized functions.

- Thumbnails: This option enables you to control the size of the thumbnails, the number of rows and columns used to display them, and the size of any border you want to put around the thumbnails. You can also assign what informational element you want in the title of each thumbnail. Choose from the filename, description, credits, title, and copyright information you’ve entered. Note: You can’t set rows and columns if you select the Centered Frame, Horizontal, or Simple style.
- Custom Colors: Using this option, you can select colors for the background, the text that describes the images, and any links displayed in the background, as well as the color of the banner, the active links in the banner, and any links in the banner that your visitor has clicked.
- Security: This option lets you specify any copyright and security notices that you want displayed with your images. Specify font attributes and alignment for any copyright
and security text.