Customizing Photoshop's Web Photo Gallery
Category: Design... Tech...
Posted Tuesday, July 26, 2005 at 09:54 AM [GMT-6]

Part of the fun of working as a freelance web designer is that I'm continually challenged by clients who want me to translate their vision into reality. I long ago got comfortable giving this answer to many of their questions: "I'm not sure how to do it, but I'll try to figure it out." And in the process of "figuring it out," I invariably learn something new that will help me and my clients in the future.

I experienced this again this weekend as I was gnawing on a request by a client to come up with an easy way of creating a gallery of photographic proofs that could be reviewed online by her clients. As a professional photographer, she also wanted to be able to put a watermark on each of the images.

I hit upon Photoshop's automated Web Photo Gallery feature as the best way to proceed. It's relatively simple, allows a fair bit of flexibility as far as the image processing goes, and it also has a very competent automatic watermarking feature built in. The only problem is that the default styles are, well, ugly...and we wanted something that would match the cosmetics for the rest of the site.

One option would be to edit the Gallery HTML files once they were generated, but that seemed like a lot of work. With up to 300 photos per proof gallery, even a global edit would be time-consuming.

Fortunately, there's a much better solution, one that I never knew existed: creating a new Web Photo Gallery template for Photoshop to use.

If you've used this feature of Photoshop, you know that it provides you with a choice of half a dozen or so templates. Each of these templates is stored in a directory within the Photoshop application directory; for Photoshop 7 (Mac), the templates are located in the Presets directory, inside a directory with the non-intuitive name of WebContactSheet. (In the latest version, CS, this directory name has the more appropriate title of "Web Photo Gallery.")

Creating a custom template is as simple as duplicating one of the existing template directories whose basic layout you like, renaming it to match your project, then editing the various HTML files within it to put them inside the cosmetic "wrapper" that applies the look and navigation of the site within which the gallery will reside.

Photoshop uses a series of variables to identify things like next photo, previous photo, photo index, image title, image date, and so on. In fact, these variables are very similar to those used by most blogging programs, and if you've worked with blog templates, you'll feel right at home modifying Photoshop's templates. The variables use percentage signs as opening and closing "tags," so they're easy to identify.

Once you've created your new web gallery style, it will show up in Photoshop's dropdown Styles menu the next time you use the Web Photo Gallery feature.

For more detailed explanations of the function of the various HTML files used by Photoshop, and the associated variables, take a look at this tutorial provided by Private Web Designer. With a little experimentation, you'll be able to easily create photo galleries that blend seamlessly with your website.

Technorati tags: Photoshop | Web Photo Gallery