Walkthrough: Producing "Flyaround" Image

(Warning: This page takes a while to load; it has about 12 Megs of data attached to it. Be patient!)

This idea occurred to me a few years ago when I was toying with building my own "MATRIX" camera-bar out of inexpensive digital cameras and a computer-sequencing relay-set. I never got around to building the camera-bar, but I finally did get around to experimenting with "flyaround" images. The appeal of these images, to me, is that the idea of combining "fine art" with animated .GIFs. After all, animated .GIFs have been a source of much evil on the Internet. With the sheer number of idiotic dancing pig animated .GIFs that annoy us on amateurish websites - well - someone has a pretty serious karmic debt to pay off. When I signed up on deviantart.com and they had no upper limit on image size, I thought I'd do my part to creatively retrieve the animated .GIF from the depths to which it has sunk.

Big Wheel Keep 'A Turnin'

I did a prototype "flyaround" shot with RC standing on a little kitchen lazy susan. It worked surprisingly well, but I made a number of mistakes in the process. Learning from your mistakes is important; when you're trying to shoot something new and different don't expect it to work perfectly the first time!! That'll just frustrate and depress you.

One of the things I learned in the first flyaround prototype was that the rotating surface has to be very stable because any wobbling will result in the model appearing to jiggle from side to side. So I bought a metal ball-bearing lazy susan base ( $39 from woodworkers' supply ) and an oak table-top from the hardware store, which I assembled into a very solid rotating surface. To keep it from wobbling I used little polyurethane "magic sliding feet" for furniture, attached along the edge in 5 places so that they just skirt the floor while still allowing the table-top to turn freely. I painted it white to keep it more neutral-looking and used a dry-wall square to make a series of tick-marks around the edge so I could tell how far to rotate it. By dividing the surface into quarters and then subdividing them twice, I can do 16-frame or 32-frame versions, depending on how many tick-marks I rotate the top between frames. It's amazing how well the human eye can detect uneven movement (an obvious evolutionary advantage for a predator!) so if your rotation of the surface is slightly uneven, the final flyaround image will look jerky.

Setup For the Shot

My first experimental flyaround shot taught me several things:

This translates into using a heavy tripod with sand-bags on its feet, a cable release, and shooting on a solid floor. My set-up is in the following order:

  1. Place the rotating surface in the scene and set the lights up
  2. Get the model to stand or sit or whatever to make sure the lights look right and your composition is good - remember to compose in 360-degrees and don't set the camera up so the model's feet will exit the frame when you start to rotate the surface!
  3. Lock the camera on the tripod, weight the tripod, attach the cable release
  4. Set the camera's focal point and shut off vibration reduction and autofocus if your camera has them
  5. Let the model "shake it out"
  6. Check through the viewfinder and have your assistant get in their location; give them a good idea where the edge of the frame is (I make a mark on the floor just out of the frame) so they won't accidentally stick a hand into one of your frames
  7. Make a mark on the floor so your assistant will have something with which to align the tick-marks on the rotating surface
  8. Make a "start" mark on the rotating surface so your assistant knows where to begin and end
  9. Get the model on the rotating surface
  10. Go!


(Making a flyaround. 9.10MB Mpeg-2, sped up 3X)

In the photo above, you can see Wenona (the model) and Olaf, a fellow photographer who agreed to act as the "motor" for the rotational surface. The lights are set up, the camera is mounted on the tripod, and I've got the cable release rigged to minimize the chance the camera will get jiggled. If you watch the video you'll see that I shoot a frame, Olaf rotates Wenona, and I shoot again - fairly quickly. The longer you take to complete the frames the tougher it is on your model! The first time I did this, I had the camera on the tripod and had to run over, kneel down and rotate her, run back, hit the shutter, run over, kneel down and rotate her, etc. the resulting images all had to be adjusted because of camera vibration from my running back and forth.

Compositing


(click for enlarged version)

Once you've got the images off the camera, you should do a pre-check in file-browser. Wait until the previews are generated and then flip through them with your keyboard and the arrow key; you'll get a decent idea whether they came out or not. Bear in mind that you're dealing with full-size images and do some math. For this image, 32 frames times 4000 x 3000 pixels, you're bumping up against a gigabyte file size by the time it's all loaded into photoshop as layers. To keep this image manageable, I downsampled the frames to 1000 pixels high by 800 pixels wide, which will still result in a large .GIF file but keeps photoshop running without a hiccup.

The next step is to "stack" all the images into layers. Create a "master" file that is the size of the frames, then open each frame then cut and paste it in. To make sure the frames are correctly aligned, I follow this sequence:

  1. Open frame image
  2. Select all (Control-A)
  3. Copy (Control-C)
  4. Close frame image
  5. Switch to "master" file
  6. Paste (Control-V) frame in as layer
  7. Select layer on layer menu and set transparency to 50%
  8. Make sure layer is correctly aligned
  9. Turn layer transparency back to 100%
  10. REPEAT

Aligning Frames

In spite of my best efforts the frames are sometimes a pixel or two off!

In the event that a frame is out of alignment, nudge it back into position with the arrow keys. As long as each new frame is still in line with the frame in front of it, which is in line with the 1st frame, etc, the result will look fine. Don't worry about the edges of the frames where they have gone out of line, because we'll crop the image before we're done.

Above, you can see that I successfully re-aligned the layer so that it looks correct again. Getting this as close to perfect as possible is very important!

Cropping

Now that all the frames as "stacked" as layers, it's time to crop the image. You could have cropped the frames earlier but the chance of getting things out of alignment just seems too high. The beauty of the way photoshop handles layers in a crop guarantees us that our image will crop correctly and nothing will get knocked out of alignment. A word of advice: save the un-cropped version of the stack as a separate file. My first attempt at doing this series, I accidentally nudged one of the frames by fat-fingering my keyboard and didn't notice it until I was halfway through animating the image. I had to go back and re-align the frame then re-crop and re-start the animation step!

Then it's time to brew a large pot of coffee and do some flaw-fixing. One disadvantage of doing a 32 frame flyaround is that you have to do photoshop clean-up on 32 images - and they all have to match. I keep a notepad with a list of the fixes that must be made to all frames and make sure that I don't miss the fix in any given frame. In the example above, there's a rip in the paper near the rotating surface. If I forget to photoshop that out in one frame it will "appear" and "disappear" when the final image is animated! You need to be extra careful of CCD dust bunnies with a flyaround image because the dust bunnies will not move, whereas flaws on the model will. As usual, I visit every pixel of my image, fixing moles and specks and making sure to correct the background flaws. This step is mind-numbing and time-consuming but very important.

Conversion

For this image, I want the final version to be black and white. Converting 32 frames to black and white consistently would be painful if not for photoshop actions! What we're going to do is create a simple monochrome conversion action, then apply it to every frame. This has the advantage that I can set light level cut-off points and it will actually help make the images look more consistent.

Before you start recording an action, get your image scrolled where you want it with the correct layer (#1) selected. Then bring up the actions palette and create a new action with the little "page" marker at the bottom of the palette. It will light up the red "recording" button to indicate that it's now recording the steps you take. Don't perform any extraneous steps (such as selecting a different layer to work on) or the action recorder will dutifully record that step as a part of the action. In this example, I only did two things: channel mixer b/w conversion and levels to bring the contrast and tonality to where I wanted it.

When you're done with your action, hit the "stop" button and it will stop recording. Now, you can simply activate the next layer and hit the "play" button and it will automatically perform the same conversion steps! You can see in the example above, I've converted the first few layers already - a process that took a few mouse-clicks instead of dozens and dozens.

Recently I realized that doing this with actions is the slow way. Simply create a channel mixer adjustment layer at the top of your layer stack, and do your monochrome conversion/levels adjustment there! That way the color conversion process is 100% adjustable and reversible if you change your mind.

Animation

Finally, it's time to animate the .GIF file with imageready! The way I do this is I SAVE THE FILE and then down-size it with "image size" before I pass it to imageready. Photoshop can handle large files but imageready complains about files larger than 40 MB. Personally, I think that's silly, but your viewers will complain about files that are super large, too. On the other hand, once you've gone to the trouble to clean up and layer all those files, it's a shame to waste them. In 10 years when people are using monitors that image 12,000 x 12,000 pixels then a "tiny" little 60 MB animated .GIF will seem charming. So don't waste your own effort.

When you open a photoshop file in imageready the layers are all there; it's very convenient. Bring up the animation palette at the bottom of the screen and use the little "new frame" button to create 32 new pages. These will be your frames.

Here you can see my image after I created 32 new frames

.

There's an option in imageready to have changes that are done to the first frame propagate across all frames. Since I had that checked, I got 32 new frames with the same image in all of them. An easier way of doing this would have been to have all the frames empty and unchecked the "propagate" option.

The last stage is to walk through all the frames and make sure that the frame matching each layer is activated. If that sounds like it's easy, it's because it is. You're into the backstretch now and you're almost done!

Imageready has some amazing optimization routines for animated .GIFs. When you're ready to finish, select the tab at the top of the image and ask for the "Optimized" version. imageready will think for a while and create you a much smaller version of the file; it displays the file size and download estimates at the bottom of the master panel.

When you're done, save the file using the "Save Optimized As..." which writes the optimized version to your disk.

Done!

Now, that's an eye-catching take on the old animated .GIF!!

mjr.
Bellwether Farm , Morrisdale, Pennsylvania Aug 1, 2006