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.
Rebecca says
January 19, 2006 at 9:53 pmHello! I’m a new reader, and I’m definitely impressed with these 360 views. I’m excited that you posted a tutorial just when I started reading! Anyway, I’m linking you from my site, and I look forward to reading.
Jen says
January 20, 2006 at 9:09 amDamn you’re good.
Not only do you have such a groovy site, you also share your wisdom with others. You should write tutorials for a living! I used to be a computer system trainer and if the user guides our writers put together were as nice as this, my job would have been so much easier. You rock.
Kirsten says
January 20, 2006 at 10:20 amThat is incredibly clever.
Your face looks so much thinner than last time! So does the rest of you, obviously. But the face is really striking.
I’ve shied away from doing progress pics myself because, honestly, you can’t see any difference whatsoever.
M. says
January 22, 2006 at 12:58 amOoooohhhh, I just noticed that when you rotate the first three ones, your watch switches wrists… I hadn’t noticed before though.
maddy says
February 4, 2006 at 12:39 pmHey I love you tutorial! just wanted to let you know that I’ve used it on my site :D Keep up the FANTASTIC job on your weight loss and healthy lifestyle changes!
PastaQueen says
February 4, 2006 at 3:36 pmmaddy – I’m so glad people are using this tutorial! Your pics look great. Good luck to you too!
dave says
February 19, 2006 at 5:29 pmSweet tutorial. I had my RNY 4 months ago and lost 90 lbs so far. Gettin there. Great Site.
Dave in AZ
barbie says
July 25, 2006 at 12:21 pmThanx for sharing with us! This is so awesome, I hated all my other prog pics because I couldn’t fully tell what all changed. I love this! Thanx again!!
Arindana says
July 29, 2006 at 11:08 pmOh my!
A friend showed this to me and I am impressed on 2 accounts!
First the incredible weight loss and I congratulate you and then some. Your dedication is definitely an inspiration.
Second, the 3D photo rendering is an excellent idea and I think I am going to give this a go too. I am definitely bookmarking your tutorial.
Thank you ver much!!!
Marshmallow says
August 31, 2006 at 2:17 amWow PQ! I love these 360 views of yourself; so much that I’ve downloaded your flash file and have followed your tutorial to make my own. It’ll be up on my site later – you’re a genius! Love your stuff :-D
Karen says
September 16, 2006 at 10:30 pmLove the tutorial. I am totally illiterate when it comes to things like that and even I managed to make a 3d photo using your tutorial (it’s not as smooth flowing as yours, kind of jumpy) but I am thrilled that I was able to do it. I just have one problem. Getting it on my site. How to I post it on my blog?
Thanks again!!!!
PastaQueen says
September 17, 2006 at 8:10 pmKaren – First you have to upload the flash movie somewhere. Your blog might let you do this. If not, I know free services like Photo Bucket will let you upload flash movies.
Once you have uploaded your file, you just paste this code into your blog entry and the movie should display. You WILL have to replace the YOUR_MOVIE_HERE.swf link with the URL of your movie! Hope that helps!
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″ width=”170″ height=”440″ id=”3d_movie” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”YOUR_MOVIE_HERE.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”YOUR_MOVIE_HERE.swf” quality=”high” bgcolor=”#ffffff” width=”170″ height=”440″ name=”3d_movie” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
Karen says
September 30, 2006 at 5:21 pmTHANK!! It worked. By the way Congrats on your amazing weightloss. My mom says congrats too. She wants to know what you are doing to lose the weight!!
goddess says
December 1, 2006 at 11:49 amCongrats on your hard work and progress. I have read some of your blogs. You are a delightful person, indeed. I am going to try your 3-D technique with my 13 year-old daughter who loves photography. Now, here come the however; you need a better bra and to consider some boot leg cut denim. Unfortuanely, God does not allow us to choose our talents and instead of ending up with perfect pitch and a mega-brain, I am an excellent sleeper and have superior fashion judgement. Well, wish me luck on the 3D project.
Dotslady says
December 8, 2006 at 4:41 pmI don’t know what a URL even is … more stuff to put on my list of things to learn someday. After the holidays.
Just wanted to tell you that you’ve inspired me to learn more about computers and Photoshop. I now want my own blog (which I signed up for one day and promptly forgot about).
I learned about you from a post from CUATDISNEYWORLD on sparkspeople.com. I’m losing weight with that “community”, but you are sure inspirational. I appreciate inspiration. Cute humor. I appreciate a good laugh, too. I will have to read some of your blog – you’re in my favorites and I will get back to you — after the holidays!
And your ass is HOT baby!! ;-) Keep up your good will and good works!
Michelle says
January 2, 2007 at 4:54 pmAwesome tutorial… thanks so much for sharing your wisodm. My first attempt at a 3-d pic isn’t as smooth as I would like (and my backside pic is a little blurry), but hopefully I’ll have new progress pics to practice on soon!
Dusty says
April 7, 2007 at 8:27 pmCongratulations on your amazing weight loss! Love the 3-D Progress Photos. Thanks for the tutorial!
Noelle Valdes says
August 3, 2008 at 11:59 pmYou are an insiration and funny too! I decided today after hearing you’re interview I am definatly going to make some changes. I feel like the goal is so lofty right now. I am 5’9″ and weigh 226 lbs. It will be hard but I am excited about using you’re tutorial. Thanks for shring. ;)
susie says
October 15, 2008 at 2:29 amholy crap that’s cool!
kim says
February 24, 2011 at 12:10 pmOkay this was written out so simple that i thought this would be the easiest thing ever but im slow and for some reason cant get the pictures to load in different layers at all :( if you have time to help could you please email me back. thanks so much