About Web Photo Galleries

Preparing a gallery of photos for use on the Web can be repetitive, tedious work. You have to resize and format each image, one at a timea lengthy process. Luckily, Photoshop Elements eliminates this drudgework for you with its automated Web Photo Gallery feature (Figure 12.45). When you create a Web photo gallery, Photoshop Elements instantly opens a group of image files, resizes them to identical dimensions, and creates smaller thumbnail versions. Photoshop Elements also creates HTML code for each Web page in the gallery. (HTML stands for Hypertext Markup Language and is the code that describes the size, location, color, and other attributes of any and all objects and text on a Web page.) All of the images and HTML files are stored in a designated folder on your hard drive. Once the photo gallery is completed, you can then view the gallery on your hard drive or on the Web. If you have a digital camera full of images that you can't wait to share over the Web, this feature can help you get them posted online quickly. (See the color plate section of this book for a full-color view of a Web photo gallery.)

Figure 12.45. Create a Web gallery of your favorite digital photos with Photoshop Elements' automated Web Photo Gallery feature.

You can create two main types of Web galleries, each with different ways of navigating through the images. All of the photo gallery styles available in Photoshop Elements fall into one of these two types:

  • One gallery type consists of a main Web page with a grid of image thumbnails. To navigate, you click on a thumbnail to display the full-sized image on its own page. Each full-sized image page contains buttons to move to the previous image, the next image, or back to the main gallery page. The Simple gallery style is an example of this type (Figure 12.46).

    Figure 12.46. In a Web gallery, you can navigate backward or forward through the images or go back to the main page.

  • The other gallery type consists of a main page divided into two areas, or frames. When you click a thumbnail, the full-sized image displays in the other frame. To view different full-sized images, you click the different thumbnails. The Horizontal Neutral style is an example of this type (Figure 12.47).

    Figure 12.47. In galleries like Horizontal Neutral, thumbnails are in one frame, and full-sized images appear in the other frame.

When you save a group of images as a Web photo gallery, Photoshop Elements creates the following items and assembles them into one main folder:

  • A main HTML page (index.htm)

  • A folder of full-sized JPEG images

  • A folder of thumbnail images

  • A folder of linked HTML pages

  • Navigation buttons for your HTML pages

To create a Web photo gallery


On the shortcuts bar, click the Create button to launch the Photoshop Elements Organizer (Figure 12.48).

Figure 12.48. The Create button opens the Creation Setup window.


In the Select a creation type column of the Creation Setup window, select HTML Photo Gallery, and then click OK (Figure 12.49).

Figure 12.49. Select HTML Photo Gallery from the bottom of the creation type column.

The Adobe HTML Photo Gallery dialog box opens (Figure 12.50).

Figure 12.50. The Adobe HTML Photo Gallery dialog box.


In the lower-left corner of the Adobe Web Photo Gallery dialog box, click the Add button (Figure 12.51).

Figure 12.51. The Add button opens the Add Photos dialog box.

The Add Photos dialog box opens.


In the Add Photos From area of the Add Photos dialog box, select from one of the five source options (Figure 12.52).

Figure 12.52. The Add Photos dialog box makes it easy to choose which photos to include in your slide show.

For this example I've chosen some photos of roses that I previously assembled into a collection.

For more information about the ways that you can organize and catalog your photos, see Chapter 13, "The Photo Organizer."


Click to select the photos that you want to include in your Web photo gallery, and then click OK.

Thumbnail views of the photos you selected appear in the Photos area of the Adobe Web Photo dialog box (Figure 12.53).

Figure 12.53. The Adobe HTML Photo Gallery dialog box gives you a visual list of all of the photos you selected to include in your gallery.


From the Gallery Style drop-down menu, select a Web gallery template (Figure 12.54).

Figure 12.54. You can choose from over 30 different styles of preformatted Web gallery templates.

When you choose a gallery style, a preview appears just below the Gallery Style drop-down menu.


In the center of the dialog box, below the Web page preview, click the four tabs to enter information and settings for your Web photo gallery (Figure 12.55):

  • In the Banner section, enter and style text for various items (like Title and E-mail Address information) that will appear on the Web photo gallery pages.

  • In the Thumbnails section, set the size of the photo thumbnails, as well as style properties for the thumbnail captions.

  • In the Large Photos section, set size and quality settings for the large photos, as well as style properties for the large photo captions.

  • In the Custom Colors section, set colors to override the Adobe Web Gallery defaults for the background, banner, text, and links.

Figure 12.55. You can customize the look of your Web gallery from different sets of options you access by clicking the option tabs.


In the Destination section at the bottom of the dialog box, click the Browse button to select a location for your final Web gallery files, and then enter a name for the Web gallery folder that Photoshop Elements will automatically create (Figure 12.56).

Figure 12.56. Select the location on your computer where you would like Photoshop Elements to place your rendered Web gallery files.


Click Save to create your Web photo gallery.

Depending on the number of images, the Web gallery creation can take as long as a minute or two. Once the process is finished, Photoshop Elements will display the gallery in your Web browser.


  • The small thumbnail views of the different galleries in the Web Photo Gallery dialog box aren't really big enough to give you a good idea of what the final gallery will look like, but you can quickly create a series of galleries with just one or two images and then save them to use as a visual reference when creating your final galleries.

  • Once you create and save your Web gallery, all of the images and HTML files are stored in a folder on your hard drive. Since all ISPs (Internet Service Providers) operate in a slightly different fashion, you'll want to contact your ISP directly before you try posting your gallery to the Web. They should be able to provide you with complete instructions and parameters for uploading and displaying your Web gallery files.

Photoshop Elements 4 for Windows. Visual QuickStart Guide
Photoshop Elements 4 for Windows (Visual Quickstart Guide)
ISBN: 0321423356
EAN: 2147483647
Year: 2003
Pages: 178

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net