Part 1: Introduction
This tutorial assumes you have the document you created with the basic gallery tutorial.
Often a collection of images will include various image dimensions and orientations. Some will be wider than they tall (landscape), and some will be taller than they are wide (portrait). Some will be cropped or taken with different camera settings.
For many galleries this is not a problem.
You only need to worry about this if:
- You want to provide custom borders around each image that will be flush with the image edges
- You want your gallery pages arranged differently based on image orientation.
- Your -picturebox is smaller than your images and you want them to be scaled exactly to fit without cropping or "letterboxing"
If any of the above happen to be true, fear not! SiteGrinder provides a simple means for providing as many alternate-orientation gallery pages as you could ever need and automatically matching images to them.
The basic workflow is this:
- Identify how many different image orientation types you want to support
- Create a gallery page with a -picturebox for one of them
- Duplicate that page and hide the old picturebox
- Add a new picturebox with a different size/orientation
- Make any other changes you need to
- Name the new page to be the same as the first page
- Repeat 3-7 as many times as you need
SiteGrinder will match your individual images to the -gallery page whose -picturebox orientation most closely matches it.
Step-by-step
Step 1: Create your additional -picturebox page
- Open the layer comps palette from Photoshop's Window menu if it isn't open
- Your page from the previous tutorial should be the only comp, example-gallery
- Activate the comp by clicking in the little box to the left of the name
- Right click (MacOS: control-click) on the comp and select "Duplicate layer comp" from the menu that appears
- Photoshop will name the new comp example-gallery copy
- Change the name to example-gallery to exactly match the first comp
You now have an extra gallery page. Now you need to set it up properly.
Photoshop's marquee tool has a special mode called "fixed aspect ratio" for creating selections that match some particular width:height ratio.
It's very useful for making -pictureboxes!
Step 2: Adding a new -picturebox
- Hide the already existing example-picturebox layer in the layers palette
- Create a new empty image layer
- Name it example landscape-picturebox. (Note: the -picturebox hint and the layer's visibility on a -gallery page are enough for SiteGrinder. You don't have to name the -picturebox after the -gallery, it's just helpful for keeping things straight.)
- Select the rectangular marquee tool (press shift-M)
- Drag out a selection that matches your desired new width/height ratio
- Fill the selection with a color
- Right click (MacoS: control-click) in the layers comp palette on the new comp you created in step 1 and choose "Update Layer Comp" from the menu that appears to add the -picturebox you just made to the new page.
At this point you are basically finished. You can click in the boxes to the left of each comp to switch back and forth to make sure everything looks correct and then open SiteGrinder and build.
You can also add any other customizations you like to either gallery page. You can place layers in one layout that won't appear in the other by just making them visible and updating the appropriate comp.
You can add as many of these custom pages as you have special sizes or aspect ratios you'd like to support.
Further reading
You've learned to create a custom -gallery pages for different image aspect ratios.
At this point you may want to learn about any of the following:
