Welcome to Russell Proulx's Tips

Customizing Photoshop Web Photo Gallery HTML Styles
Page 1 - Page 2 - Page 3

Note: I use a PC and will be using Adobe Photoshop CS2 and Macromedia (now Adobe) Dreamweaver MX 2004 running on Windows XP-Pro as the reference for this tutorial. Everything explained herein can easily be adapted to the Mac and anyone familiar with that OS should have no problem adapting the methods I explain. This tutorial uses HTML styles ONLY and does not discuss any Flash based browsers nor image browsers generated using Adobe Lightroom..
The custom Web Photo Gallery style described in this tutorial was used to generate a portfolio browser for Lynda Schneider Granatstein's website. Click on the browser to visit.

A brief overview of Photoshop's Web Photo Gallery feature:

Photoshop has offered the ability to automate the creation of website image browsers since version v7. The feature is in the Automate section and is called Web Photo Gallery. It offers the ability to process a Source folder full of images and create a Web photo gallery of the images in a Destination folder.

There are a number of browser styles to choose from via a pull-down menu and you can customize a number of design options using the various configuration menus. These include settings such as title, size of the large images, size of thumbnails, font size and colour, number of columns and rows, metadata to be included as well as copyright and photographer contact info. The choices will vary according to the style design. As Photoshop has evolved from v7 to CS (v8) to CS2 (v9) and the most recent CS3 (v10) the Web Photo Gallery feature has slowly improved. With the advent of Adobe Bridge we can now generate Web Photo Galleries using selected images directly from within the Bridge content area (the thumbnail browser). For many people the options provided by Adobe will meet their needs. But the methods used by the styles to generate the website is very simple and can easily be customized to meet specific needs or to eliminate fix commonly used settings to avoid the need to repeat them.

There isn't much documentation on customizing Adobe Photoshop Web Photo Gallery styles available except what's in the Photoshop help files. But customizing customizing Web Photo Gallery styles with Dreamweaver is very easy and offers impressive possibilities:

  • Generate image browsers within your existing website design
  • Add text to images automatically using their embedded metatags
  • Modify the font's html code (size, colour and weight) or apply CSS style sheets
  • Update large image galleries directly from Adobe Bridge

Let's get started ...

What are Web Photo Gallery style templates and where are they?

The templates files are in the Program Files\Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery directory. Before beginning to customize a web style you should make a copy (within the same Web Photo Gallery folder) of the "Simple" folder and its contents. Name the copy something like Simple_mod1. This is the name that will then appear on the Web Gallery styles pull-down menu in Photoshop.

Note is that there are 4 parts to the 'Simple' style:


Page 2 - Integrating the styles into your website design

© Copyright Russell Proulx 2007-2010 All rights reserved.
No reproduction permitted without the prior consent of Russell Proulx.

Disclaimer: Any techniques, advice and opinions offered on this website are a demonstration of my own personal methods of performing certain tasks. While I try to insure there are no errors, please understand that using these techniques is done at your own risk. I make no guarantee whatsoever and I will not be responsible if anything goes wrong. I assume you have a good working knowledge of your camera, computer and any software I discuss herein and have appropriate safeguards in place to protect yourself in the event that something goes wrong. - Russell Proulx