Creating Web photo galleries (Photoshop)

Creating Web photo galleries (Photoshop)

You use the Web Photo Gallery command to automatically generate a Web photo gallery from a set of images A Web photo gallery is a Web site that features a home page with thumbnail images and gallery pages with full-size images Each page contains links that allow visitors to navigate the site For example when a visitor clicks a thumbnail image on the home page a gallery page with the associated full-size image loads.

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 subfolders 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 more information see

Adding file information (Photoshop) on section 459

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 For more infor- mation see Adding file information (Photoshop) on section 459

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 subfolder.

HTML pages inside a pages subfolder.

JPEG thumbnail images inside a thumbnails subfolder.

Customizing and creating Web photo gallery styles

(Photoshop)

Photoshop provides a variety of styles for your Web photo 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.

About Web photo gallery styles

The Web photo gallery styles provided by Photoshop are stored in individual folders in the following location:

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:

The style folder must contain these files Caption.htm IndexPage.htm SubPage.htm, Thumbnail.htm and FrameSet.htm.

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 deter- mining 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:

bgcolor=%BGCOLOR%

To set the background color of the page to red you can replace the token %BGCOLOR%

with "FF0000."

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 For information on the tokens that you can use in the template files see "Using tokens in Web photo gallery styles on section 394

To customize an existing Web photo gallery style:

Locate the folder for the Web photo gallery style that you want to customize For the location of style folders see About Web photo gallery styles on section 392

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.

5 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 For the location of style folders see About Web photo gallery styles on section 392

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 on section 393

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. Using tokens in Web photo gallery styles

Photoshop features tokens in the HTML template files that are used to define a default Web photo gallery style. The tokens enable Photoshop to generate a gallery based on user input in the Web Photo Gallery dialog box.

When customizing or creating a gallery style you can add any token to any HTML template file with the exception of %THUMBNAILS% and %THUMBNAILSROWS% which can only appear in the IndexPage.htm file. When adding a token keep in mind that you may also need to add HTML code to the file so that the token is used correctly.

You can use the following tokens in the HTML template files:

%ALINK% Determines the color of active links.

%ALT% Determines the name of an image file.

%BANNERCOLOR% Determines the color of the banner.

%BANNERFONT% Determines the font of the banner text.

%BANNERFONTSIZE% Determines the font size for the banner text.

%BGCOLOR% Determines the background color.

%CAPTIONFONT% Determines the font for the caption below each thumbnail on the home page.

%CAPTIONFONTSIZE% Determines the font size for the caption.

%CHARSET% Determines the character set used on each page.

%CURRENTINDEX% Determines the link for the current home page.

%DATE% Determines the date that appears on the banner.

%FILEINFO% Determines the image file information for a caption.

%FILENAME% Determines the filename of an image.

%FIRSTPAGE% Determines the link for the first gallery page that appears in the right frame of a frame set.

%FRAMEINDEX% Determines the link for the home page that appears in the left frame of a frame set.

%HEADER% Determines the title of the gallery.

%IMAGEBORDER% Determines the border size of the full-size image on a gallery page.

%IMAGEPAGE% Determines the link to a gallery page.

%IMAGESRC% Determines the URL for a full-size image on a gallery page.

%LINK% Determines the color of links.

%NEXTIMAGE% Determines the link for the next gallery page.

%NEXTINDEX% Determines the link for the next home page.

%PAGE% Determines the current page location (for example page 1 of 3).

%PHOTOGRAPHER% Determines the name of the person or organization that deserves credit for the photos in the gallery.

%PREVIMAGE% Determines the link for the previous gallery page.

%PREVINDEX% Determines the link for the previous home page.

%SUBPAGEHEADER% Determines the title of the gallery.

%SUBPAGETITLE% Determines the title of the gallery.

%TEXT% Determines the text color.

%THUMBBORDER% Determines the border size for the thumbnails.

%THUMBNAILS% This token is replaced with thumbnails using the Thumbnail.htm file for the frame styles. You must place this token alone in a single non-breaking line in the HTML file.

%THUMBNAILSRC% Determines the link to a thumbnail.

%THUMBNAILSROWS% This token is replaced with rows of thumbnails using the Thumbnail.htm file for the non-frame styles. You must place this token alone in a single, non-breaking line in the HTML file.

%TITLE% Determines the title of the gallery.

%VLINK% Determines the color of visited links.

Important: When customizing or creating a template for a gallery style you should place each of the following tokens on a separate line in the HTML file %CURRENTINDEX%,

%NEXTIMAGE% %NEXTINDEX% %PAGE% %PREVIMAGE% and %PREVINDEX%. When generating specific pages of a gallery Photoshop skips lines in a template that contain tokens that don't apply to those pages For example when Photoshop generates the first gallery page it skips any line in the template that contains the %PREVIMAGE% token, which determines the link to the previous gallery page By keeping the %PREVIMAGE% token on a separate line you ensure that Photoshop doesn't ignore other tokens in the template.