Graphics School: How to Customize Web Photo Galleries in Photoshop CS3

In the last lesson we looked at the process of building Web galleries in Photoshop CS3. The result, while functional, isn’t pleasing to the eye and needs quite a bit of customization to give us a result that we can use in real life. To get a feeling for the basics of customization, we’ll begin by turning off many of the settings we used last time.

Here are the revised settings:

Styles: Simple	

Email: leave blank

General

Extension: .HTM

I’ve enabled the Width and Height Attributes for Images

Banner

Site Name: leave blank

Photographer: leave blank

Contact Info: leave blank

Date: leave blank

Large Images

Resize Images enabled: Custom – 400 pixels

Constrain: Both

JPEG Quality: Medium – 5

Border Size: Zero

Titles Use: remove all checkmarks

Thumbnails

Size: Custom – 125 pixels

Columns:  4

Rows:  3

Border Size: 0

Custom Colors

Leave at default settings.

Here are the results of the thumbnail gallery. As you can see, the appearance is more pleasing to the eye.

Here’s a sample from the large images gallery. As you can see, the presentation is also better, save for the file name at the top left and the gray banner. To use the code for your own galleries you can copy over what you need and leave the rest, or you can modify the Styles by customizing the HTML.

Customizing the HTML Code in the Photo Gallery

To create a customized web gallery you can modify one or more of the HTML template files in a web editor of your choice (I use Dreamweaver CS3).

Before you begin, make a copy of the original folder and give it a different name. When you run the Web Photo Gallery, both options will show up in the Styles drop down list. While Adobe recommends that you store your copy in the same folder, I feel that you should store it somewhere else, in a safe place, in case you need to restore the original folder settings.

On my computer, these folders are located at: C:Program Files AdobeAdobe Photoshop CS3PresetsWeb Photo Gallery. Your files may be in a different location.
In the Style folder, there are the following files: Caption.htm, IndexPage.htm, SubPage.htm, Thumbnail.htm, and FrameSet.htm. These names need to stay consistent, though it is possible to rename the Style folder. For this lesson, we will be using the Simple folder, which doesn’t contain the FrameSet.htm file.

Each file uses tokens, which govern the way that the web galleries are created. Here’s an example: <TITLE>%TITLE%</TITLE> If you’ve entered text in this parameter box in Photoshop, the program replaces the token with your text.

While you can set options in the Web Photo Gallery dialog box, you might want to change the settings directly in the template file. In this case, what I’m going to do is remove tokens from the template, so that when the file is generated only the HTML necessary for a web page will be created. Note that all the settings in the previous section are used when I activate the build process in the Web Photo Gallery.

Here’s a section of code from the IndexPage.htm file. In the above section, I’m going to remove the highlighted areas of the code and build the Web Photo Gallery again.

Here’s the resulting page. As you can see, the layout is much cleaner.

And here’s the code:

You can go considerably further than this, by changing the background colors and adding in snippets of code, such as the script you would use for displaying Google Adsense on your site. Then, when you activate the Web Photo Gallery again, it will rebuild your pages with the Adsense code already in place, which is a great time saver.

Here’s an example from a stock photography web site.

Conclusion

What I’ve shown you is one small example from one file. You can go much further than this by manipulating all the files. With this technique, you could create some really cool web galleries. Have fun!