Get the photos

This involves taking shots of the subject from multiple angles, ideally from points along an arc a fixed distance from the subject.

Pick a target

Pick a target as the focal point. For the Thumb photos, I picked the top of the Thumb; for the Coyote Gulch photos, I picked the top of the foremost 'toe' of the knob. It is important that each shot be centered on the same target. I used the cross-hairs of my viewfinder.

Shoot level

Processing later will be easier if each shot is level (or at least consistent). It's helpful if there is something in the photo that can be used later as a reference (eg., the horizon); you'll be able to use that later to align the rotation of the images.

Number of shots

(angle between shots) A small angle between shots will make the display smoother (more like a video), but each shot adds to the burden of taking shots, processing them, and download time for viewers. I aimed for about a dozen shots. For The Thumb and Coyote Gulch, which were objects about 300m to 500m distant, I tried to space shots by walking twenty paces along the arc between shots.

Image size

(pixels of resolution) The final display medium will be a computer screen, which doesn't require a lot of pixels. Today's displays are generally at least 1024 pixels wides, so 2048 pixels ought to provide a few years of 'future-proofing'. All the images should be the same size (if not, there will be more processing work later). Moderate JPG compression is probably adequate for displays on a computer screen -- though if camera memory is available, might as well use it; resolution can always be decreased later, but not increased.

Time of day

Low light (morning or evening) is generally best for light on the subject and makes dramatic shadows, but can create problems of high dynamic range if part of the arc ends up shooting into the sun.

Exposure

I shot each photo of The Thumb and Coyote with automatic exposure, with the idea that the camera would compensate for lighting variations. Alternatively, locking exposure over the series of shots might ensure that the light changes gradually and naturally as you traverse the arc. The Canon Powershot A75 seems to tolerate underexposures better than overexposures (overexposed shots lose information due to clipping, whereas underexposed shots can more often be saved by shifting information from the dark area), so it's best with the A75 to set the camera for the brightest shot and then let the subsequent shots go dark. If the camera will be powered off between shots, a way of locking the exposure would be to use Manual mode, if your camera supports that.

Spare batteries

Shooting an arc of shots is power-consuming because each shot has to be aligned carefully (target and level), and the time between shots (eg., twenty paces) means either leaving the camera on or turning it off and then on soon after. All this is power-consuming (I learned this the hard way).

Process the photos

To get the best display effect, each image must be aligned (position and rotation) and there shouldn't be large differences in exposure between images.

Here's the procedure I used with Photoshop CS (available for 30 days free trial from Adobe):

• Create a subdirectory (a.k.a folder) on your computer that contains only the images in jpg format from your arc of shots. Name them with a base name followed by a sequence number (for example, I named all the shots of The Thumb with the base name 'thumb_', eg., thumb_1.jpg, thumb_2.jpg, etc). All images should be the same pixel dimensions.
• Create a Photoshop document with each image loaded as a layer. You can do it manually (tedious), or by using a script I created using Photoshop's javaScript (Photoshop can be controlled by javaScript, visual basic, or appleScript). The script text is included later in this page.
• Pick one of your images to be the reference (to which all the other images will be aligned). Create a new layer (named 'reference', say) above your reference image that will act as an alignment guide. Draw markers (eg., crosshairs) on the alignment layer: one set of markers to guide the placement of your focal object, and a horizontal reference line near something in your image that can be used to tell if the photo is level. For example, for The Thumb photos, my focal object was the tip of The Thumb, and my horizontal reference line was drawn near a stratum in the background rocks. I placed the horizontal reference line near the stratum rather than over it, so that it didn't obscure it (note that horizontal references in your images may only be horizontal in all images if they were near camera level).
• Move your reference layer to the top of the layers palette.
• Make only the reference layer visible (eg., alt-click the 'eye' on the reference layer), then starting at the bottom, make each layer visible one at a time. You should see each of your layers appear under your reference layer. As you work your way up, notice how well the images align with the reference layer. When you are satisfied that your reference layer is appropriate, go back and start aligning each layer with the reference (using the Move tool and Edit->Transform->Rotate).
• At this point you should now have all your images aligned. Now crop the document down to whatever is common among all the layers (or do some touch-ups to clone into edges, etc).
• Do any image adjustments. Image->Adjustments->Match Color might be useful. Image->Adjustments->Shadow & Highlight is usually useful for sunlit photos with shadows. Filter->Sharpen->Unsharp mask is usually useful. If you want to apply the same actions to a number of layers, you can create an Action (record a series of commands) and then use my ApplyActionToVisibleLayers script (see below) to apply it to all visible layers. (Another way to do this is to save all the layers to files, as described below, and then use File->Automate->Batch to apply an action to all files.)
• Use Image->Image size to set the image size for the document (ie., all layers). The smaller your image, the faster it will download. The trade-off is between size of potential audience (smaller files accomodate lower quality connections) and quality of experience (larger files give a better image). All images need to download before the viewer can see the rotating image, so if you have 10 images each of 20K, that's a 200K download, which takes about 40 seconds on a 56K dial-up link (or you could decide that multi-angle photographs are like video clips -- something really only accessible to people with broadband connections to the internet).
• Save your PSD file with all the layers. Use the Files->Scripts->Export Layers to Files script to create a set of JPG files in a new directory that will be the source for display in a web browser.

Display the photos (in a browser)

[2019 update: Much has changed since this page was written in 2004. Now, an easy way to display a sequence of images is to use an animated GIF. But the javascript method below will still work too.]

Here's what I did:

1. Create a new directory to hold common files, and a subdirectory for each of your image sets (presuming you'll eventually have more than one). Copy your images into the subdirectory.

2. Get a copy of the javascript that displays the images. The script, called multiAngleImage.js, can be downloaded to your computer by clicking on the following link:

   photoshopScripts_multiAngle.zip

   When you see 'Open or Save', click 'Save' to store the zip file containing the scripts on your disk in the directory created in step 1 above. Uncompress the zip file.

3. As a starting point, here is a basic web page using the multi-angle javascript. View the source of that web page (eg., display it in your browser and then right-click, select 'view source'). Save the web page HTML as 'index.html' in the subdirectory that contains your images and the multiAngleImage.js file.
4. Edit that index.html file using a text editor. You need to modify it to suit your circumstances. Specifically, change the script parameters to point to your images. My 'Thumb' image files are named 'thumb_0.jpg', 'thumb_1.jpg', etc and there are 10 of them. Detailed instructions for using the multiAngleImage javascript are in the multiAngleImage.js file you downloaded -- just open it with a text editor to read the notes.
5. Double-click on the index.html file. Your browser should display your images.

To put your stuff on the web, just upload the directory created in step 1, including the subdirectory with your images.

You're done! If you've got a good result, I'd like to see it.

Jim Elder, Oct 2004
Ottawa, Canada
Email

Photoshop Scripts

Photoshop CS 'Actions' (recorded Photoshop commands) differ from Photoshop 'Scripts' in that scripts are programming languages such javaScript, visual basic, and appleScript that permit conditional execution ('if' statements) and access to internal Photoshop objects.

The two scripts below, available from photoshopScripts_multiAngle.zip, are useful for preparing images for multi-angle display but are not necessary.

Use File->Scripts->Browse within Photoshop to execute a script.

Note that the applyActionToVisibleLayers script needs to be edited to work on your system. Use any text editor to open the file and make the simple changes indicated by comments within the file.

Here are copies of the two scripts (but download from the links above in case these copies are out of date):

Documentation for Photoshop scripts is located in the install area for Photoshop (Windows: \Program Files\Adobe\Photoshop CS\Scripting Guide\). The PDF documents there have enough examples that I was able to glue together the scripts above. To try a script, create it in a text file and then tell Photoshop to execute it using File->Scripts->Browse. Put this:

$.level = 1; debugger;

at the start of a script to tell Photoshop to open its script debugger, then single step through the script for feedback on problems.