Create 3-D text with some extreme lighting

Today we are going to take an object/text, change it from 2-D to 3-D and give it some realistic effects. We are going to be using Illustrator to create the object, then bring it into Photoshop to add highlights and shadows.

Step 1

So lets open up Illustrator and create a 5”x5” document. Create some text or a logo. Now you want to make sure you pick a color other than black or white or grays, so that we can pick up some of the shadows on the object.

Step 2

Alright, now we want to turn our object 3-D, so go to Effect>3-D>Extrude & Bevel. My settings are shown below, but depending on what you are using for an object it may be different. What we are trying to achieve here is an interesting angle. Play around with the settings until you get something you like. Make sure you change around the lighting to get the most amount of contrast to make it easier later on.

Step 3

That’s all we are going to do in Illustrator, so now copy your image (apple+c) and paste it into a 1680x1050px Photoshop document. Stretch it out to fill the space. Since it is a vector image we can stretch it out when it is first pasted into Photoshop and it will not get distorted. After you press the check box it gets converted to a raster image and will distort, so make sure you get a size you like. You can always make it smaller, just not bigger.

Step 4

Now we are going to setup a background. So first change the layer name to 3-D text and the hiding it by clicking on the eye on the left side of the layers.

Step 5

Lets grab this wooden texture here and bring it into our document. Resize it so it fits the size of the document.

Step 6

We are going to give the wood some darker color, so we are going to go in and grab a dark brown color. Now go to the elliptical marquee tool, set your feather to 100px and make a circle about the size, vertically of the document.

Step 7

Now press apple + shift + I to select the inverse and fill the space with the brown with option + delete. Change the layer’s blend mode to overlay.

Step 8

Make a circle, like with the brown, but this time we are going to pick an yellow/orange color and make a circle in the bottom right corner. Fill the circle with the yellow and change the blend mode to overlay.

Step 9

Take that yellow layer and stretch it out so it fills the area without the brown we filled earlier. Hold down option + shift to keep the yellow in the bottom right.

Step 10

So at this point our image is starting to have a light source from the bottom right. Lets make it brighter in that corner to really make it look like the thats the source of the light. Lets make a new layer above our yellow one and create a radial gradient from the bottom right corner. Change the blending mode to overlay. Now we need to copy the layer a couple times to make it brighter. So do apple+j twice.

Step 11

Now it’s time to bring in our logo. Make sure you have your 3-D text clicked, then use your magic wand to click on the face of the type. Make sure the tolerance of the magic wand is at 12. Now press apple + j. This will give you a new layer with the face of the type on it.

Step 12

Repeat step 11 except, use the magic want to select the sides of the text.

Step 13

Now we are going to add some highlights and shadows to the face of the text. Lets create a new layer, apple + click on the text face layer to load it. Click on your gradient and select a yellow color, similar to the one we used on the bottom right corner. Click and drag your gradient from the bottom right corner of the text to the top left corner of the text. Change the blend mode to overlay.

Step 14

With the type face still highlighted, create a new layer and make a smaller gradient using white. Change the blend mode to overlay.

Step 15

Grab a dark brownish-red color and drag a small gradient from the opposite corner and change the blend mode to multiply.

Step 16

Now click on the side text layer and press apple + m to pull up the curves window. Set it to something like below, the sides are going to be dark because there isn’t really any light hitting them.

Step 17

Now we need to figure out what the path of the light is so we can make some shadows. We do this by creating two lines both starting at the bottom right corner, out light source, and touching the corner of the widest spot, ours being the bottom corner on the D and the top corner on the d, like so.

Step 18

Now that we know roughly were the shadow is going to start, we can start buidling it. Take your polygonal tool and cut out a shape like below, and fill it black. Make sure the shape doesn’t go to the right of the text. Now drag that layer so it is below the text.

Step 19

Now we are going to modify the shape we just made, so first off I want to create a layer mask. I do this by clicking on the square with a circle inside of it, on the layers pallette.

Step 20

Go in and start painting around with the black brush until you get something more natural looking, like below.

Step 21

We can get rid of the two lines we made, because we arent’ going to need them any more. We need to give the text some texture, because right now it doesn’t look very real. Over at Lost and Taken the have just added these film textures that will work perfect for us, grab one of these and bring it into your document. Size the texture so it has somewhat of a similar angle to your text. Do an apple + click to load your text face, apple + i to get the inverse of the text face, and delete.

Step 22

Finally I’m going to add a bevel to the text face layer to give it more of an edge like below.

Thats it. Keep playing around with it, there are always more details you can do to it. This is what I got.


Download the .psd file here

Visit and bookmark PsPrint Online Printing and learn to see how we print brochures that make lasting impression.

You might also like these articles...

Only comments in English will be approved!


  1. 14/07/2010

    the part for the layer mask and using a brush was a bit confusing.It completely threw me off.

  2. 17/07/2010

    i will try it, thanks

  3. […] 3-D text with some extreme lighting […]

  4. milon

    I am pleased to see your creation. Thank u so much

  5. jimmy

    i think i know why people are having so much problems with steps 6-8…guess your assuming people are creating a new layer…and their not…because i did your tut and i didnt even read your instructions i just saw the results and ended up doing the same thing…but once i read comments and read your instructions i see you didnt mention a few things to make things easier for the beginners or non pros…just a suggestion

  6. 28/07/2010

    Yeah, I try to walk the fine line between over explaining steps for more experienced designers and under explaining them for the less experienced ones, and sometimes I assume certain things are common knowledge when they aren’t.

  7. 30/07/2010

    AMAZING tutorial!!
    Here are my results:
    Thank you!

  8. HELP

    I am stuck on the step where you add highlights to the LOGO part… I add the gradient… then I hit overplay, and the entire logo turns the same colour, it’s not overlaying properly.

  9. Rinku

    Thanks.nice tutorial. really helpful

  10. […] Create 3-D text with some extreme lighting […]

  11. […] Create 3D Text with Some Extreme Lighting […]

  12. […] Entrar al Tutorial: CLICK AQUI!!  […]

  13. 24/08/2010

    proffesional work great thanks :)

  14. TwoShoesKeelan

    On the first step, in illustrator, i can only make text bevel if ive typed it straight in using text tool. But I have a logo I made in photoshop and have deleted the surrounding white so its just the black writing (not type layer), yet when i bring it in to illustrator and bevel and emboss it, it does the box around instead of only the text… any help on this one?

    Thanks, looks great though, cant wait to get over this hump and get going :D

  15. 27/08/2010

    You are going to have to re create the logo in Illustrator so you can edit the vector image. If that doesn’t work you can try creating the 3D part of this tutorial: that I created and just skip over the part in Illustrator.

  16. 01/09/2010

    Thank u so much so great tutorial for 3D text thanks.

  17. […] Entrar al Tutorial: CLICK AQUI!! […]

  18. 03/09/2010

    thanks very nice 3D design


  20. […] Create 3-D Text with Extreme Lighting In this tutorial you are going to take an object/text and change it from 2-D to 3-D and then give it some realistic effects. You will be using Illustrator to create the object, then bring it into Photoshop to add highlights and shadows. […]

  21. Very interesting effects, thanks for article!

  22. […] 37. Create 3-D text with some extreme lighting […]

  23. 10/10/2010

    Tyler is my new best friend

  24. […] 24. 3D text with extreme lighting […]

  25. James Roach Allen

    so, can i have a copy of the psd pls?? i got a hard time in coping up with your tutorial..(because of lack of the “color used” the interface and so others)
    i tried to create one but i wast satisfied so much..

    pls send me on or post it here.. tnx

    by the way.. very nyc design!!!