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:
Caption.htm
SubPage.htm
IndexPage.htm
Thumbnail.htm
Page 2 - Integrating the styles into your website design
|
