How to Make 3-D Progress Photos

By far the most popular part of this site (besides my amazing writing and biting wit, of course) are my progress pictures. I know, I know, you thought I was going to say “my great ass.” I’m shocked too. My progress pictures aren’t actually image files but interactive Flash movies. I’m going to show you how the magic happens with a tutorial which includes the Flash file in case you want to try making one yourself. I would not recommend trying this unless you have at least a passing familiarity with Flash and Photoshop. It’s not for newbies. I also don’t have the time or inclination to offer tech support.

It’s long, so we’ll continue after the jump.

You will need a camera, Macromedia Flash MX and a photo editing program, preferably Adobe Photoshop. Basic knowledge of how to use these programs would be really helpful too.

It’s best if you have a digital camera with a timer. If you don’t have a timer on your camera, grab you closest friend or trained monkey to snap the photos for you. Find a well-lit spot that has a solid background. A solid painted wall will do, but make sure that your clothing and skin contrast against the color of the wall. Later on you are going to have to cut out the outline of yourself from your photos and it is much easier if you are standing in front of a contrasting color.

You need to take 5 pictures of yourself – facing forward, forward at an angle, sideways, backwards at an angle, and facing backwards. It helps to mark your spot on the floor with a paper clip or Post-it or anything small and unnoticeable so you rotate around the same spot. Otherwise your final product might be jumpy if you start drifting forward and backward instead of just in a circle. The less you move the camera between shots, the easier it will be to line everything up later.

I always cheat by only taking pictures of 180 degrees of rotation and then flipping the middle 3 images horizontally to complete the illusion of a 360 degree rotation. However, this means you need to be wearing symmetrical clothing and must remove anything that will create a continuity error in your movie, like watches or rings. Or you can just take 8 pictures instead of 5. Whatever.

Take your pictures and load them on your computer, either directly if you have a digital camera or by developing and scanning them if you’re using film. This is where the digital camera will save you lots of time. Open up Photoshop or the photo editing program of your choice and put all the photos in a new file, each on its own layer.

You now want to line up the photos so that your body is basically in the same spot in each of them. I find the easiest way to do this is to turn of the visibility off all but the bottom two layers. Then set the opacity on the second to bottom layer to about 50% or so. Now you can see both layers and line up the images so they overlap. Turn the opacity on the second layer back up to 100% and repeat this technique for all the layers. If you took my advice by marking your spot and not moving the camera, the images should line up fairly naturally. If you didn’t, I told you so! Nah, nah!

Now you want to cut out everything from the picture except for your body. If you are satisfied with the way your pictures look as they are, you can skip this step. But the animation usually looks smoother if all the background imagery is removed.

On each layer, use the magic wand tool to select the background of your image. This is where it really helps if you have a contrasting background. Now “select inverse” and feather the outline by 1 pixel. Select inverse again and hit delete. The feathering gives the shape a softer outline.

Now crop your file of any extra space and resize it to however tall you want it to be. I chose 400 pixels, which is what size the image in the Flash movie is. Export each layer as a jpg. Download the flash file (.fla) that I created and open it. You will need at least Flash MX to open the file. Import all your images to the library. (I replaced the images of myself in this file with images of a bouncing dot because I don’t want my pictures getting passed around even if you can just get them off my site. I am irrational like that.)

Double click on the “Person Movie Clip” movie clip in the library. All you have to do is place each one of your photos in its own keyframe in this movie clip, making sure there is a “stop();” action on each frame. You can add or remove as many frames as you like. You can use Modify -> Transform -> Flip Horizontal to flip the 3 images in the middle of your rotation.

You’ll probably also want to change the “Weight Text” graphic so it accurately depicts your weight. Then publish the movie and you should have your own 3-D progress photo! Hopefully that wasn’t too confusing, but writing coherent tutorials about graphics editing is difficult.