Gallery Tutorial:
Add a gallery page with manually-positioned thumbnails using the -thumb hint
Hints demonstrated: -thumb
Requires: SiteGrinder 2 Pro

Part 1: Creating Thumbnails

This tutorial assumes you have the document you created with the basic gallery tutorial.

Click here to download a starting document

In this tutorial you will see how to add one or more pages of thumbnails to your gallery. You will use the -thumb hint on image layers to indicate where thumbnails should go and how big they should be.

SiteGrinder 2 Pro will create the thumbnail images from your folder of images, lay them out on one or more pages to match the layers you made, and link them to the pages containing the matching full sized images.

If you plan to lay out thumbnails in a line or grid, use the -thumbsheet hint instead. Thumbsheets allow SiteGrinder to do the work of laying out the thumbs for you.

There are two advantages to using manually placed -thumbs:

  • You can position them arbitrarily on the page
  • You can use layer set/group -thumbs which can include JPEG metadata

Step 1: Add an up-button layer to the full sized image page we made in the previous tutorial

Since we'll be making a thumbnails page separate from the full sized image page, we'll need to add a button to navigate from a page with a full sized image back to the page of thumbnails. SiteGrinder does this using the up-button hint.

  1. Close SiteGrinder if it is open
  2. Create a new select the type tool, create a new type layer, and enter something like "Back to thumbnails" in its contents.
  3. Change the name of the layer to up-button.
  4. Position this layer wherever you should like it, perhaps in between the next-button and prev-button layers.

  5. Open the layer comps palette if it is not already open.
  6. Right click (control-click for MacOS) on the example-gallery comp you created in the previous tutorial.
  7. Select "Update layer comp" from the menu that appears.

  8. Hide all of the layers you created in the previous tutorial except the layer containing the background color.

Step 2: Create the first thumb

  1. Create a new image layer to be your first thumb layer
  2. Select the rectangular marquee tool
  3. Create a selection in the new layer that is the size of the first thumbnail. This can be any size you like.
  4. Fill the selection with a color that is different from the background color so you can see it
  5. Rename the layer "example-thumb"
  6. Select the move tool and move the layer to wherever you would like it

Step 3: Duplicate the thumb a few times

  1. With the thumb layer still selected, select "Duplicate layer" from the layer palette menu.
  2. Photoshop will try to name this layer example-thumb copy, so change it to example-thumb to match the first thumb layer you made.
  3. Move the new thumb to wherever you would like it.
  4. Repeat the previous three steps as many times as you like to create and position some number of layers all named example-thumb

Step 4 (optional): Add "next" and "prev" buttons to the thumbnail page

Question: Why do we need "next" and "prev" buttons on the thumbnails page?

Answer: Because there may be more images in our gallery than thumbs on the page requiring additional pages of thumbs. If you always create an equal or greater number of thumbs than you have images you won't need to do this.

  1. Select the type tool.
  2. Create a new type layer and enter something like "Next Thumbnails" into it. Name that layer next-button and position it wherever you like.
  3. Create another new type layer and enter something like "Prev Thumbnails" into it. Name that layer prev-button and position it wherever you like.

In this case we created four thumbs, but what if there are seven images in our gallery?

SiteGrinder 2 Pro is smart enough to create additional thumbnail pages that look just like this one. It will create as many as it takes to contain all the the necessary thumbnails.

When you put next-button and prev-button layers on a thumbnail page, SiteGrinder 2 Pro programs them to go from one page of thumbnails to the next or previous page of thumbnails.

SiteGrinder is even smart enough to hide the "next" button on the final page and the "prev" button on the first page.

Step 5: Create the new gallery thumbnail page

  1. Open the layer comps palette if it is not already open.
  2. Select "New layer comp" from the layer comp palette popup menu.
  3. Name this new layer comp the same as any other pages in this gallery. If you are following from the previous tutorial this will be example-gallery.
  • Important: As you see from this example, galleries can have a number of layer comp pages that all work together. So far, for example, we have a page for thumbnails and a page for the picturebox. All of these pages must be named the same so SiteGrinder knows they are all part of the same gallery.

Step 6: Adjust thumbnail border settings

You've now completed everything you need to do in Photoshop. Now it is time to adjust thumbnail settings in SiteGrinder.

  1. Save the document and open SiteGrinder 2 Pro
  2. Select the "Galleries" tab at the top of the SiteGrinder window
  3. Adjust any border properties you like.
  4. If you have not selected an image folder, click in the "Source" column to the right of the "example" slideshow entry. Click the "Image Folder" button in the dialog that appears and locate a folder of jpeg images. (SiteGrinder will use dummy images if no source is set.)
  5. Click the "Build" button at the bottom of the SiteGrinder window to build your pages

Learning More

You've learned to create a separate thumbnail page using manually positioned -thumb layers.

At this point you may want to learn about any of the following: