Photoshop Tutorial - Create a 3D Text Scene Using Photoshop | Webdesigner Depot

14 May

Create a 3D Text Scene Using Photoshop

3D, Photoshop, Tutorials

73

Sponsored by: Click here to create FREE Flash Website!

In this tutorial we’ll create a realistic 3D text scene using Photoshop with a little help from Illustrator for the 3D text.

You need to have medium to advanced knowledge of Photoshop in order to complete this tutorial.

To get started, go ahead and download all the images used from the Sxh.hu website. All images are free to download and here are the links: 1, 2, 3, 4

Let’s get started and create a truly awesome 3D effect in just a few short steps. Try it out and feel free to post links to your own variations, we’d love to see what you come up with.

Here’s a quick preview of the image that we will be creating:

Step 1

On a blank document type the text in Illustrator. I’m using the Impact typeface and this foreground color: #CCCCCC. Then go to Effect > 3D > Extrude & Bevel, and set the values as shown below. Then copy (Ctrl or Command + C) the 3D text.

Step 2

Let’s open Photoshop, create a new document (1280 x 1024 px) and put this image as a background. Then paste the 3D text (created on Step 1) as a Smart Object.

Step 3

Next, go to Filter > Render > Lighting Effects and set the values as shown below. This way the text will match the scene lightening.

Step 4

Select the Smart object layer, right click on the layer and select Duplicate Layer > Destination: New, and Name: Map. Then go to Layer > Rasterize > Smart object. Save the document as Map.psd somewhere in your Desktop.

Step 5

Now, let’s save the previous document as “Displace texture”, delete the raster 3D text and paste this image on a new layer. This will be our first texture.

Go To Filter > Distort > Displace, search for “map.psd” and set both the Horizontal and Vertical values to 50. Then, Select all (Ctrl + A or Command + A) and copy the selection.

Step 6

Paste the “Rock Texture” into a new layer above the 3D smart object. Change the Blending mode to Overlay.

Ctrl (Command) + Click on Smart Object miniature to select the text shape, then Ctrl (Command) + Shift + I to invert the selection, then hit DEL to delete the extra texture (on the “Rock Texture” layer).

Then use the Magic Wand tool to select the front face of the 3D text on the Smart Object layer and delete the selection on the “Rock Texture” layer.

Step 7

Using the Burn Tool, burn some shadows on the “Rock Texture” layer.

Step 8

Select the “Sand dunes” layer, select the Clone Stamp tool and holding the Option (Alt) key, click somewhere on the sand. Then create a new layer above “Rock texture”, name it “More Sand” and clone the sand on that layer.

Step 9

To improve the texture effect, delete some areas of the “Rock Texture” layer.

Step 10

Now we’re going to add some ‘dirt’. Open the “Displace texture” file one more time. Paste this image into a new layer. Go To Filter > Distort > Displace, search for “map.psd” and set both the horizontal and vertical values to 50. Then, select all (Ctrl + A or Command + A) and copy the selection.

Step 11

Paste the “Dirt texture” into a new layer. Ctrl (Command) + Click on the “3D text” layer miniature to select the text shape, then Ctrl (Command) + Shift + I to invert the selection, then hit DEL to delete the extra texture (on the “Dirt texture” layer).

Using a soft eraser, delete the bottom of the “Dirt texture” layer, then improve the result by using an irregular eraser.

Step 12

Change the “Dirt texture” blending mode to Multiply and add a small Drop Shadow.

Step 13

To add the grass, go to the “Displace texture” file and paste this image. Apply a Displacement map, just like the other textures and finally copy the grass.

Step 14

Paste the grass on the main document, delete the bottom part and using an irregular Eraser delete some areas on the borders.

Step 15

Burn some shadows on the “Grass texture” layer.

Step 16

Add a small drop shadow to the “Grass texture” layer. Using the Sponge tool, desaturate some of the areas of the grass.

Step 17

Paste the grass texture into a new layer on a plane on Vanishing Point filter window (go to Filter > Vanishing Point) to match the perspective of the landscape.

Step 18

Erase some random areas of the “Grass” layer, and using an irregular brush delete some random areas here and there.

Step 19

Select a part of the grass, feather the selection and adjust the hue value to -30.

Step 20

Finally add a soft drop shadow to the “Grass” layer.

Step 21

Let’s add more details. Paste this image into a new layer and adjust the Hue/Saturation values to match the existing colors. You can call the new layer “Hanging plant” or something like that.

Step 22

Using an irregular eraser, delete everything with the exception of the hanging plant, and place them next to 3D text’s corners.

Step 23

Duplicate the “Hanging plant” layer and go to Edit > Transform > Flip Horizontal. Then distort the copy a little bit. Follow this with the use of the burn tool to make the copy darker according to the the scene lighting.

Step 24

Add as many details as you want. I added a few more hanging plants and a bush.

Step 25

Just to create a more dramatic effect apply these two adjustment layers to the entire design: a Photo Filter and a Gradient Map (Opacity 35%).

Final result

Now you’ve got a nice 3D text inside a photograph. Click on the image for a larger preview. Try it on your own and come up with your own variations.

Written exclusively for WDD by Alvaro Guzman.

Have you tried the tutorial? Feel free to post links to examples created using this tutorial…

Share this story

Share

Related Posts

Peeling a Hand in Photoshop Photoshop Droplets and ImageMagick: Tools for batch image processing Breaking Apart – Photoshop Tutorial
73 Comments »

#1

Andreyco
May 14th, 2009 at 9:39 am

awesome tutorial, thanks a lot

Reply Close comment form

#2

Marco
May 14th, 2009 at 9:39 am

Good to see some Photoshop Tuts here.

The outcome looks pretty sweet, really like the “grass” stuff.

Keep up the great work!

Reply Close comment form

#3

Fuad Ahasan Chowdhury
May 14th, 2009 at 10:05 am

great sharing dude. cool.. though it has some extra process i think.

Reply Close comment form

#4

insic
May 14th, 2009 at 10:10 am

wow! awesome composition. I havent tried a 3d effect in photoshop yet and now its the time.

Reply Close comment form

#5

Rand Duren
May 14th, 2009 at 10:11 am

Very cool.

Reply Close comment form

#6

patty
May 14th, 2009 at 10:14 am

excellent. not the normal weird unrealistic 3d tutorial. two thumbs up.

Reply Close comment form

#7

vectorss
May 14th, 2009 at 12:09 pm

amazing tut. Thanks

Reply Close comment form

#8

Yoosuf
May 14th, 2009 at 12:15 pm

its a nice tut folks, keep it up

Reply Close comment form

#9

jonathan wagener
May 14th, 2009 at 12:25 pm

how cool is that!!

Reply Close comment form

#10

STPo
May 14th, 2009 at 12:49 pm

I want my 3d transform in Photoshop, not in Illustrator! =’(

Reply Close comment form

#11

Tyler
May 14th, 2009 at 3:40 pm

Nice concept and a great outcome. Thanks!

Reply Close comment form

#12

Albin sebastian
May 14th, 2009 at 3:43 pm

Grate work, thanks man …

Reply Close comment form

#13

Jack
May 14th, 2009 at 4:00 pm

Love the grass dotted over it! The only thing that is bothering me a little is the perspective looks slightly off – I think at the angle the text is set it should be a bit smaller towards the end as it just does not look like it sits right.

Other than that it’s very cool. I have been wanting to do things like this for a while but never seem to find the right photos for it – or does that matter? Thanks for the tips.

Reply Close comment form

#14

Nora Reed
May 14th, 2009 at 4:40 pm

That is interesting. Great job here. I think you can still add to this with some kind of running water, or lake that the words can be sitting in.

Reply Close comment form

#15

bebopdesigner
May 14th, 2009 at 5:26 pm

Wicked! Thanks for sharing

Reply Close comment form

#16

Justin Leaf-Wright
May 14th, 2009 at 5:34 pm

Sweet post man.
Am going to try do my own one day when I have some spare time.

Reply Close comment form

#17

Sharene Lewis
May 14th, 2009 at 6:53 pm

There are some nifty little tricks in this tutorial. Thanks for sharing.

Reply Close comment form

#18

break
May 14th, 2009 at 6:58 pm

nice, thx

Reply Close comment form

#19

cavellblood
May 14th, 2009 at 9:28 pm

Very nice! I’d like to try it sometime. Looks very realistic!

Reply Close comment form

#20

Alvaro
May 14th, 2009 at 11:23 pm

Wow! good to see my tutorial published here

Glad you liked it, any question that you may have, just ask me…

Reply Close comment form

#21

Mario
May 15th, 2009 at 12:30 am

dude this is really cool:D

Reply Close comment form

#22

Sneh
May 15th, 2009 at 4:33 am

Wow! Awesome detailed tutorial .. love it! I tried something like this a few months ago, making an organic flora and fauna scene out of candy wrapped 3D text http://www.littleboxofideas.com/blog/freebies/museo-candy-3d-text-effect-a-typographic-wallpaper but never got around to writing a tutorial ..lol!

Reply Close comment form

#23

d2m.ca
May 15th, 2009 at 5:57 am

Wow.

This is something nice to learn eh.

Reply Close comment form

#24

KittyConCarnage
May 15th, 2009 at 10:15 am

I am totally lost on step 5.

Reply Close comment form

#25

KittyConCarnage
May 15th, 2009 at 10:30 am

I should specify more. When exactly are we colorizing the text.

1 Reply
Reply Close comment form

Alvaro
May 15th, 2009 at 10:16 pm

You’re right just add a light brown Color Overlay Effect > Blend Mode Overlay and rasterize the layer.

Reply Close comment form

#26

Ercan Altuğ YILMAZ
May 15th, 2009 at 9:04 pm

Very nice tutorial. Thanks..

Reply Close comment form

#27

Selvam
May 16th, 2009 at 2:27 pm

awesome tutor

Reply Close comment form

#28

Mustafa
May 16th, 2009 at 8:14 pm

Very Nice Good Job

Reply Close comment form

#29

Kishan Bagaria
May 17th, 2009 at 6:21 pm

Can you upload the PSD file of the tutorial? I will be very thankful if you do it.

Thanks,
Kishan Bagaria

Reply Close comment form

#30

Adam
May 18th, 2009 at 11:05 am

I gotta say I absolutely love this blog for tutorials like this. It’s so easy to get incredible text effects just by taking it one step at a time and this is a great job. The colours of the grass, sand and sky look terrific too. It actually looks very realistic!

Reply Close comment form

#31

sama creation
May 19th, 2009 at 10:00 am

wow! awesome th’x

Reply Close comment form

#32

Gryphon Graphics
May 19th, 2009 at 6:05 pm

PLEASE HELP
gr8 tutorial but in step 3, no matter how much I try to select ((Lighting Effects)) I simply cannot. I am able to select (Filter) and (Render) but ((Lighting Effects)) is not highlighted
so I cannot select it. What am I doing wrong?

1 Reply
Reply Close comment form

AjnabiZ
September 25th, 2009 at 8:00 pm

Hello

Regarding the step 3, if you watch the screenshot, the author has applied “Color Overlay” and “Pattern Overlay”. He used the same texture of rocks and made it into a pattern and applied it over the 3d Text.

Reply Close comment form

#33

MarieNum
May 21st, 2009 at 7:58 pm

Great Work !
Awesome effects, and I love the effect created by the grass added.
Thx

Reply Close comment form

#34

Design freak
May 24th, 2009 at 2:48 pm

u’ve taught us a really good trick.

thanks

Reply Close comment form

#35

Johnson Koh
May 26th, 2009 at 5:40 am

Interesting concept. Love it!

Reply Close comment form

#36

Chris
May 28th, 2009 at 11:28 am

Words fail me. Brilliant!! Some many awesome new tricks to try out. Thanks.

Reply Close comment form

#37

e11world
June 2nd, 2009 at 11:53 pm

This was a really great tutorial. Thanks a million!

Reply Close comment form

#38

pranav
June 21st, 2009 at 9:59 pm

superb job…. fantastic job.

Reply Close comment form

#39

Gustavo
June 26th, 2009 at 1:28 am

Me pareció una berraquera que se pueda hacer algo así. Realmente photoshop es una increíble herramienta para diseño grafico.

Reply Close comment form

#40

maya
July 19th, 2009 at 6:45 pm

NICE :d

Reply Close comment form

#41

el-maxo
August 6th, 2009 at 12:49 pm

I agree with KittyConCarnage – Step 5 is wrong. When you apply the lighting effects as described it doesn’t blend into the browny way that is shown. It just stays grey with lighting effects on it. If anyone can get me past this step it would be good;)

Reply Close comment form

#42

Scan
August 6th, 2009 at 8:03 pm

Having the same issue as Gryphon #32,
Does anyone know the reason that Lighting Effects is greyed out? Or have a theory?

1 Reply
Reply Close comment form

AjnabiZ
September 25th, 2009 at 7:29 pm

@For those who are having problem with “Lighting Effects” not being enabled in the Menu, its because Image Mode is set to CMYK, change it to RBG for the Document.

Reply Close comment form

#43

Northon
August 7th, 2009 at 5:28 pm

Great tut, thks!!!!

Reply Close comment form

#44

Nani
August 22nd, 2009 at 8:23 pm

I agree with KittyConCarnage, el-maxo, Scan, Gryphon, etc.
Step #5 is wrong… my 3D text doesn’t blend into brown neither

Reply Close comment form

#45

indir
September 1st, 2009 at 10:53 pm

I “Step 5″ i did not apply. Can you explain how to do?

Reply Close comment form

#46

web design chennai
September 3rd, 2009 at 12:44 pm

Thanks for posting and giving the tutorials about Creating a 3D Text Scene with photoshop,

Reply Close comment form

#47

Artur
September 8th, 2009 at 7:04 pm

Perfect!.

Reply Close comment form

#48

NezAm
September 9th, 2009 at 11:05 am

Thanks ,…. Awesome its cool

Reply Close comment form

#49

Web development lucknow
September 16th, 2009 at 2:11 pm

Thanks for this tutorial.

Reply Close comment form

#50

Honey Singh
September 20th, 2009 at 8:44 pm

Awesome tutorial !
Thanks for the tips !

Reply Close comment form

#51

elyass
September 25th, 2009 at 6:39 am

good i should study it…

Reply Close comment form

#52

AjnabiZ
September 25th, 2009 at 6:54 pm

Hello

Nice tutorial but at Step 5, after applying the Lighting effects, the Text does not BLEND with the scene.

@For those who are having problem with “Lighting Effects” not being enabled in the Menu, its because Image Mode is set to CMYK, change it to RBG for the Document.

Then all the options under the Filter Menu will be enabled.

But still, the Step 5 does not merge with the scene , there is a step missing.

Reply Close comment form

#53

Mark
September 25th, 2009 at 9:35 pm

What’s the deal with the missing steps? You forgot to show your color overlay and pattern overlay steps.

Reply Close comment form

#54

Sikiş İzle
October 6th, 2009 at 8:44 am

thanks for it. i can do this and i like it =)

Reply Close comment form

#55

sourena
October 8th, 2009 at 1:01 am

hi

very nice…

Thanks for the tips !

Reply Close comment form

#56

Philippine Global Outsourcing
October 14th, 2009 at 12:50 am

Thanks for the detailed tutorial. And wow, that’s a long thread up there! This has really been helpful and inspiring especially for those who want to create something cool but just don’t know how to start.

Reply Close comment form

#57

http://www.game4barbie.com/
October 15th, 2009 at 10:01 am

Very good,nice…

Reply Close comment form

#58

Go Green Tips
November 5th, 2009 at 10:36 am

Just one word – WOW! Where do you people get such creative ideas from? I am about to create a poster for my blog on “Go Green Resources” and found this tutorial. A Big thanks!

Reply Close comment form

#59

presretac
November 6th, 2009 at 11:53 am

nice effect

Reply Close comment form

#60

clippingimages
November 7th, 2009 at 12:17 pm

WoW Awesome tutorial post. Some excellent design methods used in this tutorial. Thanks for sharing this nice post.

Reply Close comment form

#61

Haytham
November 12th, 2009 at 4:45 am

thax alot it really helped me on my studies

Reply Close comment form

#62

Paulo Victor
November 15th, 2009 at 10:33 pm

Bealtfull efects, thanks!

Reply Close comment form

#63

aries
November 16th, 2009 at 3:22 pm

wooo … what a nice tut ;
great

Reply Close comment form

#64

Web Designer Canada
November 26th, 2009 at 12:59 pm

Never tried illustrator before. Thanks for the easy to follow steps…

Reply Close comment form

#65

film izle
November 29th, 2009 at 10:23 pm

woowww perfect

Reply Close comment form

#66

balon turu
December 1st, 2009 at 8:57 am

Bealtfull efects

Reply Close comment form

#67

shantee
December 1st, 2009 at 4:33 pm

wow that’s amazing, i am making a brochure for a festival , i had that vision , of something like desert + grass, and i found that tutorial, thats just what i needed..beautifull indeed !

Reply Close comment form

#68

how to date 101
December 18th, 2009 at 2:54 pm

Amazing tutorial and on the correct time! I may come back again to read more of your tutorials

Reply Close comment form

#69

GREATLIBERO
December 22nd, 2009 at 10:58 am

Pic 4 doesn’t exist anymore

Reply Close comment form

#70

Deelux
December 22nd, 2009 at 11:15 pm

Hey all!

I must say I really like the outcome of the tutorial but I don’t like the fact that there is a step missing. Like a few other people I can’t seem to get the color overlay right after adding the lightning… It stays grey and I can’t figure out how to get it right….
Please can someone who managed to get it right post how you should do it?

Thnk in advance!

And thnk for the great tutorial

Deelux

Reply Close comment form

#71

hanum
December 27th, 2009 at 10:02 am

wow.. really nice. Thank’s for info sharing

Reply Close comment form

#72

parfums
January 17th, 2010 at 3:49 pm

I do not have words… I need to thank you for this wonderful post. Reason – I had been trying out to make my logo and its text in 3D using photoshop and was just unable to figure out how to go about it. I have tried it following your detailed tutorial and this has helped me in getting an idea on how to go about it.
This tutoial is best for those who have very little knowledge of Photoshop but their profession needs them to have a knowledge of almost everything on this planet.

Thanks Again

Reply Close comment form

#73

Ramalho
February 4th, 2010 at 2:18 pm

Hi WEB Family,

Excellent tutorial and it´s good to see it.

Thanks for sharing

Reply Close comment form

Name (required)

E-mail (required - never shown publicly)

Web-site

Your Comment (smaller size | larger size)

1+2=? (required)

Notify me of followup comments via e-mail

TOP OF PAGE

Web Designer Depot

Home| Advertising| About| Contact

© 2010 All Rights Reserved