Gallery Introductory Tutorial
Create an image gallery with forward and
backward navigation from scratch
Hints demonstrated: -picturebox, -gallery, next-button, prev-button
Requires: SiteGrinder 2 Pro

Introduction and an Important Message

SiteGrinder is really, really good at helping you rapidly build many kinds of image galleries with thumbnail navigation.

The tutorial "trail" that begins here takes you through various techniques for doing this depending on the gallery style you prefer.

The first tutorial introduces you to the barest minimum features for a gallery. A few users have run off and built galleries using only this information. No matter how tempted you are, don't do this!!

Before you build your own gallery, please follow the tutorials through until you have a good handle on automatic thumbnail creation. This will save you so much time you won't actually believe it until you try it.

So follow along with this tutorial, then go on at least to thumbnails. (You can find the links to the subsequent tutorials at the bottom of this document.)

Starting A Basic Auto-Generated Gallery With Next/Previous navigation

The recipe for the simplest auto-generated gallery includes the following ingredients:

  • A folder of images on your hard disk
  • A layer in a Photoshop document with the -picturebox hint
  • "next" and "prev" buttons to navigate from one image to another
  • A layer comp with the -gallery hint in which the -picturebox is visible

The four layers in the screen-grab below represent everything it takes to make a gallery that has no thumbnails - and technically you don't even need the background layer. (We'll get to the thumbnails, just hold your horses!)

The -picturebox layer is a rectangular image layer which will indicate to SiteGrinder where you want your images to appear on the page and what size to make them. You can use a solid rectangle or, for more of a what-you-see-is-what-you-get experience, use an example picture from your gallery that you bring into the document.

What's important is the size and position of the layer, and adding "-picturebox" to the end of its name.

Step 1: Create a facsimile of the document pictured above from scratch:

  1. Create a new Photoshop document of about 500X500 pixels.
  2. In an empty image layer create a rectangular selection for the -picturebox like the one above that's about 2/3 the size of the document.
  3. Fill the selection with a color
  4. Name that layer example-picturebox
  5. Create a type layer and enter something like "Previous Image" as its contents. Name that layer prev-button and position it in the lower left.
  6. Create a type layer and enter something like "Next Image" into its contents. Name that layer next-button and position it in the lower right.

Step 2: Create the gallery page:

  1. Open the layer comps palette from Photoshop's Window menu if it isn't already open
  2. Click the "New layer comp" button at the bottom of the palette or select "New layer comp" from the palette's popup menu.
  3. Name the new layer comp example-gallery.

You are now done with your Photoshop duties.

Step 3: Use SiteGrinder to Locate the Image Directory

  1. Save the document and open SiteGrinder 2 from Photoshop's File->Automate menu.
  2. Select "Galleries" from the tabs at the top of the window.

Here you can point SiteGrinder to the folder of images you wish to display\in the space indicated by the size and position of the -picturebox layer you made.

This panel displays, in the "Page" column on the left, a list of all the sets of gallery pages it found in your document.

In this case there is only one, named "example" after the example-gallery layer comps you made.

Clicking in the "Source" column to the right of the gallery's name will bring up a dialog in which you can choose a folder of images and set other options.

  1. Click the "Image Folder" button.
  2. Use the folder selection dialog to find and select a folder of jpeg files. (If you don't have one handy, navigate to your Photoshop plug-ins folder and then into Media Lab SiteGrinder Pro/SiteGrinderDemoFiles and select one of the image folders there.)
  3. Click OK.
  4. Click the "Build" button at the bottom of the SiteGrinder window.

SiteGrinder will generate a web page for each image. The first page will have only a next button and the last page will have only a prev button. All other pages will contain both next and prev buttons. SiteGrinder automatically handles the visibility of next-button and prev-button layers on the first and last pages of -picturebox galleries.

Once the pages are generated, SiteGrinder will open one in a browser where you can use the navigation buttons to move between them.

Moving On

At this point you will want to save a copy of your file.

There are a number of tutorials linked to below which begin with the file you've just created.

Keep an unchanged version of the file you have just finished so you can perform many or all of these with a copy of it.

  • Be sure to follow at least one -thumb or -thumbsheet tutorial before building your own galleries.

Select a tutorial below:

  1. Add a gallery page of manually positioned thumbnails using the -thumb hint
  2. Add a page of automatically positioned thumbnails using the -thumbsheet hint
  3. Add multi-layer thumbs with jpeg metadata using layer sets/groups
  4. Add JPEG metadata to the image pages
  5. Add an alternate layout for images with portrait orientation