Threadless in 3D!!!!!!!

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!










Watch this
Page:
  1. 1
  2. 2
stubby43

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 profile pic Alumni

oh man, i got to get me some 3d glasses to check this out
it looks awesome though!

elleevee
elleevee profile pic Alumni

no worries mateys, i think you can get free glasses sent to you somewhere on the interweb

squatterjohn

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

omg whaaaaaaaaaaaaaaaaaaaaaaaaaaaaat

nikolina100

holy shit! whoa! dang! awesome!

speedyjvw
speedyjvw profile pic Alumni

holy moles!

migreyes

Can't wait to try this.

hello.kristen

woweeeee! i should've kept my 3D glasses from Harry Potter!

d3d
d3d profile pic Alumni

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

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...

Edamame Obake

amazing!
please don't delet this blog!

stothemofob
stothemofob profile pic Alumni

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 profile pic Alumni

forget it, i just read the bit at the start, i guess i'll be investing in some 3d glasses

markexander

Awesome! They sure work. Luckily I have the red/blue 3D glasses to check this out!

jess4002
jess4002 profile pic Alumni

sweeeeet!

dmgo

Holy crap this works! I have the 3D glasses and am completely awed. Nice job, elleevee. You are officially awesome.

elleevee
elleevee profile pic Alumni

yup you'll need the 3d glasses with red and blue lenses (anaglyph glasses)
p.s. i've added two more test pics :-)

Cameraman14

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 profile pic Alumni

time well spent cameraman.
p.s. updated with two more test pics

eskimokiss
eskimokiss profile pic Alumni

you're a legend lev.
they look awesome!
i'm officially 'watching' this blog.

eskimokiss
eskimokiss profile pic Alumni

this could work equaly well with designs, particularly if they use photo elements!

elleevee
elleevee profile pic Alumni

cheers paz
give it a crack if you get some free time

spacesick 2

ooh 3D designs that sounds fun

eskimokiss
eskimokiss profile pic Alumni

I wonder if 3d would work with glow ink?!

elleevee
elleevee profile pic Alumni

perhaps... although the 3d effect loses some of its pop when it gets printed through cmyk :-(

Tikimasters
Tikimasters profile pic Alumni

Haha wow this is awesome! Once I figure out PS I will be messing around w/my 3d glasses

aled
aled profile pic Alumni

Hahah madness

Krimson
Krimson profile pic Alumni

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 profile pic Alumni

This is awesome by the way.

andyg
andyg profile pic Alumni

Dang! Where can I get 3-D glasses?

TheInfamousBaka
TheInfamousBaka profile pic Alumni

I need to get my 3d glasses from my Coraline DVD and look at these when I get home.

kim.cola

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.

cshimala
cshimala profile pic Staff

so rad!!!

jayrawz
jayrawz profile pic Alumni

watches blog

jayrawz
jayrawz profile pic Alumni

what an awesome tutorial!

otas32

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! :)

StrayGhostie

OMGOSH! and i have 3d glasses sitting right on my desk! so glad i kept these...

EN AJUSTES

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!

Page:
  1. 1
  2. 2
No account?
Join Us