Web photo gallery home page and loaded gallery page
Photoshop provides a variety of styles for your gallery, which you can select using the Web Photo Gallery command. If you are an advanced user who has knowledge of HTML, you can also customize a style by editing a set of HTML template files or create a new style.
To create a Web photo gallery:
- Choose File > Automate > Web Photo Gallery.
- Under Site, do the following:
- Choose a style for the gallery from the Styles pop-up menu. A preview of the home page for the chosen style appears in the dialog box.
- Enter the email address that you want to display as the contact for the gallery.
- Choose an extension for the generated files from the Extension pop-up menu.
- Under Folders, do the following:
- Click Browse (Windows) or Choose (Mac OS). Then select the folder containing the images that you want to appear in the gallery, and click OK (Windows) or Choose (Mac OS).
- Select Include All Subdirectories to include images inside any sub folders of the selected folder.
- Click Destination, select the destination folder that you want to contain the images and HTML pages for the gallery, and click OK (Windows) or Choose (Mac OS).
- To set options for the banner that appears on each page in the gallery, choose Banner from the Options pop-up menu. Then do the following:
- For Site Name, enter the title of the gallery.
- For Photographer, enter the name of the person or organization that deserves credit for the photos in the gallery.
- For Contact Info, enter the contact information for the gallery, such as a telephone number or a business address.
- For Date, enter the date that you want to appear on each page of the gallery. By default, Photoshop uses the current date.
- For Font and Font Size, choose options for the banner text.
- To set options for the gallery pages, choose Large Images from the Options pop-up menu. Then do the following:
- To have Photoshop resize the source images for placement on the gallery pages, select Resize Images. Then choose an option for the image size from the pop-up menu or enter a size in pixels. For Constrain, choose which dimensions of the image you want to constrain during resizing. For JPEG Quality, choose an option from the pop-up menu, enter a value between 0 and 12, or drag the slider. A higher value results in better image quality but larger file size.
- For Border Size, enter the width of the border around the image in pixels.
- For Titles Use, specify options to display caption information under each image. Select Filename to display the filename, or select Caption, Credits, Title, and Copyright to display caption text drawn from the File Info dialog box.
- For Font and Font Size, choose options for the caption text.
- To set options for the home page, choose Thumbnails from the Options pop-up menu. Then do the following:
- For Size, choose an option for the thumbnail size from the pop-up menu or enter a value in pixels for the width of each thumbnail.
- For Columns and Rows, enter the number of columns and rows that you want to be used to display the thumbnails on the home page. This option doesn't apply to galleries that use the Horizontal Frame Style or Vertical Frame Style.
- For Border Size, enter the width of the border around each thumbnail in pixels.
- To set options for colors of elements in the gallery, choose Customize Colors from the Options pop-up menu. To change the color of a particular element, click its color swatch, and then select a new color using the Color Picker. The Background option lets you change the background color of each page. The Banner option lets you change the background color of the banner.
- To set options to display text to appear over each image as an anti-theft deterrent, choose Security from the Options pop-up menu. Then do the following:
- For Use, select Custom Text to enter customized text. Select Filename, Caption, Credits, Title, or Copyright to display text drawn from the File Info dialog box.
- Specify font, color, and text alignment options. To place the text on the image at an angle, choose a rotation option.
Photoshop places the following HTML and JPEG files in your destination folder:
-
A home page for your gallery named index.htm or index.html depending on the Extension options. Open this file in any Web browser to preview your gallery.
-
JPEG images inside an images sub folder.
-
HTML pages inside a pages sub folder.
-
JPEG thumbnail images inside a thumbnails sub folder.
About Web photo gallery styles
Windows:
Program Files/Adobe/Photoshop 7.0/Presets/WebContactSheet
Mac OS:
Adobe Photoshop 7.0/Presets/WebContactSheet
The name of each folder in this location appears as an option in the Styles pop-up menu in the Web Photo Gallery dialog box. Each folder contains the following HTML template files, which Photoshop uses to generate the gallery:
Caption.htm
Determines the layout of the caption that appears below each thumbnail on the home page.
FrameSet.htm
Determines the layout of the frame set for displaying pages.
IndexPage.htm
Determines the layout of the home page.
SubPage.htm
Determines the layout of the gallery pages with full-size images.
Thumbnail.htm
Determines the layout of the thumbnails that appear on the home page.
Each template file contains HTML code and tokens. A token is a text string that is replaced by Photoshop when you set its corresponding option in the Web Photo Gallery dialog box. For example, a template file may contain the following TITLE element that uses a token as its enclosed text:
<TITLE>%TITLE%</TITLE>
When Photoshop generates the gallery using this template file, it replaces the token %TITLE% with the text that you entered for Site Name in the Web Photo Gallery dialog box.
To better understand an existing style, you can open and study its HTML template files using an HTML editor. Because only standard ASCII characters are required to create HTML documents, you can open, edit, and create these documents using a plain-text editor such as Notepad (Windows) or SimpleText (Mac OS).
Customizing Web photo gallery styles
You can customize an existing Web photo gallery style by editing one or more of its HTML template files. When customizing a style, you need to follow these guidelines so that Photoshop can generate the gallery correctly:
- You can rename the style folder but not the HTML template files in the folder.
- You can have an empty Caption.htm file, and place the HTML code and tokens determining the layout of the caption in the Thumbnail.htm file.
- You can replace a token in a template file with the appropriate text or HTML code, so that an option is set through the template file rather than through the Web Photo Gallery dialog box. For example, a template file may contain a BODY element with the following bgcolor attribute that uses a token as its value:
- You can add HTML code and tokens to the template files. All tokens must be in uppercase characters, and begin and end with the percent (%) symbol.
bgcolor=%BGCOLOR%
To set the background color of the page to red, you can replace the token %BGCOLOR% with "FF0000."
To customize an existing Web photo gallery style:
- Locate the folder for the Web photo gallery style that you want to customize.
- If you don't want to overwrite an existing style, create a copy of the style folder, and store it in the same location on your hard drive as the existing style folders.
- Using an HTML editor, open one of the HTML template files located inside the style folder.
- Customize the HTML template file using the guidelines for customization outlined in this section, and save the file.
- Repeat steps 2, 3, and 4 to customize other HTML template files in the style folder.
When you have finished, you can create a gallery using the customized style. The customized style appears as an option in the Styles pop-up menu in the Web Photo Gallery dialog box
Creating new Web photo gallery styles
You can create a new Web photo gallery style by creating the necessary HTML template files that are used by Photoshop to generate a gallery.
To create a new Web photo gallery style:
Locate the folder that stores the existing Web photo gallery styles.
Create a new folder for the new style, and store it in the same location on your hard drive as the existing style folders.
Using an HTML editor, create the necessary HTML template files and store them inside the style folder. When creating the template files, make sure that you follow the guidelines for customization outlined in Customizing Web photo gallery styles above.
When you have finished, you can create a gallery using the new style. The new style appears as an option in the Styles pop-up menu in the Web Photo Gallery dialog box.