Exercise: Create a Web Photo Gallery using Photoshop
Prepared by mzeng for 60651 class (step-by-step)
1. Create folders under the Windows Explorer to include the images to be posted on the
Note that both the Contact Sheet (an image) and the Web Photo Gallery index page will arrange
the images according to the filenames.
a) Arrange image files according to your need.
b) Change file names so that the images will be arranged according to the order you give.
c) You may want to make a Contact Sheet as a record of the images and their filenames. (File--
>Automate-->Contact Sheet) This is especially necessary when you deal with a great number of
2. Using Photoshop to create a photo gallery
File --> Automate -->Web Photo Gallery
On the right side you can see the sample style. As you make choices with the styles, samples will
change. Choose the style you want.
Choose "Browse" to find the folder where your images are currently stored. Choose
"Destination" folder for where you want the new web pages stored.
You can customize a number of settings using the "Options" menu, including thumbnail and
image sizes, banner and photographer's name, source folder, and destination folder.
Click OK to generate the Gallery. The software will automatically make display JPG images
thumbnail images as the sizes you chose. After it is finished, the web browser will be open
All files are automatically created and stored in the directory you identified as destination.
Usually this include:
index.html page – always click this one to start
another html page if you choose a frame style.
[images] folder – which contains all display images
[thumbnails] folder – which contains all thumbnail images
[pages] folder – which contains all html pages created for each image's display.
3. Modify the index page with a html editor or Notepad. Paste a Galley into an existing
You may open a html editor, rearrange the images, and change the filenames to descriptive
image captions. (See example: http://www.metadataetc.org/artimages/archive/index.htm)
You may also copy the gallery table into a html page.
4. Modify each html page to add descriptive captions or metadata for the images.
Also see the example above, and click on 'image information' to view the result:
5. Change a style
If you want to change a style, replace images, just do it over. Delete all the files and folders in
that destination, if you want to replace it. Or choose another destination for a new gallery.
6. Upload the whole folder into your Web server.