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 1680×1050px 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 brush. 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.
Final
Download the .psd file here
If anyone has their own version that they have done, send the link in the comments
wowww nice effect!
Very nice! Simple and elegant!
Added to http://www.psaddict.com
Hey there! Great tutorial! I really do like these tutorials where in just a few steps you get a great result. Will have to give it a go later :D
Keep em’ comin’!
Wow, it’s amazing. Can you upload *.psd file? :)
is there a problem finding the effect>3-d>extrude and bevel on CS4, ive spent awhile looking for those commands and can’t find anything
I am not using CS4, but the Effect>3D>Extrude & Bevel should still be in the drop down menus at the very top of Illustrator. Effect should be the 4th to last drop down menu. Hope that helps.
A .psd file is now available for download
They’re is nothing for effects I can check my older photoshop CS, but new in CS4 is a 3-D drop down menu, effect is not there though, maybe I am just blind…
There is a video here where a guy creates a 3D box in Illustrator CS4. The same effect can be applied with text. Hopefully that helps
Thank you a good lesson
[...] Denis Designs " Create 3-D text with some extreme lighting – [...]
[...] Den Link zum Tutorial gibt es hier. [...]
GREAT turorial!! Absolutely love it! One problem though, I can’t find the film from step 21 anywhere. Would you help me with that?
Oh, sorry I forgot to put on the link, it is http://www.lostandtaken.com/2009/01/11-old-grungy-film-textures.html
Thank you :D This made the text much better!
Hey, this is a really cool tutorial. One thing, though — I can’t read the font on your site. I actually had to edit your CSS file so that I could read the tutorial.
But, again, great tut!
very good!
but hereafter write tutorials for PC’s also! ;)
Hi, awesome tutorial, looks great!
How can I make the selection on step 6 and 7 and then invert it? I use CS3-Win.
@McH Use the circle marquee from your toolbar and change the feather to 100px. Then for a PC do control + shift + I.
@lawrence77 for the most part control replaces the apple key for PCs
Hi, I cant get it. If I use the tool circle “L” it does not make a selection but fill it with a color and I can inve3rt it to fill the4 rest instead of the circle. what I am doing wrong? Can you please specify the steps 6 and 7? Is there an another circle tool that doenst appear in my tool bar?
@McH your circle tool might be under your rectangular marquee tool at the very top left of your toolbar. If you click and hold down that button, other options will come up. One of those options is your elliptical marquee tool, that’s the one you are going to want to use.
Select the area with that and then control + shift + i to get the inverse
Hopefully that helps
Yeah man i aint getting it. What were u on when u wrote this? Really wat were you thinking? Well better lck next time
ps. this tut sux
I totally agree with the hobo
Ah, only the first 3D step is made in Illustrator and the rest on Photoshop, right?! That could be why I am missing the described tool.
@McH yeah sorry, I should have been more specific about that.
@hobo and @Johnny Boy Sorry if you don’t like the tutorial, but if there is something you don’t understand you can just ask.
[...] 21.Create 3-D text with some extreme lighting [...]
http://i263.photobucket.com/albums/ii143/Genetastic/desk.jpg
Made a desktop background with this. Thanks a lot.
I appreciate your effort, but Steps 6 thru 8 do my head in! Am I using a brush? Am I filling (edit>fill)? “Option”? Is that ALT on a PC?
Sorry mate, but everything was self-explanatory up til then.
cheers, Johno
[...] Open up Illustrator and type out a word of your choice, in my case I used the word “FIRE” in ITC Franklin Gothic Heavy. Make sure that each letter is in a different text box. Now using Effect>3D>Extrude & Bevel set up your letters in an interesting way, keeping in mind that they are going to be on fire. It doesn’t have to be exactly the same, but something like what I have below. If you are having trouble with the 3D text, you can look at the tutorial on creating 3D text. [...]
@Johno: You are using the fill option in steps 6 thru 8. When you make circle with the marquee tool, the circle gets feathered at 100px (shown at the very top of step 7).
Love the look of this one. Haven’t tried it yet, but will. Thank you.
TS
Amazing! Thanks!!
Great tutorial! Love the simplicity of it. Looking forward to your next one!
Impressed!
I love it! It’s simple, nothing too fancy, but really striking! Excellent effect, thanks for sharing this! Your work is really good, keep it up!
[...] Create 3-D text with some extreme lighting [...]
I really like this effect, thanks for the tutorial. I can’t get mine to look right for some reason.
Great Photoshop Tutorial, i really learn something.
[...] 2] Design design [Tutorial] [...]
This is my new favorite site!! :D
Wicked tutorial btw!!
I luv this website (wink wink) this tut was never good im sorry
Tyler is my new best friend
I can get it to inverse the selection with the circle but I can’t do the option+delete thing so the brown gets darker. What can I possibly be doing wrong?
The option delete is simply filling the area with the brown, so just make sure you fill the area and change the blend mode to overlay.
Oh got it that makes sense, but Im still wondering how to bring the wood image to the background. I tried with the place option but I don’t know if theres a better way to do it?
I usually just open up the document in Photoshop and click and drag the image into the document.
Great tutorial, i have a question. when using the magic wand tool and having to press apple+j it wont all me to do that. cant figure out why.
[...] 3D Text With Extreme Lighting [...]
love this tutorial. but, when i change my blend mode to overlay, the page just grabs the background layer and turns completely white. what am i doing wrong?
thanks
depending on which step you are on, you should be making the overlay on the layer you are working on. So if you are on step 7 and you are filling the area with the brown, you should make a new layer first and fill with the brown. Take that brown layer and change the blend mode of that to overlay.
Can you build a little more on step 20 please? I got the layer mask but don’t really know where’s the brush and settings that I have to use next.
i try’d this tutorial and i came out this: http://i39.tinypic.com/vg7ls9.jpg
what you think?
That looks great! Nice work
Hi, I am using Photoshop ver 7.0. But I couldn’t find effect>3D. Can u please help me, how to create with PS 7.0?
Added this to my bookmarks
To get the 3D effect you need to have Illustrator, CS at least I believe.
Hi Tyler, I am trying to build a website and I came across your tutorial and I loved it. I tried doing it but I cud bcos I cudn’t get the step 6 to 8 so a thot crossed my mind. Can u be kind enuff to do exactly this for me, I’lld give u the name of my outfit and you could send me the JPG or TIFF file when u’re thru, due credit wud be given to you on the homepage. Plz reply. Thanx
I can give you a price quote for how much it will cost me to do. Or if you have a specific question, I can help you with that.
ok…I am having a very tough time from steps 6. wen I select the ellipse tool and draw the circle, I can’t inverse…what do I do??? or is there any other alternative or asides from using the shortcut keys, is there no particular place I can click to know it actually works??? Thanx.
[...] Create 3D Text with Some Extreme Lighting [...]
[...] Create 3D Text with Some Extreme Lighting [...]
[...] 22. Create 3-D text with some extreme lighting [...]
[...] Tutorial Link [...]
[...] Tutorial Link [...]
[...] Create 3D Text with Some Extreme Lighting [...]
[...] Create 3D Text with Some Extreme Lighting [...]
[...] Haz clic aquí para ver el tutorial» [...]
[...] Create 3D Text with Some Extreme Lighting [...]
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….
[...] Tutorial Link [...]
Thanks lot…
i came up with this..
http://i27.tinypic.com/ej5zt.jpg
@niroperera nice!
@I am what I am:
If you go into Select, inverse should be right there.
[...] “Create 3-D text with some extreme lighting” Category: Design Related Posts [...]
The link to wooden texture at step 5 should now be http://www.unsigneddesign.com/wood5_edited.jpg
This is my first try http://files.getdropbox.com/u/787781/ORBY-light-and-shadows-small.jpg
Hoang: Nice outcome! Also, thanks for the updated link
Tyler, you have a very nice site.
I learn many things here.
Thank a lot.
[...] Create 3D Text with Some Extreme Lighting [...]
[...] 3-D text With Some Extreme Lighting [...]
Thanks for that, here my poster
http://i8.photobucket.com/albums/a5/nadeem_naz/Goodwithoutgod.jpg
[...] Create 3D Text with Extreme Lighting [...]
[...] Create 3D Text with Some Extreme Lighting [...]
Great tut, great website. Sometimes just the little details are left out.. but, I got there. I guess it is better to learn the hard way. Here is my attempt. http://www.flickr.com/photos/42029728@N04/3878277657/
[...] (layering effects and adding grunge) so if you dont own both of these programs then skip this tut. [denisdesigns via [...]
[...] Ver Contenido‘ [...]
Thanks for the tuto!!! GreaT!!
What font what used in this? thanks.
Really half-assed tutorial. I don’t understand why people cannot write a tutorial properly they just slur through it like a lazy bum. If it wasn’t for the PSD file I wouldn’t have come close to learning anything half the stuff you said was wrong from what you did in the PSD file.
Take your time next time when writing a tutorial.
Lamer:
Thanks for the input. I really enjoyed reading the tutorials on your website!
U_DUB
It is a variation of Frankin Gothic Demi Condensed
[...] Create 3D Text with Some Extreme Lighting [...]
[...] Create 3D Text with Some Extreme Lighting [...]
[...] 10. 3D Text With Some Extreme Lighting [...]
[...] Create 3-D text with some extreme lighting [...]
[...] Create 3-D text with some extreme lighting [...]
wow wicked tutorial Ttyler, can’t wait to have a look at some of the others.
Really generous of you to put this up for everyone and ON TOP OF THAT answer their questions!
Your the man.
my work is here thx aloooooooooot :D
http://img10.imageshack.us/i/shbabgedydgedan.jpg/
Very nice! Simple and elegant!
If you’re interested in some grungy textures head over to LoveTextures all photos in Hi-resolution (300dpi) to be used for print or on screen.
http://www.lovetextures.com/index.php/category/grunge/
can you please answer my question I’m using photoshop cs4(portable)..I’m not able to find the Effect>3-D>Extrude & Bevel. thanks a lot hope you will answer my question.
The 3D effect is in Adobe Illustrator
Tyler, I thought the tutorial was great! Very helpful. One thing, however, you were missing quite a few steps in the tutorial where I personally wasn’t sure what to do, and there were no steps. I would encourage you to expound and give details on each point, like when to make a new layer and what to click and whatever. Thanks again!
3d very nice, thank you so much
Drew:
Thanks I’ll keep that in mind for my future tutorials.
If you have any specific questions about the tutorial let me know. Thanks!
fantastic tutorial, really helped me.
thank you!
Thanks for the tutorial. But you lost me at step 20. The lasso (shadow) is already filled in black. When I use the black paint brush… still black, of course. Can you explain what you mean by painting black after creating the mask?
While you are using the mask, paint the area with the black brush. Using the black brush will mask out the areas so we get a smoother edge.
Black masks out the area, white fills it back in.
[...] 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. [...]
[...] 19. Create 3-D text with some extreme lighting [...]
[...] 3D Text with Extreme Lighting [...]
Thanks for the tutorial. But you lost me at step 20. The lasso (shadow) is already filled in black. When I use the black paint brush… still black, of course.
Very nice! Simple and elegant!
mimar:
On step 19 you should have made added a layer mask. If you did, when you paint with black it should be masking out the areas you paint.
[...] Create 3D Text with Some Extreme Lighting [...]
great tut, but i had a same problem with sean, best regards :
“is there a problem finding the effect>3-d>extrude and bevel on CS4, ive spent awhile looking for those commands and can’t find anything”
the effect should be one of the drop down menus in adobe illustrator
Thanks for the tutorial Tyler, I am currently trying to finishes the last couple steps and I have a bit of a problem.
I’m using Adobe Photoshop CS4 on PC and I have my text on a PG format, so it’s not a 3-D text from Illustrator.
I’m trying to invert the texture I selected on to the Text, but nothing happens. I tried (Ctr+Click Text & then Ctr+Shift+I) and nothing.
What am I doing wrong or is it not inverting because the text isn’t on 3-D?
If you have a text that has a white background (or a different color) it will not work because it will just select the text and the background. You would have to cut out the 3D text. Doing a Control and Click should select everything on that layer (not the transparent area). As long as your 3D text has a transparent background it should work. When you do Control + Shift + I (the inverse selection) it should select the transparent area (not the 3D text).
Thankyou very much.I found this one very useful.
[...] 3-D Typography With Some Extreme Lighting – Photoshop Tutorial [...]
Thanks My Friend
[...] Create 3D text with some extreme lighting [...]
veeery very good tutorial!!
here is the mine: http://img697.imageshack.us/img697/4526/3dtextwithsomeextremeli.jpg
THAANKS :D
what is font what you use in this tutorial ? tnx.
It is a variation of ITC Franklin Gothic Demi Condensed
[...] Create 3D Text with Some Extreme Lighting [...]
[...] 22.Create 3-D Text With Some Extreme Lighting [...]
[...] 22.Create 3-D Text With Some Extreme Lighting [...]
[...] Crea un texto en 3D [...]
[...] 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. [...]
[...] Create 3-d With Awesome Lighting [...]
[...] 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. [...]
hi, everyone, i have one question, i dont have the option 3D in my photoshop.. must activate? or is one bad configuration.. pls.. help me! =)
Hello All,
I’m new to photoshop but this logo is so great I decided to try and follow the tut to make it.
Sadly.. I don’t know to do many things on this tut, can someone please give a hand to help me through?
Thanks in advance
@Pedro – downloand the CS$ illustrator, this is where the 3D effect was made :)
in fact I have it, the problem is that when trying to open the illustrator does open, once it enters automatically closes, and not have idea because I could help with this, thanks