Dec 22

Stumble!

Author: elleevee aka Lev has been a Threadless member since January 3, 2007, has scored 3209 submissions, giving an average score of 1.46.

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.

Some more pics:

Read more please visit  Source: Threadless

written by Pinewood Design \\ tags: , , ,

One Ping to “Transform ur photo into 3D !!!”

  1. http://www.hwyuan.com/?p=2220 Says:

    Tks…

    I really need it,thank you very much!!!…


2 Responses to “Transform ur photo into 3D !!!”

  1. 1. コンバース オールスター Says:

    他のです、特許革オックスフォード?はです作った編み上げ靴プレーンつま先こと薄い底が小さなつま先。ファンキーな偉大な靴空気ポンプ技術を誇っていますAiratorsのような心に留めて足が冷える、子供得ることができない満足のいく!

  2. 2. Single Row Angular Contact Ball Bearings Says:

    Greetings from California! I’m bored to death at work so I decided to browse
    your blog on my iphone during lunch break. I really like the knowledge you present here and can’t
    wait to take a look when I get home. I’m amazed at how quick your blog loaded on my phone
    .. I’m not even using WIFI, just 3G .. Anyhow, superb blog!

Leave a Reply

*

Clicky Web Analytics