I have finally updated my portfolio. This is actually a quasi-temporary one; I am designing a separate portfolio site to encompass my different types of work and I used some of the pictures I’m putting in that site to make this one. Once the other site (maryelle-stclare.com) is finished, I’ll either change the link here to open that site in a new window, or I’ll keep them both but arranged slightly differently.

Anyway, I did this version in Adobe Photoshop Lightroom 1.4. (Yes I’m still way back on v1.4!) Lightroom has several options for creating slideshows and Web galleries, the latter both in Flash and HTML. The Flash options include both Autoviewer and SimpleViewer, which are two very useful design solutions. Although I generally hate Flash and would not choose to design an entire site in it, I do like the look of it for portfolios. My previous portfolio was done in SimpleViewer although I used the WordPress plug-in to create it–not Lightroom. However, for some reason it stopped working correctly for me a while back and I could never get it fixed. The widget inside WordPress would generate part of the XML and then would just stop. So I had been looking for other solutions and realized that I had the almost-perfect one all along: Lightroom.

“Almost” perfect because there are a few quirks that have to be gotten around. In Lightroom, you can only specify the long edge dimension of your pictures. The software automatically makes all pictures that number. So, if you have both portrait and landscape pictures, Lightroom will make them all the same size on the long edge. It doesn’t keep the pictures at the size you uploaded them; it makes them whatever size you designate in the setup palette. This is a problem with portrait-orientation images: while 900 across is fine for landscape, it’s not optimal for portrait unless you don’t mind forcing people to scroll to see the whole image on a smaller monitor screen. I imported into Lightroom all my landscape pictures at 800px across and all my portraits at 600px high. But when I tell Lightroom “800px,” it makes the portrait pictures 800px tall. There is no way around this within the program, no matter whether you’re using a Flash gallery or the HTML version.  Maybe you can alter the XML file if you know code, but I’m going to assume most people don’t.

The way around this is to create a canvas for your odd-sized images that is the width you want them all to be, and make the fill color of that canvas the exact same color as the background, detail matte, and cells in your Lightroom gallery setup. Thus, although your portrait picture will be sitting inside a larger canvas, it can’t be seen. It just looks like the picture is centered.

First, you need to open your picture in Photoshop. You can either work with the TIFF or PSD, or with your final-sized JPEG. I did mine with the JPEGs so I’ll explain it that way but the steps are basically the same. If you use the PSD or TIFF, you’re going to make your new background canvas there and then save it as a JPEG when you’re all done with the steps listed below, instead of doing those steps to the JPEG itself.

MAKE A COPY OF YOUR PICTURES BEFORE DOING ANYTHING so that if you need to redo one, you don’t have to make a whole new JPEG from the original PSD or TIFF. Trust me when I say you will at some point need to do this and you’ll be glad you have a fresh untouched JPEG ready.

1) Open your image. Let’s say it’s a portrait sized at 400px wide x 600px tall. Let’s further assume that you have sized all your landscape pictures to be 800px wide by no more than 600px tall. Since I’m working with a JPEG, when I open the picture it’s one layer called Background and it is locked. You need to unlock that layer by double-clicking on it; the name will automatically change to Layer 0. Now you will be able to reorder it.

2) Create a new layer, which will become the background: Layer > New > Layer. This will automatically be called Layer 1 and will automatically be the same size as your existing canvas. It will appear in the Layers Palette above Layer 0, which is your original layer and the one on which you see the image.

3) Now you need to enlarge the canvas. In the Layers Palette, highlight Layer 1. Go to Image > Canvas Size. I want all my pictures in my gallery to be 800px wide, so I’m making the canvas 800px wide. You don’t need to change the height since you’ve already made sure all your images are 600px tall or less, although if you want to–so that everything is exactly 800×600–go right ahead. Click OK; now there will be a transparent canvas on top of and larger than your picture.

4) Make sure you are still highlighting Layer 1. Choose the color you are going to designate as the background in Lightroom. It is very important to make sure you WANT this color because you can’t change your mind later without going through all the steps again. I used #191919, which is a fairly dark gray. Make that the color of your foreground swatch (at the bottom of the PS toolbar). Go to Edit > Fill > Foreground Color. Layer 1 will now be filled with #191919. Now go to the Layers Palette and highlight the bottom layer (Layer 0). Move it up to the top. Now your image is on top of the gray background. Flatten your JPEG and save. Don’t forget to put your metadata and copyright in the File Info first.

Once you’ve done this to all the pictures you need to standardize, you go into LIghtroom and make your galleries. For the HTML gallery, in the Color Palette you need to make the Background, Detail Matte, and Cells the same color as you used for the fill in Photoshop. In SimpleViewer and AutoViewer, the only color to change in the Color Palette is the Background. In the Flash gallery Color Palette, you need to change the Background, Border, and Controls Background colors. Note that in the Flash gallery, the images float slightly away from the background and thus your “fill” canvas is slightly visible. It’s not obtrusive though, and you could if you wanted to put all your images inside a larger canvas so that they’d all float and thus create symmetry that way.

Once your gallery is done in Lightroom, you can either FTP directly from Lightroom to your website or you can export the files to your hard drive and then FTP to your site. I prefer to export to my HD and then FTP. You will need to make a new directory in the appropriate location on the host side of the FTP client that will contain your gallery files. Then copy over all the files and images from the local side of the FTP to the host side. Then you will be able to create a URL based on that directory structure and voilà, there’s your new gallery!