Threadless

elleevee
elleevee aka Lev has been a member since January 3, 2007, has scored 3,209 submissions, giving an average score of 1.46, helping 32 designs get printed.
Alumni Club Member
This might be the most fun you'll have in photoshop all year.
Presenting a tutorial to transform any image into 3D using depth maps.

Difficulty rating: 3/5 dimensions

What you will need:


● 3d glasses (red/blue lens)
● Photoshop (6.0, CS, CS2, CS3, CS4)


Step 1: Image selection



Any picture can be made 3d. But if you really want a cool 3d image you have to search for one with interesting features. I'm choosing a pic of Harper (found in the press photos for threadless) for my test as he is obviously in the zone, and also because he is creating motion with the ping pong balls. There is some good depth between him and the table including the net bottom frame. The wall also gives us some restrictions which is good.

Things to look for in your image:
● Good depth between camera and objects
● Sense of motion
● Various objects & people
● RGB image (if in cymk convert to rgb)
● Try not to get images with red, blue or white in them (as you can see in some of my tests below the red and blue mixes with the channel displacement. Greens and dark earthy colours are great.

Step 2: Setting up your Image



Open your image in photoshop and save it as a .psd document. If you're familiar with photoshop then you know all about layers and will breeze through this part with your shortcuts.
For others here is a quick guide:

● Create a new layer from menu bar (Layer → New → New Layer)
● Name it whatever you want, or call it '3d' to remember what you're using it for.
● This layer will be used to paint over the original image.

Step 3: The Depth Map



Now the fun begins...
We'll be using a depth map which is a grey scale representation of the distances from the camera to the objects within your image. (thanks to Rafael for the definition)
The closest object represented will be white, the farthest, black and all other objects in between will be given different shades of gray.
Study your image to locate any objects you would like to pop out in the final picture.

Step 4: Greyscaling your image ("A Whiter Shade Of Pale...")





It's time to brush the objects from white to greys to black.
For the people learning photoshop you can just use a hard or soft brush and work on the layer we created earlier for all your various greys. Make sure you work from white to black and greys which you can do by clicking the colour button and selecting colours on the far left of the colour picker.

For the advanced photoshop users you might want to trace the objects out with a path to get a sharper image. Fill in the paths with your various shades of grey later.

Things to watch out for:
● Make sure the entire image is covered with greys, whites and blacks
● Don't go outside the lines of your object

Step 5: Saving your depth map







So now you have an image covered in greys. It looks pretty boring right?
This step may get a little tricky so I'll do it in point form.

➊ Click the channels tab next to layers
➋ Select either a red, green or blue channel
➌ Right click on the chosen channel
➍ Click duplicate channel
➎ It will ask what you would like to call this channel
➏ Call it whatever you want, maybe 'MAP' for saving purposes
➐ Under destination, click the drop down and select NEW, also give it the name 'MAP'
➑ Photoshop will open it as a new file (you can blur the image a little bit if you want to soften the edges)
➒ Save this file as a .psd in the same folder as the image you are currently working on
➓ Close the newly created depth map

Step 6: Applying your depth map to the original image





After going back to your original image you will want to turn off the greyscale layer that you painted over the top of your original picture.
Make sure all the channels are visible again.
As this is a menu step I'll do point form once more.
● Click the layer of your picture
● Click channels tab and highlight the red channel by clicking it.
● Make sure all the channels are still visible but the red channel is just highlighted.
● Click the menu bar at the top for Filter → Distort → Displace

This part will require some back and forth, apple z, ctrl-z moments as you calibrate the level of 3d you need before it starts to break up. It's kind of like a sweet spot you need to find.
Have your 3d glasses ready to test the effect of the 3d map.
As you clicked the red channel you'll want to horizontally shift the depth map to the left. Using integer scales.
So to do this set the horizontal scale to -5
Set the vertical scale to 0 (as you don't want it to shift up)
Make sure the displacement map option is: Stretch To Fit
Undefined Areas: Repeat Edge Pixels

Click OK. It will ask for you to choose the displacement map which should be where your original image is located on your computer. Open the one you labelled MAP (or whatever you called it)

Yo Wow! the image should be 3d!

But now we need to shift the blue channel in the opposite direction to make it more 3d.

So repeat the steps for the blue channel that you used on the red channel. However this time instead of setting horizontal scale to -5, set it to 5, as it needs to go to the right. Select the same map again and the image should be 3d!



Now you can undo a few times and try stronger shifting on the displacement values, try doing from 1-10 and see how extreme the displacement effects the image.

Step 7: Find a New Image & Repeat!

Keep practicing on different images, and adjusting different horizontal values to get the 3d effect to pop better.
For more advanced 3d effects you can also use gradients to simulate perspective and vanishing points which are effective on walls and roads.



Congratulations now you have the power of 3D!!!!!! enjoy!

Add your 3d test pics here!

















Page:
1 2

otas32
otas32 on Sep 01 '09 at 9:35pm
Good tutorial. Thanks for the info!

For those who haven't tried it, another (and very quick) way of accomplishing the two convergent stereoscopic images you need to create an anaglyph is simply to snap one, then slide the camera an equivalent of the distance between both your eyes which is a little under 3" and take the other shot (don't worry about being exact, you can correct it later - meaning you place them farther or closer appart using your anaglyph glasses to help you get the right distance). Just make sure the camera is perfectly straight when you take both, an alteration on the vertical line between both shots will screw up the result. Even if you tilt the camera, and the distance is not right, there's a really good (FREE) program called Anaglyph Maker 3D (http://www.stereoeye.jp/software/index_e.html).

On regards to the Depth map I'd like to suggest (for those perspective-pov minded individuals) that when you have surfaces perpendicular to the lens, those surfaces will have different depths all along them, so you can also paint a gradient on them, instead of a flat grey, making the "farthest" point from the camera the darker shade. And why not, paint other subjects, like the people in the shot, trying to imagine them how they would look if you painted their closest features lighter and their farthest darker. Or for instance their arms, legs, skull and trunk, can have the outermost part of their silhouette darker, since their cylinder shaped or spherical like the skull.

This will add to the effect and not make them look like flat cardboard cutouts sticking in front of the landscape, which is the result you get from painting them a flat shade of grey.

Sorry to intrude with all of this, just thought it might help those that want to go even farther with this... An couple of examples of depth maps generated by a 3d application:

http://www.3d-eye.info/depht-image-pattern-stereogram-gallery/data/media/2/SampleDepthMap.gif

http://www.formz.com/forum2/messages/142/19101.jpg



Remember the camera though, it's the quickest and most precise way of doing it, and try to shoot angling up or down, and having objects with flat faces in the shot, this will help lot.



Thanks again for this tutorial, I like finding even more ways of creating anaglyphs! :)
22 days later
StrayGhostie
StrayGhostie on Sep 24 '09 at 9:51am
OMGOSH! and i have 3d glasses sitting right on my desk! so glad i kept these...
22 days later
EN AJUSTES
EN AJUSTES on Oct 17 '09 at 6:15am
This blog just made my brains go hyper-speed into the ceiling. I shall take a 3d picture of them.

Thank you so much for sharing!
Goldendust
Goldendust on Oct 17 '09 at 6:20am
I want to find my old 3D dinosaur shaped glasses now.... although, they might be red/green. we'll have to see.
EN AJUSTES
EN AJUSTES on Oct 17 '09 at 7:50am
I had one of those too! BTW, I've been succesfully looking at the pictures posted here with red/green
plastikaa
   plastikaa on Oct 17 '09 at 8:20am
I knew there was a reason I have some contact lenses lying around - mind I could just tint my glasses red/blue.
25 days later
metroidmime
metroidmime on Nov 11 '09 at 3:10pm
Thank You So MUCH! Im editor of my school's yearbook and we are making a 3d yearbook this year, and this has helped SO much so thank you again!
metroidmime
metroidmime on Nov 11 '09 at 3:15pm
PS: You can get free red/blue (or anaglyph) glasses here:



www.rainbowsymphony.com/freestuff.html
62 days later
sohail84
sohail84 on Jan 13 '10 at 2:40am
thanks a lot this was much helpful
79 days later
SoraNobodie
SoraNobodie on Apr 02 '10 at 8:44am
Where do i get 3D Glasses??? The movie theatre ones don't work!
stevmcnally
stevmcnally on Apr 02 '10 at 9:21am
Really helpful tutorial! Thanks a million!
23 days later
Dreadful z
Dreadful z on Apr 25 '10 at 5:53pm
Amazing tutorial!! I'm gonna be turning everything 3d for weeks!

I was having a few problems with the final step, my images just didn't seem to be working as well as the ones you have posted. I tried shifting the blue channel instead and the problem went away!



Thanks :)
ratkiss
   ratkiss on Apr 25 '10 at 6:02pm
omg

I only have the recent 3d glasses so I colored in the lenses red and blue with a sharpie.



it works! :D
stubby43
stubby43 on Apr 26 '10 at 8:33am
I have a pair of 3d glasses but their blue and orange.



Still it looks 3d and amazing.
Roostersauce
Roostersauce on Apr 27 '10 at 4:22pm
jayrawz on Aug 27 '09 at 10:53am

*watches blog*
8 days later
you lied to me
you lied to me on May 06 '10 at 2:55pm
this isnt in 3d at ALL! you lied to me you lying sacks of crap
36 days later
Mosquito88
Mosquito88 on Jun 11 '10 at 5:29pm
just found some 3d glasses! let me try this out!
Mosquito88
Mosquito88 on Jun 12 '10 at 6:49am
Wow that stuff works so good! :D thanks man!

sweet n sour
   sweet n sour on Jun 12 '10 at 8:04am
d3d on Aug 21 '09 at 11:25am
that's awesome. i'm just posting so i can find my way back here later. i'm going to make so much 3d porn.

hahahahahahaha
13 days later
pickupRINGO
pickupRINGO on Jun 25 '10 at 2:16pm
it looks awesome with the 3d glasses!!
35 days later
hipe-0
hipe-0 on Jul 31 '10 at 12:09pm
I love this !

... note that you can also use Photosculpt software to create a depth map instead of painting it yourself.

Click to download the (free) trial at www.photosculpt.net
11 days later
mype4nut
mype4nut on Aug 11 '10 at 10:35pm
I haven't commented on anything in... forever. But I wanted to say that this is made of awesome.

(Found randomly via Stumbleupon, fyi.)
22 days later
_clint
_clint on Sep 03 '10 at 3:02pm
Great stuff, thanks.
I plan to start experimenting today!
Wanna see if the warp tool can be used to "tuck" the rear image behind its 3-d overlay.
Also curious to see if the gradient tool can be used to give the overlay layers 3-d curves, ie., rounded arms, legs, etc.

Thanks for this post!
(using StumbleUpon)

_clint
_clint on Sep 03 '10 at 3:05pm
p.s.: thanks hype-o.
17 days later
radiomode
   radiomode on Sep 21 '10 at 9:30am
so cool, I will do this for my family portrait
7 days later
Mosquito88
Mosquito88 on Sep 29 '10 at 6:37am
@radiomode. I will. send me an email: mynameiskoen at hotmail dot com
Mosquito88
Mosquito88 on Sep 29 '10 at 6:45am
sorry I read 'who will' . woops.
66 days later
ubihipija1
ubihipija1 on Dec 04 '10 at 10:23am
Yea karahana from trance pleme is the best yea...
28 days later
Ornaart
Ornaart on Jan 01 '11 at 1:33pm
I have tried it and it worked great! Thank you for a fabulous tutorial!
16 days later
eknoem
eknoem on Jan 17 '11 at 3:53pm
3D converting. That's very interesting issue:
1. What is the convergence between grey scale of map and 3D effect? I've tested a few options and I haven't seen such big difference. There was no difference in displacing objects, only in transparency.
2. Should the 3D effect be defined by different disortion of objects? In your images the disortion of every objects is the same, so don't you think it's kind of pseudo-3D effect?

Maybe I didn't understand correctly every point of this tutorial, don't be hesitate to correct me!
244 days later
BookDating
BookDating on Sep 19 '11 at 3:39pm
very cool
vagrant_beard
vagrant_beard on Sep 20 '11 at 4:33pm
Excellent tutorial!
5 days later
melanies felony
melanies felony on Sep 26 '11 at 5:48am
This is my fav thread ever! I'm glad BookDating revived it.
165 days later
Suyumbike
Suyumbike on Mar 09 '12 at 7:29pm
WoW This is really a great tutorial!

Page:
1 2
(84 comments!)


You must be logged in to leave a comment.

Check me out, I got printed!



My gallery photos

I haven't submitted any photos. I guess I don't want free money.

My designs


All about me

work on the web
elleevee
Flickr
Vimeo

old threadless account
thelovefanclub