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

14 May
Create a 3D Text Scene Using Photoshop
3D, Photoshop, Tutorials
108

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

Tweet Share
Related Posts
Peeling a Hand in Photoshop Photoshop Droplets and ImageMagick: Tools for batch image processing Breaking Apart – Photoshop Tutorial
108 Comments »

#1
Andreyco
May 14th, 2009 at 09:39
awesome tutorial, thanks a lot

Reply Close comment form

#2
Marco
May 14th, 2009 at 09:39
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
great sharing dude. cool.. though it has some extra process i think.

Reply Close comment form

#4
insic
May 14th, 2009 at 10:10
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
Very cool.

Reply Close comment form

#6
patty
May 14th, 2009 at 10:14
excellent. not the normal weird unrealistic 3d tutorial. two thumbs up.

Reply Close comment form

#7
vectorss
May 14th, 2009 at 12:09
amazing tut. Thanks

Reply Close comment form

#8
Yoosuf
May 14th, 2009 at 12:15
its a nice tut folks, keep it up

Reply Close comment form

#9
jonathan wagener
May 14th, 2009 at 12:25
how cool is that!!

Reply Close comment form

#10
STPo
May 14th, 2009 at 12:49
I want my 3d transform in Photoshop, not in Illustrator! =’(

Reply Close comment form

#11
Tyler
May 14th, 2009 at 15:40
Nice concept and a great outcome. Thanks!

Reply Close comment form

#12
Albin sebastian
May 14th, 2009 at 15:43
Grate work, thanks man …

Reply Close comment form

#13
Jack
May 14th, 2009 at 16:00
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 16:40
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 17:26
Wicked! Thanks for sharing

Reply Close comment form

#16
Justin Leaf-Wright
May 14th, 2009 at 17:34
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 18:53
There are some nifty little tricks in this tutorial. Thanks for sharing.

Reply Close comment form

#18
break
May 14th, 2009 at 18:58
nice, thx

Reply Close comment form

#19
cavellblood
May 14th, 2009 at 21:28
Very nice! I’d like to try it sometime. Looks very realistic!

Reply Close comment form

#20
Alvaro
May 14th, 2009 at 23:23
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
Michael
June 30th, 2010 at 09:27
after i ctr+c my 3d text from illustrator and ctr+v into photoshop as a smart object, it will only let me render clouds and difference clouds. no lighting effects available whats wrong?

Reply Close comment form

#22
Mario
May 15th, 2009 at 00:30
dude this is really cool:D

Reply Close comment form

#23
Sneh
May 15th, 2009 at 04:33
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

#24
d2m.ca
May 15th, 2009 at 05:57
Wow.
This is something nice to learn eh.

Reply Close comment form

#25
KittyConCarnage
May 15th, 2009 at 10:15
I am totally lost on step 5.

Reply Close comment form

#26
KittyConCarnage
May 15th, 2009 at 10:30
I should specify more. When exactly are we colorizing the text.

Reply Close comment form

#27
Alvaro
May 15th, 2009 at 22:16
You’re right just add a light brown Color Overlay Effect > Blend Mode Overlay and rasterize the layer.

Reply Close comment form

#28
Ercan Altuğ YILMAZ
May 15th, 2009 at 21:04
Very nice tutorial. Thanks..

Reply Close comment form

#29
Selvam
May 16th, 2009 at 14:27
awesome tutor

Reply Close comment form

#30
Mustafa
May 16th, 2009 at 20:14
Very Nice Good Job

Reply Close comment form

#31
Kishan Bagaria
May 17th, 2009 at 18:21
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

#32
Adam
May 18th, 2009 at 11:05
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

#33
sama creation
May 19th, 2009 at 10:00
wow! awesome th’x

Reply Close comment form

#34
Gryphon Graphics
May 19th, 2009 at 18:05
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?

Reply Close comment form

#35
AjnabiZ
September 25th, 2009 at 20:00
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

#36
Michael
June 30th, 2010 at 09:30
even after applying gradient and color overlay i still cannot add lighting effects? hmmm whats still wrong?

(Comments won't nest below this level)
Reply Close comment form

#37
MarieNum
May 21st, 2009 at 19:58
Great Work !
Awesome effects, and I love the effect created by the grass added.
Thx

Reply Close comment form

#38
Design freak
May 24th, 2009 at 14:48
u’ve taught us a really good trick.
thanks

Reply Close comment form

#39
Johnson Koh
May 26th, 2009 at 05:40
Interesting concept. Love it!

Reply Close comment form

#40
Chris
May 28th, 2009 at 11:28
Words fail me. Brilliant!! Some many awesome new tricks to try out. Thanks.

Reply Close comment form

#41
e11world
June 2nd, 2009 at 23:53
This was a really great tutorial. Thanks a million!

Reply Close comment form

#42
pranav
June 21st, 2009 at 21:59
superb job…. fantastic job.

Reply Close comment form

#43
Gustavo
June 26th, 2009 at 01:28
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

#44
maya
July 19th, 2009 at 18:45
NICE :d

Reply Close comment form

#45
el-maxo
August 6th, 2009 at 12:49
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

#46
Scan
August 6th, 2009 at 20:03
Having the same issue as Gryphon #32,
Does anyone know the reason that Lighting Effects is greyed out? Or have a theory?

Reply Close comment form

#47
AjnabiZ
September 25th, 2009 at 19:29
@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

#48
Northon
August 7th, 2009 at 17:28
Great tut, thks!!!!

Reply Close comment form

#49
Nani
August 22nd, 2009 at 20:23
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

#50
indir
September 1st, 2009 at 22:53
I “Step 5″ i did not apply. Can you explain how to do?

Reply Close comment form

#51
web design chennai
September 3rd, 2009 at 12:44
Thanks for posting and giving the tutorials about Creating a 3D Text Scene with photoshop,

Reply Close comment form

#52
Artur
September 8th, 2009 at 19:04
Perfect!.

Reply Close comment form

#53
NezAm
September 9th, 2009 at 11:05
Thanks ,…. Awesome its cool

Reply Close comment form

#54
Web development lucknow
September 16th, 2009 at 14:11
Thanks for this tutorial.

Reply Close comment form

#55
Honey Singh
September 20th, 2009 at 20:44
Awesome tutorial !
Thanks for the tips !

Reply Close comment form

#56
elyass
September 25th, 2009 at 06:39
good i should study it…

Reply Close comment form

#57
AjnabiZ
September 25th, 2009 at 18:54
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

#58
Mark
September 25th, 2009 at 21:35
What’s the deal with the missing steps? You forgot to show your color overlay and pattern overlay steps.

Reply Close comment form

#59
Sikiş İzle
October 6th, 2009 at 08:44
thanks for it. i can do this and i like it =)

Reply Close comment form

#60
sourena
October 8th, 2009 at 01:01
hi
very nice…
Thanks for the tips !

Reply Close comment form

#61
Philippine Global Outsourcing
October 14th, 2009 at 00:50
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

#62
http://www.game4barbie.com/
October 15th, 2009 at 10:01
Very good,nice…

Reply Close comment form

#63
Go Green Tips
November 5th, 2009 at 10:36
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

#64
presretac
November 6th, 2009 at 11:53
nice effect

Reply Close comment form

#65
clippingimages
November 7th, 2009 at 12:17
WoW Awesome tutorial post. Some excellent design methods used in this tutorial. Thanks for sharing this nice post.

Reply Close comment form

#66
Haytham
November 12th, 2009 at 04:45
thax alot it really helped me on my studies

Reply Close comment form

#67
Paulo Victor
November 15th, 2009 at 22:33
Bealtfull efects, thanks!

Reply Close comment form

#68
aries
November 16th, 2009 at 15:22
wooo … what a nice tut ;
great

Reply Close comment form

#69
Web Designer Canada
November 26th, 2009 at 12:59
Never tried illustrator before. Thanks for the easy to follow steps…

Reply Close comment form

#70
film izle
November 29th, 2009 at 22:23
woowww perfect

Reply Close comment form

#71
balon turu
December 1st, 2009 at 08:57
Bealtfull efects

Reply Close comment form

#72
shantee
December 1st, 2009 at 16:33
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

#73
how to date 101
December 18th, 2009 at 14:54
Amazing tutorial and on the correct time! I may come back again to read more of your tutorials

Reply Close comment form

#74
GREATLIBERO
December 22nd, 2009 at 10:58
Pic 4 doesn’t exist anymore

Reply Close comment form

#75
Deelux
December 22nd, 2009 at 23:15
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

#76
hanum
December 27th, 2009 at 10:02
wow.. really nice. Thank’s for info sharing

Reply Close comment form

#77
parfums
January 17th, 2010 at 15:49
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

#78
Ramalho
February 4th, 2010 at 14:18
Hi WEB Family,
Excellent tutorial and it´s good to see it.
Thanks for sharing

Reply Close comment form

#79
Görsel
February 21st, 2010 at 18:41
WoW! Awesome tutorial post.

Reply Close comment form

#80
clipping path
February 27th, 2010 at 12:38
Really Great Work… I love it… The gras work is awesome…

Reply Close comment form

#81
James
February 28th, 2010 at 22:13
Very good method… with photoshop!

Reply Close comment form

#82
Dowel Pins
March 9th, 2010 at 11:52
I just bought Adobe Photoshop CS4 and going to try this out. I will post back how it turned out for me. Thanks for the tutorial!

Reply Close comment form

#83
Google Top Ranking
March 13th, 2010 at 15:47
ah, rendering is something I really do like but I still couldnt learn it. well, if there is something you can plug into your brain so that you can simply download knowledge please mail me

Reply Close comment form

#84
magnetfeldtherapiegeräte
March 18th, 2010 at 03:58
I think that it really looks nice but I am still too lazy as it requires too much work. or is it me who is too slow with working on design?

Reply Close comment form

#85
Mahmudur Rahman
March 18th, 2010 at 11:35
Nice tutorial. Very creative one and well explained. Thanks for share.

Reply Close comment form

#86
TNbuttman
March 31st, 2010 at 17:09
Great tutorial! It’s easy to follow and duplicate, not like so many with missing resources and/or steps.

Reply Close comment form

#87
ndimos
April 30th, 2010 at 13:57
Regarding (missing) step #5, here’s what you have to do:
When in the first step of Illustrator, write your text NOT with colour #CCCCCC, but with colour of #9A552C. Then, paste it in your photoshop document already coloured and continue your work…

Reply Close comment form

#88
nilesh
May 6th, 2010 at 16:19
very nice tutorial…………

Reply Close comment form

#89
Kurtlar Vadisi Pusu Son Bolum izle
May 8th, 2010 at 20:01
Thanks for this artical ı liked it

Reply Close comment form

#90
Domometer
May 19th, 2010 at 07:58
Now that’s really cool! I liked the rock-in-the-shadow effect.

Reply Close comment form

#91
Vince
June 18th, 2010 at 06:51
The desert scenery coupled with the text looks amazing. It somehow looked very realistic. It actually inspired me for my logo design and I got my designer from logodesignplanet.com to design a logo incorporating elements found from your tut. It came out better than expected as I thought it would be difficult to look strong and corporate but it looked really polished. Even my friends who were skeptics at first were blown away by how the logo design turned out. I got to thank you for posting this tut as I did show to my designer for reference to how I want it to look like. Thanks heaps!

Reply Close comment form

#92
Avdhesh
July 4th, 2010 at 16:13
nice tut. I did already something like it but here growing grass it’s very nice.

Reply Close comment form

#93
Ben johnson
July 7th, 2010 at 03:32
Good tutorial. I have bookmarked you.

Reply Close comment form

#94
mutti
July 13th, 2010 at 02:21
Your tutorial is very great! very detail and clear so that I could follow it. thank you so very much…

Reply Close comment form

#95
Ken Enlarge
July 14th, 2010 at 11:53
Your tutorial is very great! very detail and clear so that I could follow it. thank you so very much…

Reply Close comment form

#96
chai
July 16th, 2010 at 12:28
cool tutorial, i bookmark first, maybe some day i can try this.. thanks

Reply Close comment form

#97
oyun oyna
July 17th, 2010 at 02:19
WoW! Awesome tutorial post.

Reply Close comment form

#98
wij
July 17th, 2010 at 04:50
hmm,, that’s amazing design…
what a cool effect !!
thanks for tutorial..

Reply Close comment form

#99
oky
July 17th, 2010 at 08:22
i tried it in my PC, but i still can make it…
but it’z awesome

Reply Close comment form

#100
rifky
July 20th, 2010 at 00:35
awesome..thanx…i’ll try it!!!nice…

Reply Close comment form

#101
free71
July 21st, 2010 at 11:23
Thanks and great tutorial!

Reply Close comment form

#102
nofel
July 28th, 2010 at 05:28
hmm nice tutor, thx

Reply Close comment form

#103
Yang Yang
July 31st, 2010 at 00:18
I think I’m the first person to mention this,
To do this tutorial, you have to buy both illustrator and photoshop.
Thank goodness I have both
This is the prettiest Photoshop picture I have ever seen. Great job

Reply Close comment form

#104
script indir
August 1st, 2010 at 10:35
WoW! Awesome tutorial post.

Reply Close comment form

#105
Nancy
August 2nd, 2010 at 03:21
it was really great…..keep up the good work high…..and we promise to continue photoshopping

Reply Close comment form

#106
Yabancı dizi indir
August 14th, 2010 at 11:23
Great tut, thks!!!!

Reply Close comment form

#107
hayata dair
August 18th, 2010 at 08:39
WoW! Awesome tutorial post.

Reply Close comment form

#108
hotfile download
August 25th, 2010 at 07:04
nice photoshop.thank you.

Reply Close comment form

Name (required)

E-mail (required - never shown publicly)

Web-site

Your Comment (smaller size | larger size)
1+1=? (required)
Notify me of followup comments via e-mail

TOP OF PAGE

Web Designer Depot

Home| Advertising| About| Contact

© 2010 All Rights Reserved