Photoshop Lab » Actions and Automation

Lightbox Web Photo Gallery

Tommy Maloney — Tue, 13 Jun 2006 02:44:01 +0000

Adobe Photoshop’s Web Photo Gallery is a great and easy to use function, but the quality of your preset options have always seemed lacking. Using the Lightbox JS javascript library and the Web Photo Gallery we can easily create a very slick photo gallery for your website.

Here’s an example of a Photoshop Lightbox Web Photo Gallery.^*

Photoshop’s Web Photo Gallery automation is located under [File > Automate > Web Photo Gallery...]. It’s been available since version 5.5 (I think). This tutorial doesn’t cover the basics of using the Web Photo Gallery, but Adobe offers one in their Resource Center. So, if you’ve never used it, check that out first.

Since this isn’t JUST a Photoshop tutorial I’m expecting a few different levels of readers:

Non-Programmers
For those of you that don’t want to do any programming you can download the Lightbox Web Photo Gallery preset and install it into your [Photoshop CS2/Presets/Web Photo Gallery] folder. There’s a text file called “Color Settings.txt” in the “images” folder of the download containing the matching color setting values I used in my example.

Mild-Programmers
Those you of you that can handle some basic HTML and aren’t afraid of a little javascript, read on, this tutorial is mostly for you.

L33T Programmers
You can probably just skip to the Lightbox JS Editing instructions and figure things out yourself. I’m just hoping this sparks your creativity and you create some awesome galleries then post them in the comments.

Getting Started

Start by navigating to your “Presets” folder in your Photoshop CS2 install directory.
Windows: [Program Files/Adobe/Photoshop CS2/Presets/Web Photo Gallery].
Mac OS: [Adobe Photoshop CS2/Presets/Web Photo Gallery].

Find the folder labeled “Simple” and duplicate it. Rename your duplicate folder to “Lightbox” (or whatever you want to call it). Within your new folder create another new folder and call it “images”.

Visit the Lightbox JS website or even the newer Lightbox JS v2.0 website and download the necessary Lightbox files to the “images” folder you created earlier. For this example, I will be using the original Lightbox v1.0 files because it’s an easier setup and install. Although, I must admit, the 2.0 version is very slick.

*UPDATE*
Due to popular demand, I’ve added instructions to using the Lightbox 2.0 javascript with Web Photo Gallery in this mini-tutorial.

The Photoshop Web Photo Gallery uses custom tags to generate the content for the pages in the Web Photo Gallery. The tags are defined with surrounding “%” signs, which Adobe calls “tokens”. For a list of all available tokens, you can search in your Photoshop Help documents by pressing [F1], or you can download the list of available Web Photo Gallery Tokens here. This is a good guide for all of the token functions available.

These next few images will illustrate the options in the Web Photo Gallery and (some of) their corresponding tokens.

General Options

Email address: %EMAIL%
Character set: %CHARSET%
Image width / Image height: %image_width% / %image_height%

Banner Options

Site Name: %BANNER%, %TITLE%
Photographer: %PHOTOGRAPHER%
Contact Info: %CONTACTINFO%
Date: %DATE%
Font: %BANNERFONT%
Font Size: %BANNERFONTSIZE%

Large Image Options

Add Numeric Links: %ANCHOR%, %NUMERICLINKS%
Border Size: %IMAGEBORDER%
Titles: %FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
Font: %CAPTIONFONT%
Font Size: %CAPTIONFONTSIZE%

Thumbnail Options

Size: %THUMBNAIL_WIDTH%, %THUMBNAIL_HEIGHT%
Columns and Rows: %THUMBNAILSROWS%
Border Size: %THUMBBORDER%
Titles: %ALT%,%FILENAME%, %FILEINFO%, %CREDITS%, %CAPTIONTITLE%, %COPYRIGHT%
Font: %CAPTIONFONT%
Font Size: %CAPTIONFONTSIZE%

Custom Color Options

Background: %BGCOLOR%
Text: %TEXT%
Link: %LINK%
Banner: %BANNERCOLOR%
Active Link: %ALINK%
Visited Link: %VLINK%

The Coding

With all of the tokens and their corresponding settings known you can start programming the Web Gallery files. I like to start with my own fresh HTML document. Adobe doesn’t pay much attention to web standards.

Then enter the Web Photo Gallery tokens you want use, some custom styles and link any supporting files in the [] content. I’m using an external stylesheet, but any Photoshop tags you want to use in CSS have to be placed inline, as you can see.

Then enter the body tags and tokens and save the file as [IndexPage.htm] in the “Lightbox” folder, overwriting the original file.

Locate the file [Thumbnail.htm] in the “Lightbox” folder and open it in an HTML editor.

The [Thumbnail.htm] file should have the following code in the [anchor ] tag to work with Lightbox JS:

So that it should look something similar to this:

Next, open the [Caption.htm] and [SubPage.htm] files and delete ALL of their contents. Both files should be blank.

Modifying the Lightbox JS File

The next step is to open up the [lightbox.js] file that you downloaded to your “images” folder.

Navigate to around lines 37-38 of the file and change the [loadingImage] and [closeButton] variables to include [images/].

var loadingImage = ‘images/loading.gif’;
var closeButton = ‘images/close.gif’;

Navigate to around line number 240 and add the following:

objLink.href = objLink.href.replace("/pages/","/images/");
objLink.href = objLink.href.replace(".html",".jpg");
objLink.href = objLink.href.replace(".htm",".jpg");

Above the line:

imgPreload.src = objLink.href;

It should look similar to this:

Save your updated [lightbox.js] file.

This code is replacing the links to the .html subpages that Photoshop automatically creates with links to the full-size images. I wish there were a cleaner way to do it, but the Web Photo Gallery has a limited set of functions and options.

Creating the Gallery

Go to [File > Automate > Web Gallery] and under Styles choose [Lightbox].

Choose your settings and options as usual and let Photoshop create your new Lightbox-ready Web Photo Gallery!

Don’t forget to check out the Lightbox 2.0 Web Photo Gallery tutorial.

* Photos from stock.xchng, design and colors from/inspired by Lightbox JS 2.0 website.

Droplets For The Lazy

Tommy Maloney — Thu, 24 Feb 2005 19:06:13 +0000

Photoshop can make easy work of your batch processing with Droplets. This tutorial explains how EASY it is to get going.

Batch processing. Doing the same thing repeatedly in the same way. People don’t seem to know that Photoshop can do this, and how easy it is. Droplets can solve your batch processing problems easily.

In order to use a Photoshop Droplet, you have to use an Action. What’s an action? It’s basically a script of automated commands that Photoshop follows. For this example, I’m going to use a very popular action: resizing a group of photos.

The first step is going to be creating the Action. Make sure your Action Palette is open. If not, go [Window > Actions] or [Alt+F9]. Click on the [New Action Set] button in the Actions palette, just so your action easier to find later. Name it whatever you want, I try to name it as detailed as possible to what it is, since I lack a “memory.”

Click on the [Create New Action] button. Name it whatever you want, I suggest keeping the similar naming scheme stated before. Click [Record]. You’ll be able to tell that the Action is recording by the little red button on the bottom of the Actions Palette. From now on, everything you do will be recorded by Photoshop. Then secretly emailed to your mom (j/k).

Since I’m going to be resizing this massive image into a smaller, more friendly format for sharing with all of my e-friends, I’m going to go under [Image > Image Size]. I’m changing my image size from 2160×1440 to 640×480. That’s right 480. Ok, it’s not 480, it’s 427, even though I named that Action otherwise. I’m not changing the resolution because I’m going to save it out as a JPEG, which is automatically converted to 72dpi. After I click OK, you can see that that [Image Resize] was recorded in the Actions Palette.

Now go to [File > Save As]. You can leave the directory as the current directory. Append something to the end of the file name. I’m using “_small.” The JPEG dialog box will pop-up, since I’m saving as JPEG. I set the quality to 8. Not too crappy, and not too large of a file size. Click OK and close the image.

Now you can stop your Action recording. Click on the square Stop Recording button next to the Record Button on the Actions Palette.

Now to create the Droplet. This part gets a little complicated, because there’s a lot of different settings. The best advice I can give is to play around. I’ll show you my method, but ultimately, you’ll end up developing your own. Anyways, onward and upward.

Go under [File > Automate > Create Droplet]. The dialog box will open. Click the [Choose] button. The Save dialog box will open. Choose the directory, or wherever you want to put your Droplet file. Name it accordingly also.

Under Set: choose the Action Set you made.
Under Action: choose the Action you made.

Then click on the two checkboxes: [Suppress File Open Options Dialog] and [Suppress Color Profile Warnings].

Where it says Destination: choose Folder. The [Choose] button will appear now. Click on that and in the dialog box that opens, select a folder you want to use. I set it up to use as a temporary folder. So I made a folder called “Resize.” I also configured my options as you can see below.

You now have a Droplet file. All you have to do is navigate to the file on your computer, not in Photoshop, then just drag-and-drop whatever image files you want to resize onto the Droplet icon. Photoshop will open, process through your images, then save the resized images to the folder you specified.

You can use this for any Action that you make in Photoshop.