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

stubby43
stubby43 on Aug 21 '09 at 3:39am
You are offically kind of awesome.



Only kind of awesome because I dont have 3D glasses to prove it works, if I had them I could upgrade you to extremely awesome.



but thanks for doing this man, I wanna try it.
digsy
   digsy on Aug 21 '09 at 3:48am
oh man, i got to get me some 3d glasses to check this out

it looks awesome though!
elleevee
   elleevee on Aug 21 '09 at 4:23am
no worries mateys, i think you can get free glasses sent to you somewhere on the interweb
squatterjohn
squatterjohn on Aug 21 '09 at 8:31am
Oh wow! I have to try this out. Not that I'm good enough to make one, but I'll have to look at those pictures at least. Now I just need somme glasses. My brother almost stole the 3D glasses from Coraline, of course they were not of the red/blue variety.
spacesick 2
spacesick 2 on Aug 21 '09 at 8:32am
omg whaaaaaaaaaaaaaaaaaaaaaaaaaaaaat
nikolina100
nikolina100 on Aug 21 '09 at 8:38am
holy shit! whoa! dang! awesome!
speedyjvw
   speedyjvw on Aug 21 '09 at 8:57am
holy moles!
migreyes
migreyes on Aug 21 '09 at 9:28am
Can't wait to try this.
TheInfamousBaka
TheInfamousBaka on Aug 21 '09 at 9:33am
I need some 3d glasses stat!
hello.kristen
hello.kristen on Aug 21 '09 at 10:56am
woweeeee! i should've kept my 3D glasses from Harry Potter!
d3d
   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.
Jeiji
Jeiji on Aug 21 '09 at 11:27am
No, that is ridiculous. HOW DID YOU FIND OUT HOW TO DO THIS, LOL! THIS IS AWESOME! I have some 3D glasses, but they're the polarized kind, not red/blue...
rodrigobhz
   rodrigobhz on Aug 21 '09 at 11:42am
This is A W E S O M E. I need 3d glasses NOW!
thrillhouse27
thrillhouse27 on Aug 21 '09 at 11:47am
best blog. ever
wowrainbows
   wowrainbows on Aug 21 '09 at 11:57am
awesome!
Edamame Obake
Edamame Obake on Aug 21 '09 at 12:02pm
amazing!

please don't delet this blog!
radiostaticstar
radiostaticstar on Aug 21 '09 at 12:02pm
whoa!
angelito
angelito on Aug 21 '09 at 12:02pm
:)
SinisterNights
SinisterNights on Aug 21 '09 at 12:11pm
best thing since sliced bread!
ivejustquitsmoking
   ivejustquitsmoking on Aug 21 '09 at 12:20pm
awesome!!!
stothemofob
   stothemofob on Aug 21 '09 at 12:22pm
great idea. but it isn't working with the cinema 3d glasses i've got on now, it just looks the same. do i need to use the old fashioned ones?
stothemofob
   stothemofob on Aug 21 '09 at 12:23pm
forget it, i just read the bit at the start, i guess i'll be investing in some 3d glasses
markexander
markexander on Aug 21 '09 at 12:51pm
Awesome! They sure work. Luckily I have the red/blue 3D glasses to check this out!
jublin
   jublin on Aug 21 '09 at 1:35pm
gah! i need some redblues!
jess4002
jess4002 on Aug 21 '09 at 3:31pm
sweeeeet!
dmgo
dmgo on Aug 21 '09 at 4:59pm
Holy crap this works! I have the 3D glasses and am completely awed. Nice job, elleevee. You are officially awesome.
elleevee
   elleevee on Aug 22 '09 at 9:06am
yup you'll need the 3d glasses with red and blue lenses (anaglyph glasses)

p.s. i've added two more test pics :-)
Cameraman14
Cameraman14 on Aug 22 '09 at 10:49pm
OK, screw you. You hear me? Screw. You. I just lost 5 goddamn hours of my life digging through old photos and making them AWESOME!!



:-)
elleevee
   elleevee on Aug 23 '09 at 5:06am
time well spent cameraman.

p.s. updated with two more test pics
eskimokiss
   eskimokiss on Aug 23 '09 at 5:23am
you're a legend lev.

they look awesome!

i'm officially 'watching' this blog.

eskimokiss
   eskimokiss on Aug 23 '09 at 5:24am
this could work equaly well with designs, particularly if they use photo elements!
elleevee
   elleevee on Aug 23 '09 at 5:26am
cheers paz

give it a crack if you get some free time
spacesick 2
spacesick 2 on Aug 23 '09 at 5:29am
ooh 3D designs that sounds fun
eskimokiss
   eskimokiss on Aug 23 '09 at 5:55am
I wonder if 3d would work with glow ink?!
elleevee
   elleevee on Aug 23 '09 at 6:01am
perhaps... although the 3d effect loses some of its pop when it gets printed through cmyk :-(
Tikimasters
Tikimasters on Aug 23 '09 at 4:56pm
Haha wow this is awesome! Once I figure out PS I will be messing around w/my 3d glasses
xiv
   xiv on Aug 23 '09 at 5:03pm
sweet!
fc gravy
fc gravy on Aug 24 '09 at 5:19am
RAD!
mype4nut
mype4nut on Aug 24 '09 at 10:07am
Totally stumbled this at work! So awesome. I'll have to bookmark it when I get home.
Andreas Mohacsy
   Andreas Mohacsy on Aug 24 '09 at 4:11pm
woooaaaah
fatheed
   fatheed on Aug 24 '09 at 4:13pm
Hahah madness
Krimson
Krimson on Aug 24 '09 at 4:22pm
It doesnt work when I use the 3-d glasses I stole from the movie theater from seeing UP. I guess I should have red the bit at the beginning about the old school red-blue glasses.
Krimson
Krimson on Aug 24 '09 at 4:23pm
This is awesome by the way.
andyg
   andyg on Aug 24 '09 at 4:26pm
Dang! Where can I get 3-D glasses?
Jason T O
Jason T O on Aug 24 '09 at 4:38pm
Thank you.
TheInfamousBaka
TheInfamousBaka on Aug 24 '09 at 4:52pm
I need to get my 3d glasses from my Coraline DVD and look at these when I get home.
kim.cola
kim.cola on Aug 24 '09 at 7:11pm
i've actually have always wondered how 3-D images were made in Pshop! Thanks so much this is a very clear tutorial! I'll be makign everything 3-D now......great.
2 days later
shimala
shimala on Aug 27 '09 at 10:51am
so rad!!!
jayrawz
   jayrawz on Aug 27 '09 at 10:53am
*watches blog*
jayrawz
   jayrawz on Aug 27 '09 at 1:03pm
what an awesome 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