21 “free” photo galleries

I’ll give you a hint: you already have these photo galleries included in your dirty, stolen completely legal copy of Photoshop CS2. These galleries give you a way of easily making web pages that hold lots of thumbnail photos, each linking to a full size version of the image.

We’ve been looking for a good way to display the content of the Ancillary Factory portfolio, which is basically four separate image galleries. Go ahead. Check it out right now. I’ll wait.

Whew. Are you back? If you want to use one of these built-in galleries, start Photoshop and go to File->Automate->Web Photo Gallery. When that opens, you’re gonna see this guy:

If you click open the “Styles” menu, you’ll see the big list of galleries, 21 in all. There’s also an additional one you can download from Adobe. My personal favorites are the Flash-based galleries, although I like the ones marked “simple” also.

Under “source Images,” click the Browse button and navigate to the folder that has all of your photos. If they’re not sized down for the web, that’s OK. Photoshop is about to do the work for you. (Pretty nice, considering…you know what you’ve done to Photoshop.)

An obvious tip

Go through the options in the “Options” menu. It sounds obvious, but the default is set to “general” options, which doesn’t have much of interest. When you click it open, go to Large Images, Thumbnails, and Custom Colors. Under Large Images, set the max. size of the full-size photos. This will probably take a little trial-and-error to get the size right without making for too much scrolling on the finished page. You’ll see what I mean.

Under Custom Colors, you’ll can set the colors to match the color scheme of your website, so no one will know you cheated and used a canned photo gallery.

When you’re done, click OK in the top right and you’ll see a bunch of rapidly flipping windows that looks sorta like that thing that happens when you beat Windows Solitaire. This means that PS is automatically resizing your photos to create thumbnails and large images, which it will save to the folder you specified. Photoshop will also open your default web browser so you can see the new gallery. (Another tip: If you screw up, Photoshop saves your settings, so just go to File->Automate->Web Gallery and do it again.)

What’s not so great

Unless I’m missing something, it’s not super easy to embed your gallery into an existing website. We have a Dreamweaver template for our site with a topbar, sidebar and a big space in the middle for the content. I thought I would be able to just copy the part of the code that makes the gallery and paste it into my template, but no go. And the index.html file that Photoshop creates has some weirdness in it, and I had a hard time reverse-engineering it.

There is a workaround, however. If you go to the Ancillary Factory portfolio page, you’ll see that each gallery link (print, logos, etc.) doesn’t really lead to its own page: it’s actually just a javascript:; link that opens a smaller window that contains the gallery. Is there a way to embed it straight in a template page? Probably. But this way is easier, so quityerbitchin.

Want more galleries? Here’s a great list of them from Smashing Magazine. I especially like the Polariod-looking one.