Gallery Tutorial:
Making thumbnails with backgrounds
and metadata using layer groups
Hints demonstrated: -thumbsheet, -metadata, -thumb
Requires: SiteGrinder 2 Pro

Part 1: The Advantages of Layer Group Thumbnails

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

Click here to download a starting document

NOTE: This tutorial demonstrates intermediate techniques. If you haven't followed the basic thumbnail tutorial and the basic thumbsheet tutorial, we recommend you do so before continuing.

SiteGrinder can create automatically linked thumbnails for your galleries from individual layers representing the size and positions of your thumbnails.

Thumbnails made from individual layers are very useful, but thumbnails made from layer groups (the folders in Photoshop's layers palette formerly known as layer sets) have two big advantages over individual layer thumbnails:

  • Any number of "decoration" layers can be incorporated into the thumbnail, such as drop shadows or complex borders
  • Image metadata can be incorporated into thumbnails using type layers and the -metadata hint

The basic workflow is this:

  1. Create a new layer group and add the -thumb hint to its name
  2. Create an image layer inside the layer group to represent the size of your thumbnail and also add the -thumb hint to that layer
  3. Optionally add one or more layers to the thumb for decoration
  4. Optionally add one or more type layers to the thumb that use the -metadata hint
    (thumb metadata is not supported with -thumbsheets)

At this point you can duplicate the layer set as many times as you like to manually place your thumbs OR, if you are not using -metadata in the thumb group, you can use a -thumbsheet to automatically duplicate and position the thumbs when SiteGrinder builds the page.

Making a Thumbnail Group

When you create a gallery you need to decide whether you want your thumbnails on the same pages as your full-sized images or on different pages. In this case we'll put our layer group thumbs on the same page.

Step 1: Make room for the thumbnails

  1. Select the move tool (press V)
  2. Select the -picturebox layer in the layers palette
  3. Slide the -picturebox layer to the right side of the document:

Step 2: Create the first thumbnail group

  1. Select "New Group" from the layer palette menu.
  2. Change the name of the group to Example -thumb. (The quickest way to rename a layer is to double-click directly on the name layer name in the layers palette. This allows you to change it in-place.)
  3. With the group you just made selected, choose "New layer" from the layer palette menu to create a new image layer inside the layer group.
  4. Name that layer Example -thumb also. (As long as the layer uses the -thumb hint its name doesn't matter, but matching names can help keep things organized)
  5. With the new image layer selected, choose the rectangular marquee tool (shift-M).
  6. Create a selection of approximately 50 wide X 35 tall pixels and fill it with a color.
  7. Your document should now look like this:

Step 3: Add a drop shadow layer

  1. Select the example-thumb image layer (not the group)
  2. Choose "Duplicate layer" from the layers palette menu
  3. Rename the new layer to be shadow
  4. With the shadow layer still selected in the layers palette click and drag OR press Control-[ (MacOS: Command-[ ) to move shadow underneath example-thumb.
  5. Your layer order should now look like what you see on the right.
  6. With shadow selected, choose "Drop Shadow..." from Photoshop's "Layer->Layer Style'' menu or from the layer palette's style menu at the bottom of the palette
  7. Click "OK" in the layer style dialog to apply the effect.

The reason we placed the drop shadow on a separate layer from the -thumb layer is because the -thumb layer is just a placeholder to tell SiteGrinder how big to make the thumbnail and where it goes. SiteGrinder replaces the generic thumbnail layers with actual thumbnail images during the build. This means backgrounds and other decorations need to be in separate layers, but still within the -thumb layer group.

Step 4: Save your document and a copy of it

At this point save two copies of the document. Name one "Thumb Group" and name the other "Thumb Group with Thumbsheets".

We'll use the "Thumb Group with Thumbsheets" in the next section to show how SiteGrinder can duplicate the thumb nail group within the area of a thumbsheet.

We'll use "Thumb Group" in the section after that to show how to add metadata to a thumb group and manually duplicate the group and position its copies. (Thumbsheets do not support thumb groups with metadata.)

Using Thumbsheets with Thumbnail Groups

Open the document "Thumb Group with Thumbsheets" you saved at the end of the previous section.

Step 1: Adding the thumbsheet

  1. Click the new layer button at the bottom of the layers palette
  2. Name the new layer example-thumbsheet
  3. Click and drag the new layer to the top of the layers in the layers palette
  4. Press shift-M to select the rectangular marquee tool
  5. With example-thumbsheet still active, create a selection in the document to the left of the -picturebox about 160 X 210 pixels, as shown below:

  6. Press "D" to set the foreground color to black
  7. Select "Stroke" from the "Edit" menu and click OK.

NOTE: We could have filled the selection. SiteGrinder only uses -thumbsheet layers for size and position, so as long as the layer defines a rectangle its contents don't matter. Stroke is just easier to work with because it allows us to see through the empty rectangle contents.

Step 2: Update the gallery layer comp

Because we put our thumbnails and -picturebox on the same page, we only need the one -gallery layer comp that already exists from the first tutorial.

We now need to update it to include the thumbnail group and thumbsheet elements.

  1. Open the layer comps palette if it is not visible
  2. Right click (MacOS: Control-click) on the example-gallery layer comp and select "Update layer comp" from the menu that appears.

Step 4:Build

  1. Save the document and open SiteGrinder
  2. If you have not selected a folder of images for the gallery you can do so now by clicking on the Gallery tab at the top of the window. If you do not, SiteGrinder will use dummy images.
  3. Click the build button.

After the build you should see something like this in your browser:

SiteGrinder has automatically and intelligently created and spaced out the thumbnails to fit in the area designated by the thumbsheet. It only created as many copies as there were images.

In the next section we will start with the other version of the document you saved.

Using Metadata with Thumbnail Groups

Open the "Thumb Group" document you saved before the previous section.

This time we will add a metadata layer to the thumbnail group, and then use SiteGrinder Tools' smart layer set/group copy feature to duplicate the thumbnail group a few times.

Step 1: Add the metadata layer

  1. Click on the example-thumb layer inside the example-thumb group to select it
  2. Select the horizontal type tool on the tools palette
  3. Using either the text toolbar or the character and paragraph palettes, select the Verdana font, 10pt size, center alignment, and none for the anti-aliasing. None of these choices are requirements, but since we are working with small thumbnails we need a small, legible font for our metadata.
  4. Single-Click just below the thumbnail rectangle in the upper left of the document to create a new type layer there. Enter "[[filename]]" (without the quotes) into it. (see below)

  5. Double click on the layer name in the layer's palette and change the name to example-metadata. (as seen above)

The metadata layer is now complete. We chose [[filename]] for the data identifier because this is a special SiteGrinder metadata code that is always available, even if your JPEG files contain no metadata. SiteGrinder will replace the text "[[filename]]" with the JPEG image file name that corresponds with each thumb.

Now we will duplicate the thumbnail group a few times and position them on the page.

Step 2: Duplicate the thumbnail group using SiteGrinder Tools

  1. With the example-thumb group selected, save the document and open SiteGrinder 2 Tools from Photoshop's File-> Automate menu.
  2. Click on the "Smart Layerset Copy" tab
  3. Enter "example" into the Find field (or whatever the base name of your set is)
  4. In the Replace field enter "1" press return, enter "2", press return, enter "3". For each line in the replace field SiteGrinder Tools creates a new duplicate of the selected set. it will change all occurrences of the find term with the replace term wherever they occur in layer names.
  5. Type 150 into the Vertical Offset field to cause each duplicate to be shifted down by 150 pixels from the previous duplicate.
  6. Click the "Duplicate" button.
  7. Close the SiteGrinder Tools window.
  8. You now have the original set and 3 new renamed copies.

Step 3: Arrange the new thumbnail groups

  1. Press "V" to select the move tool
  2. Select one of the groups in the layers palette and drag it wherever you like.
  3. Repeat step 2 until all four groups have been arranged to your satisfaction. Below is a suggestion:

Step 4: Build

At this point you are finished in Photoshop.

  1. Save the document
  2. Open SiteGrinder
  3. Click the Build button.

When the build completes you should see "[[filename]]" replaced by the name of the file each thumbnail represents.

Practice: If you have images with real JPEG metadata, use SiteGrinder Tools to examine the metadata labels, such as "date" or "description" and change the thumbnail metadata to use that instead.

Further Reading

You've learned to create advanced thumbnails using layer groups.

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