CREATING WEB PHOTO GALLERIES
You use the Create 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. This is one of the most useful pedagogical tools that Photoshop Elements supplies to teachers. The one limitation is that one needs to have a web site in order to upload it and display the Web Photo Gallery.
Photoshop Elements provides a variety of gallery styles, which you can select using the Create Web Photo Gallery command. After creating a photo gallery in Photoshop Elements, you can customize the Web pages in any Web page authoring program such as Adobe GoLive or Dreamweaver. This means you can go into those programs open the files and add customized backgrounds, headers, and most importantly add text. Some of the galleries allow for text to be added with Photoshop Elements 2 while others do not.
You can create "Simple" Galleries with all the thumbs on one full page.
(click on image to see full gallery)Or you can create Horizontal Galleries with the thumbs arranged in a row at the bottom.
(click on image to see full gallery)And you can also create Vertical Galleries with the thumbs arranged on one side.
(click on image to see full gallery)
To create a Web photo gallery:
Set up your image files
Move or copy all the images you want to appear in the Web photo gallery into one folder (called the source folder). Also, create a destination folder to contain all of the HTML and image files generated for your Web gallery.
If you want to add text to the web pages under or next to the images, you need to do this to the pictures individually in Photoshop Elements before you begin making the gallery. Open each picture in Elements by using the File Browser (Under the Windows menu) or go to File > Open and browse to the photo. After you open the image, go to File > File Info... to open the File Info dialog box. Fill in as many of the boxes as you want but most important are the Title and the Caption boxes. The Caption box allows you to add a limited amount of text depending on which gallery style you are working in. The only way to add unlimited text is to open each file in a web editing program like Dreamweaver after the Web Photo Gallery is made and add the text then. (When you are creating your Web Gallery you will need to make sure the Title and Caption boxes are checked when you open the Large Images and Thumbnails Options.) Only the following Galleries allow for text to be added: Horizontal Dark, Horizontal Frame, Simple, Table, and Vertical Frame.
Mac OSX Folder View
Choose File > Create Web Photo Gallery to open the Web Photo Gallery box.
Choose a gallery style from the Styles pop-up menu. A preview of the home page for the chosen style appears on the right side of the dialog box.
When you choose a gallery style, a preview appears on the right side of the dialog box, and options for that style (if available) appear in the lower portion of the dialog box.
To display your e-mail address in the gallery, enter your e-mail address in the textbox.
Note: Some gallery styles don't display e-mail addresses.
In the Folders section, 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. Select Include All Subfolders to include images inside any subfolders of the selected folder.
Click Destination. Then select the folder to contain optimized images and HTML pages for the gallery, and click OK (Windows) or Choose (Mac OS).
If you chose Table from the Styles pop-up menu, you can click Background to select a JPEG image for the table's background.
If the Options section is unavailable, skip to step 12. (Some
gallery styles don't have options.)
Many of the Web Gallery styles offer limited (or no further) options, and so
the Options portion of the dialog box may be dimmed. The Simple, Table,
and Frame gallery styles offer additional options for controlling the
appearance of the title banner at the top of each page, the display size of
the images, and even the color of the text and background.
To set options for the text 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. The title also appears in the browsers title bar.
For Photographer, enter the name of the person or organization that deserves credit for the photos in the gallery.
For Contact Info, enter the photographer or organization's contact information, such as an address, phone number, and e-mail address.
For Date, enter the date that you want to appear on each page of the gallery. By default, Photoshop Elements uses the current date.
For Font and Font Size, choose options for the banner text.
To set options for the gallery pages that display full-sized images, choose Large Images from the Options pop-up menu. Then do the following:
To resize the source images on the gallery pages, select Resize Images, and then choose a preset image size from the pop-up menu, or enter a specific size in pixels. To keep the width and height proportional, choose Both from the Constrain menu; to resize only one dimension choose Width or Height. To set JPEG Quality, choose an option from the pop-up menu, enter a value between 0 and 12, or drag the File Size slider (higher values produce better image quality but increase file size).
To create a border around each image, enter the width in pixels in the Border Size text box.
To ensure that your text is displayed, uncheck Filename and check the Caption and Title boxes. If you want to insert a Copyright Notice, check that box.
From the Font and Font Size pop-up menus, choose options for the label text.
To set options for the home page, choose Thumbnails from the Options pop-up menu. Then do the following:
For Size, choose a preset option from the pop-up menu or enter a specific width in pixels.
If you chose the Simple, Table, or Wet gallery style in step 2, you can enter the number of columns and rows for the thumbnails in the Columns and Rows text boxes.
To create a border around each thumbnail, enter the width in pixels in the Border Size text box.
To ensure that your text is displayed, uncheck Filename and check the Caption and Title boxes.
From the Font and Font Size pop-up menus, choose options for the label text.
To color elements in the gallery, choose Custom 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. For example, to change the background color of each page, click the Background swatch; to change the background color of the text banner, click the banner swatch.
To superimpose copyright information over the full-sized images, choose Security from the Options pop-up menu. From the Content pop-up menu, choose either Custom Text to enter text or another option to include text from the File Info dialog box. To set how the security text appears, use the Font, Font Size, Color, Opacity, Position, and Rotate pop-up menus. To choose a custom color, click the color swatch or choose Custom from the Color menu to select a color in the color picker.
Click OK to create the gallery.
Photoshop Elements places the following HTML and JPEG files in your destination folder:
A home page for your gallery named index.htm. Open this file in any Web browser to preview your gallery. You need to link your home page to this file in order to open the gallery.
JPEG images inside an images subfolder.
HTML pages inside a pages subfolder.
JPEG thumbnail images inside a thumbnails subfolder.
Additional Web files for some gallery styles.
You now need to FTP the entire folder up to your voyager account space and put a link in your site to the index.htm file in the Web Photo Gallery folder. The gallery will then open to all comers who click on the link.
Images, Web Galleries, and Text Courtesy of Jon Drinnon and Photoshop Elements Tutorial
