Today I want to show you a way to create an amazing 3D depth effect. I have seen this effect on http://dragoninteractive.com/ and I think, this is a really great way to give your website a 3D feeling.

Step 1

Create a new document 800×600px. Then create also a new layer and call it “Right Side”. Take the Pen Tool and make a shape, similar to this one and fill it with #464646. After this rasterize it.

Step 2

Create a new Layer, call it “Left Side”, fill it with #626262 and put the layer below the layer “Right Side”.

Step 3

Create a new Layer and grab the brush tool. Set it to a size of 35px, a hardness of 0 and the foreground color to white. Then draw a line from left to right with an opacity of 40%.

Step 4

Set the brush to a size of 12px and the opacity to 50 and draw another line above the previous made line. Then change the opacity of the layer to 20%. Now we have to cut out a little bit of the line on the left side. To do this, make a selection of the “Right Side” layer by pressing the Control Key and clicking on the small Thumbnail of the layer in the layers panel. Now invert the selection with pressing Control + Shift + I and press the delete button.

Step 5

We have to make this again, to create the 3D effect. It very similar to the two previous steps. Create a new layer, grab the brush tool, set the size to 40px, the foreground color to black and the opacity to 50%. Draw a line from right to left with a brush size of 15px and a opacity of 60%. Now make a selection of the “Right Side” layer, invert it and press delete.

Step 6

Repeat this steps, until it looks like the same as the picture below and try to make the lines a little bit different than the others.

Step 7

Now create a new layer, draw a rectangle at the top of the picture and fill it with a gradient from grey to a darker grey.

Step 8

Create a new layer. Grab the brush tool again and set the foreground color to black. Draw with the brush until it looks like the image below.

THATS IT. It’s a simple tutorial, you can change a lot when using on a webdesign.