How to Build Web Galleries in Photoshop CS3

By Nathan Segal

One of my favorite aspects of Photoshop is its ability to create custom web galleries. In this tutorial you'll learn the basics of the process. Before we get started, there are a few things to consider. When you build a web gallery, it's a good idea to sort your images so that the verticals and horizontals are grouped together, if possible. This imparts a better appearance to the gallery. If the vertical and horizontal images appear together, it can make the gallery appear disorganized.

Another important thing is to consider the size of the images before you build your gallery. Do not use the original size. Remember, you are loading images onto the web and minimizing your file size is important for two reasons: storage space and uploading times.

As we look at the various sections of the web photo gallery dialog box, you'll see many parameter boxes. For the sake of this tutorial, I will fill in all of these so you can see what the final result looks like in a finished gallery.

To start creating web galleries, go to File: Automate: Web Photo Gallery. While the dialog box may appear to be simple, there are many options at your disposal.

First off, we'll look at the Styles, or the types of galleries that you can create. As you can see, this is a huge list and gives us more options than we could cover in a single tutorial. Some of your options are: Centered Frame, Dotted Border, Horizontal Slideshow and more. For the purposes of this tutorial, I'm going to use the Simple style.

Directly below the Styles drop down menu is a field for entering your email address. In the Source images section, there is a section for a Source folder and a Destination folder. The Source folder is for your sized images, which you have reduced from the original (in this case, I use 400 pixels). The Destination folder is where the final images and HTML will be stored.

You will need to create both the Source and Destination folders for the images. Here is what it looks like in the screen shot above. Note that I included the folder for the original images, as well.

In the options drop down list, you will see the headings: General, Banner, Large Images, Thumbnails, Custom Color and Security. Each one of these governs an aspect of creating the web gallery. We'll cover those next.

The General section is where you decide what extension you want for your HTML, either .HTM or .HTML. There are other options here and the width and height attributes are enabled by default.

The Banner is where you input information about your gallery.

The Large Images section gives you control over the size of the image that will be displayed when the thumbnail is clicked. Note that in the Titles section, you can enable the various checkboxes to display information about the images.

The Thumbnails section is similar to the large images section, only this time you have control over the size of the thumbnail that will appear in the gallery. As with the Large Images section, you can add in different Titles attributes.

The Custom Colors section allows you to add color to the different aspects of your gallery. This is useful if you post the gallery into a web page that has a colored background, such as black.

Last is the Security section, which allows you to post information about the image. Your choice are: Custom Text, Filename, Copyright, Description, Credits and Title.

Creating the Web Gallery

To create the web gallery, I've used the following settings:

Styles: Simple	
Email: visual artist49 at gmail dot com

Extension: .HTM

I've enabled the Width and Height Attributes for Images

Site Name: DigitalArtistU.com
Photographer: Nathan Segal
Contact Info: Email Only
Date: 10/27/2010

Large Images
Resize Images enabled: Custom - 400 pixels
Constrain: Both
JPEG Quality: Medium - 5
Border Size: Zero
Titles Use: Enable Filename, Description, Credits, Title and Copyright
Size: Custom - 125 pixels
Columns:  4
Rows:  3
Border Size: 0
Custom Colors
Leave at default settings.

When you're satisfied with all of your settings, click on OK. Photoshop will automatically build your gallery. When it finishes, it will open to a web page in your default browser, in this case, Firefox.

Here's what the thumbnail gallery looks like. Clicking on any of these will take you to a larger image.

Here's the large image gallery. Note that you can navigate through this gallery by clicking on the numbers or the arrows. Clicking on the vertical arrow will take you back to the thumbnail gallery.

While enabling all the options will build you a gallery in short order, the result isn't exactly pleasing to the eye. Fortunately, Photoshop allows you to do quite a bit of customization to the HTML, which we will explore in the next lesson. For now, to whet your appetite, have a look at at this site.

In the next lesson I'll show you how to customize the HTML in Photoshop so you can build tailor-made galleries.

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date