Results tagged “lessons” from Swell 3D

When I made the header art for this site, I knew just the photograph I wanted: an attractive woman wearing red-and-blue glasses, looking at the logo, expressing both surprise and happiness. And the photo had to be in 3-D. As you can see at the top of this page, I got just what I wanted. But I didn't find what I wanted; I had to make it.

Here's what I found: a stock photograph by Sharon Dominick, on iStockphoto.com. (And by the way, if you're not buying your stock photos from iStockphoto, you are wasting money. Go sign up with iStockphoto, or you're fired.)

I could tell right away that -- besides facing the wrong way, and looking in the wrong direction, and not wearing 3-D glasses, and having hair blowing everywhere, and being only two-dimensional -- this girl was perfect. Simply perfect. Well, she wasn't quite happy enough, either. But perfect besides that. So I bought the photo.

To fix the parts that wouldn't work with my layout, I retouched the photo. I flipped the image so she faced leftwards, erased some of her hair, blacked out the lenses of the glasses, cloned out her shoulder strap, and pulled her mouth ever-so-slightly into a happier smile.

That was the easy part. But she still wasn't in 3-D. Usually, you make a 3D photo by using two separate images shot from slightly different angles. But how do you make a 3D photo from a single flat image?

I did it by making a layered Photoshop file. Each layer contained just a little less of the image than the one below it. The bottom layer had the whole portrait; the next layer, just the head; the next layer, the chin and face; and so on, until the top layer just had her nose and glasses.

The trick here is to feather the edges of your eraser just right. If you use hard edges everywhere, the edges of your layers will show up in the 3D image, and make her look like she's made of construction paper. In most places, you want to use feathered edges to make smooth transitions from one layer to the next. But in some places, you want a hard edge, for a sharp transition (such as where her glasses appear in front of her hair).

After that, I made a copy of every layer so I had two full sets. I colored one of these sets red and the other cyan, and moved the layers to simulate the two different viewing angles. Merging them into one anaglyph image gives me this:

For my header art, I colored her lenses blue and red, but I reckon I'll leave them black here. She looks pretty cool.

No matter how hard you work at it, you'll never turn it into a true stereoscopic photo. But you can come pretty close, probably close enough to fool most people, especially if you plan to use it at a smaller size, such as in my header.

When constructing your anaglyph image, you want to prevent ghosts as much as possible. "Ghosts" are the faintly seen duplicates of the images you want the viewer to see. Ghosts are hard on the eyes and brain of the viewer, and can completely ruin the 3D effect you are trying to achieve.

These examples will show that one way to prevent ghosts is to put detailed images in the background, rather than areas of solid color.

Here's a nickel. It's not in 3D, it's just a picture of a nickel, on a white rectangle. (Depending on your monitor, it might be about actual size, as if the nickel were really stuck to your monitor.)

Now I'm going to try to bring this nickel closer to you. I'm offsetting the images 12 pixels to the left and right, to make the nickel hover about three inches in front of your monitor (assuming, of course, that you are wearing 3D glasses). I'm also making the coin a bit bigger, to enhance the illusion of closeness:

Ouch! It sort of worked, but not very well. The problem is, you can still faintly see just a little of the red image through the red lens, and a little of the blue image through the blue lens. Ideally, your glasses would completely filter out these images; but in the real world, the filtration is less than perfect. The red and blue ghosts cause your brain to fight against seeing the 3D illusion (your brain hates being tricked). You can see the hovering nickel if you work at it, but it's not fun.

Maybe the problem is the white background? Let's try a solid black rectangle instead.

Yuck, that's no better; if anything, it's worse. It turns out that these ghost images will be a problem with any solid background. What are we going to do?

The trick is to put the hovering nickel in front of a busy background, one with lots of detail. The busier, the better:

Wow, now that's 3D! The ghost images have vanished into the baroque details of the background artwork. With no ghosts to bother it, your brain happily gives in to the illusion of depth, and so you can see the hovering nickel without struggling.

The lesson is, your 3D artwork will have fewer ghosts if you put detailed things in the background. Trees are good; so are clouds and starry skies, and tapestries, and canyon walls, and engravings of dragons.