Quick Web Pages from Photoshop

You may have gotten the idea by now that we're keen on automation and letting the software do the grunt work for us. The Web Photo Gallery (WPG) feature is one of the best-hidden secrets in Photoshop, and also one of our nominees for "most helpful automation tool for busy (or is that lazy?) professionals." With just a few clicks in a series of dialog boxes, you can create sophisticated, interactive web pages complete with navigational elements and feedback forms. It's the perfect solution for times when we need to get a whole mess of images up on the web quickly. Sandee uses it to quickly process a memory card's worth of images from her camera into a series of web pages that can be reviewed by her clients. Even better, she can get feedback on the pages from people viewing the pages all without her learning a single line of code!

Web Photo Gallery

To process a folder of images in Photoshop, choose File > Automate > Web Photo Gallery. To select specific images, go to Bridge and select the files you want to process. Then, from the Bridge menu, choose Tools > Photoshop > Web Photo Gallery. The Web Photo Gallery dialog box opens (Figure 17-22). Set the following options for the entire gallery:

• Styles. Use the Styles menu (Figure 17-23) to choose the appearance of and features for the web pages. As you choose each style from the menu, a preview appears on the right of the dialog box. Some of the styles have additional features. The word Feedback next to the name of a style indicates that the web page has forms where viewers can comment on the image. The word Flash indicates that the page uses Flash technology to create automatic displays of the images. You can also add music as part of these Flash displays.

  Figure 17-22. The six sections of the Web Photo Gallery dialog box.

  

  Figure 17-23. Styles menu for the Web Photo Gallery.

  

• Email. Use this field to enter the email address where you want feedback on the images to be sent. Figure 17-24 shows an example of the feedback area in the web photo gallery.

  Figure 17-24. The feedback area allows visitors to add comments and send email feedback about each image in the Web Photo Gallery.

  

• Source Images. You can choose a folder containing the images or selected images from Bridge. Click the Destination button to set the folder where you want the web images to be located.

And then go into the following six panels and customize your settings there as well:

• General Options. This menu controls the extension for the web pages, encoding, width and height of the images, and the choice to preserve metadata of the images.

• Banner Options. Use the banner fields to insert the information that will be applied to the web pages. Not all template styles will use all the fields in the Banner options.

• Large Images Options. Set the size for the main images in the gallery and choose what information should be printed as the image titles.

• Thumbnail Options. Set the options for the navigational thumbnails.

• Custom Colors Options. Use these controls to customize the colors for the background, banner, text, and links.

• Security Options. You can apply a watermark of custom text, or the information stored in the metadata for the image. For instance, if you have copyright information for the images, you can set that to be automatically applied across each image.

Publishing the Web Photo Gallery

The final step in creating your web photo gallery is publishing the files to your web server.

We often use FTP (file transfer protocol) applications such as Fetch on the Macintosh when we exchange files with each other. But for publishing files for a web site that needs to be updated, you may find Adobe GoLive is a better choice.

You can publish web files directly from Adobe GoLive using the Publish Server tab in the site window or the file browser. Simply upload the web photo gallery folder to your server. All the necessary files are contained within that folder.

The major advantage of using GoLive for web publishing is that GoLive keeps track of any files you have added or modified, and takes care of the synchronization accordingly.

Layer Comps to WPG

As simple as it is to publish a web photo gallery from a folder of images, it is just as simple to create a web photo gallery from the layer comps in a Photoshop file. (See "Layer Comps" in Chapter 12, "The Flexibility of Layers," for more information on working with layer comps.) The web photo gallery templates with the feedback forms are exceptionally useful if you want to have clients review your layer comps and send you their comments.

Open the file that has the layer comps, and then choose File > Automate > Layer Comps To WPG (Figure 17-25). Use the Browse button to choose the folder where the finished web pages should be placed. Use the Style field to type the name of the style of the web photo gallery that you want to use. (Yes, you have to manually write down the exact name of the style from the Web Photo Gallery dialog box, and then type it into the field. It's horribly primitive, but we think you can handle it.) Finally, choose Selected Layer Comps Only if you want to publish only certain layer comps.

Figure 17-25. Layer Comps To WPG dialog box in Photoshop.

When you've set all your options, click Run. The script runs and creates the web photo gallery. Once you have created the folder, you can publish it using GoLive, as described in the previous section.