Create a Diablo III Inspired Grungy Text Effect

Create a Diablo III Inspired Grungy Text Effect

Posted on November 17th, 2008 under Text Effects

Go through testking 642-901 questions and testking 642-812 prepared by testking SY0-201 certified team to help you pass your exam on first attempt.

This tutorial shows the path I took to create this Diablo III Inspired Grunge Text Effect.

I was looking for some design inspirations on the net and I bumped into the Diablo III website. I  was intrigued by the design of the title text and I thought: what happen if I add something extra to it? What will the end result like if I apply a cracked texture on top of the text? The story begins…

Just a sneak-peak of the final text effect:

diablo text 500x142 Create a Diablo III Inspired Grungy Text Effect

Step 1

Firstly we need a nice font and a texture for overlay effect. You can use any font you like, I chose this font from dafont.com. After choosing your font, donwload a copy of this texture below (click to download)

crackles0029 2 s 500x375 Create a Diablo III Inspired Grungy Text Effect

Step 2

Create a new document of any size, I chose 800*600px because it provides more room later on if I want to add something extra on. Fill the background layer with black.

Use the type tool to type some text onto it using the white colour. Name this layer as “text”, right-click on the layer and go to Blending Options, use the follow settings:

Drop shadow

drop shadow 500x350 Create a Diablo III Inspired Grungy Text Effect

Bevel and Emboss

bevel and emboss 500x350 Create a Diablo III Inspired Grungy Text Effect

Hightlight Mode colour for Bevel and Emboss option

bevel and emboss colour 500x312 Create a Diablo III Inspired Grungy Text Effect

Gradient Overlay

gradient overlay 500x350 Create a Diablo III Inspired Grungy Text Effect

Step 3

Open the texture image file you downloaded, use the selection tool to select a portion of the image and drag your selection on top of the “text” layer. Name it “texture”, right-click it and choose “create clipping mask”.

Use the curve tool to adjust the colour mixture of this layer a bit. See below for detailed curve tool setting:

curve setting Create a Diablo III Inspired Grungy Text Effect

Step 4

Change the layer blending option of this layer to “screen”, apply inner glow and some dark brown satin in the blending options. See below for details:

screen text layer 500x350 Create a Diablo III Inspired Grungy Text Effect

Step 5

On the “texture” layer, use a big circle brush with a low opacity and flow (30% each) and dark yellow colour to add some colour contrast on it. Below is the text effect so far:

effect so far 500x252 Create a Diablo III Inspired Grungy Text Effect

Step 6

Duplicate the “texture” layer once, apply the “Glass” filter onto it. See below for detailed settings:

glass Create a Diablo III Inspired Grungy Text Effect

Then set the layer blending option to “Color Burn”.

text layer overlay 2 500x350 Create a Diablo III Inspired Grungy Text Effect

Step 7

Optional: you can some extra effects on top of the duplicated texture layer. I added a dupilcated layer with a “Medium” filter on and set the layer blending option to “Color Dodge”. See below image for details:

Medium filter

median Create a Diablo III Inspired Grungy Text Effect

Layer blending option

median layer color dodge 500x350 Create a Diablo III Inspired Grungy Text Effect

Ok, that’s it for this tutorial! You may want to add some more creativity onto this text effect, go ahead with it!

Below is my finished work, I added some brush effects and motion blur:

diablo text 500x142 Create a Diablo III Inspired Grungy Text Effect

I hope you enjoy this tutorial. Any questions or feedback, just drop me a comment!

Fresh Posts from PSD Vault

Design a “Texts Drop in Water” Typography Effect in Photoshop 20 Unique and Beautiful Typography Artworks to Boost Your Creativity VIP Exclusive Photoshop Tutorial – Create “Moon Dance” Photo Manipulation in Photoshop Imagination Unleashed: Best of PSD Vault DeviantART Group – Vol. 29 Create Abstract Layered Text with Decorative Lighting Effect in Photoshop Creativity Fine-Tuning: Best of PSD Vault Flickr Group – Vol. 60
  • http://www.photoshoplady.com/forums/text-effect-tutorials/118-create-diablo-iii-inspired-grungy-text-effect.html#post417 Create a Diablo III Inspired Grungy Text Effect – Photoshop Lady Forums

    [...] experiment a few things in Photoshop – here is the finished work: You can access this tutorial here Any questions or feeback, please drop me a comment, thanks! PSD Vault – My Online Photoshop [...]

  • http://www.jamesqu.net/portfolio/abstract-design/diablo-iii-inspired-text-effect/ Diablo III inspired Text Effect | James Qu

    [...] You can access the tutorial of how I created this text effect here. [...]

  • http://ghawyy.com/ ghawyy

    wow great effect and nice too

    thats eclusive styles for me

    thank you so much

    i really love it and i will use that one for alot of works

    i will back for more thanks

  • http://www.psdvault.com James

    Hi, ghawyy!
    Thanks for your comment and support!
    Glad that you enjoy this work and find it useful~

  • http://www.cofregrafico.com/efecto-de-texto-grungy/ Efecto de texto grungy | Tutoriales Photoshop, wallpapers, iconos, themes wordpress

    [...] del tutorial: Psdvault Si eres nuevo por aquí, te recomiendo suscribirte al canal RSS de mi blog para leerlo a [...]

  • http://yahoo.com sreekanth

    hai im sreekanth very fine effict iam studying digital media in icat college ok then fine bye

  • http://www.psdvault.com James

    hi sreekanth~ thanks for your comment,! glad to see you enjoy the tutorial

  • jay

    i have photoshop 6.0
    1st problem… i can’t seem to find the curve tool.
    2nd i seem to not have the transparancy shapes layer on the last blending options.. lmk if u could help me out on this.

  • http://www.photoshoproadmap.com/Photoshop-blog/2008/11/20/30-awesome-photoshop-text-effects-tutorials/ 30 Awesome Photoshop Text Effects Tutorials

    [...] Cracky Text Effect [...]

  • http://www.psdvault.com James

    Hi Jay! Thanks for your question~
    I don’t have much experience with the older versions but I guess the curve tool will be under image > adjustments > curve.
    And i think with the transparancy shapes layer, you might not have to use it, try use a brush tool with overlay mode (if there is one) to brush over the text, see what result it comes up.
    Hope this helps!

  • http://vudu84.net/2008/11/tutorial-text-3d-flowery-text-effect/ Tutorial : Text 3D ( Flowery Text Effect ) | Vudu84

    [...] Cracky Text Effect [...]

  • http://www.squidoo.com/pirate-hats John the Pirate – arrrrr!

    Good post, I like your writing style! I’ve added http://psdvault.com/ to my feed reader, and will be reading your posts from now on. Just a quick question – did you design your header image yourself, or have it done professionally? If you had it done by a professional, who was it?

  • http://housam.wordpress.com/2008/11/27/photoshop-text/ 30 تأثير رائع للكتابة في فوتوشوب « حسام

    [...] Cracky Text Effect [...]

  • http://www.collegehumor.com/user:1840769 cheap cialis

    Yes I agree with you!

  • http://www.briefeschreiben.net/ Briefe Schreiben

    Hi! Your Post “Create a Diablo III Inspired Grungy Text Effect” is very interesting for me. Unfortunately my written English is not so good so I write in German: Dir, meinem liebsten, geh

  • http://www.williamjavonrice.com/high-performance-pc/2008/12/01/design-a-diablo-iii-inspired-text-effect-in-photoshop/ Design a Diablo III Inspired Text Effect in Photoshop | Learn How to Build a High Performance PC

    [...] Check it out at PSDvault.com [...]

  • http://www.collegehumor.com/user:1840769 free viagra in the uk

    Realy good!

  • http://myfavouriteactress.blogspot.com Shaiju

    Great work.keep them coming

  • http://www.videocodezone.com/users/levitra20/ drug levitra

    Hello, good site

  • http://www.collegehumor.com/user:1840769/ drug cialis

    Yor site is very cool!

  • http://www.psdvault.com James

    thanks shaiju! I will do my best that’s for sure!

  • http://www.psdvault.com James

    To John the Pirate:
    Hi mate I missed your comment cos my system sent it into the spam queue by accident…
    Yeah, I design the header image myself, with lots of brushes and filters :)

  • http://www.goldpreise.biz/ www.goldpreise.biz

    Hello, thanks for the good “Create a Diablo III Inspired Grungy Text Effect” post. Would it be possible, that i can write a story about this post in our local newspaper? I would be really happy if i can do this and i will give you a link from a german blog too. Please answer. Greetings Goldpreise

  • http://numbersaua.info/ Jane

    Very good site! I like it! Thanks!

  • http://www.grandmasterb.com/heads-up-seven-up-blogroll-january-12/ Heads Up Seven Up Blogroll for January 12, 2009 | GrandmasterB dot com

    [...] CSS-Tricks – Hodgepodge of Photoshop Tricks Go Media – Create a Furious Pink Panther Poster PSD Vault – Create a Diablo III Inspired Grungy Text [...]

  • http://pixelbypaint.com/tutz/?p=20 Heads Up Seven Up Blogroll – January 12 :PbP Tutorials

    [...] CSS-Tricks – Hodgepodge of Photoshop Tricks Go Media – Create a Furious Pink Panther Poster PSD Vault – Create a Diablo III Inspired Grungy Text [...]

  • mike

    Is it possible to add a psd? I did the tutorial but for some reason it didn’t come out in such a similar fashion. It would be greatly appreciated. Maybe it would give me a better idea on where I messed up?

  • http://www.psdvault.com James

    hi mike, i won’t be able to upload the psd file due to bandwidth and hosting space limitation. but if i could email you the psd if that’s ok.

  • Jose

    which photo shop did u use? n wat curve u use n where u found it? cuz mines diff from urs help plz

  • http://www.psdvault.com James

    HI Jose, i use photoshop cs3, the curve tool should be under image > adjustment > curves
    The end result will be different for different versions of Photoshop.

  • Tenkai

    Hey man do you still have this PSD? Could you send it to me by email? I’d be greatful. Thx man, and btw, great work! keep it up

  • Josh

    First of all nice tutorial i found it mostly easy to follow. However, my file doesnt quite achieve the effect yours does. It looks just like the normal text that has been coloured in with a firey/rocky texture, it doesnt have any of the ‘flame’ bits coming off the top or the bottom. Id be happy to send the file to you if you leave me your e-mail if you want to take a look at it.

    Thanks again, i can still used the product that i am left with so i am happy either way. =)

  • [WOH]Prancer

    I tried this but it turned out as crap, most likely due to me just starting out on photoshop. I barely had any of the crackles visible when I was done and could not get the orange fiery blur at the end. Any suggestions or anybody will to help me out? I wanted to due this to my name( [WOH]Prancer ). Thanks for any help or suggestions.

  • DevilG

    Hello
    Nice tutorial …. anyway ..can u please send me the psd file ?
    Thank`s in advance!

  • Ed Hardy

    Nice post. Most blogs or not very informative. At least I learnt somthing with yours.

  • PUNISHER_LP

    can you send me the photoshop file pls ?
    I’m confused at step 3 because i have ps7 and i think ps7 does not support “clipping mask”

  • http://www.aberration-metal.com Andrew

    Hi,

    could you also send your psd file to me? I can’t get the shine effect on my letters.
    I would appreciate that very much!

    Kind regards,

    Andrew

  • http://xanaxonline.myplaxo.com xanax

    I bookmarked this site. Thank you for good job!

  • http://www.psdeluxe.com jason

    I really liked the way they came off

  • Mike

    James, I’ve been trying this effect and am just not getting the same outcome. Any chance you could e-mail me the .PSD as well when you get a chance? I’d appreciate it.

  • http://blog.umitbuyukoz.com/en-iyi-30-photoshop-yazi-efekti/ En İyi 30 Photoshop Yazı Efekti | Ümit Büyüköz

    [...] Cracky Text Effect [...]

  • http://www.xHousexOfxWolves.deviantart.com Nick

    Very nice, however my outcome doesn’t look as great any chance of a PSD email? I’d appreciate it

  • http://www.uprinting.com/Business-Cards.html Business Card Printing

    The font really complemented the effect, that was the perfect choice really. Thanks for posting this tutorial, I’m looking forward to trying this one out. Excellent work!

  • http://www.jostudio.com/2009/03/awesome-photoshop-text-effects-tutorials/ Awesome Photoshop Text Effects Tutorials

    [...] Cracky Text Effect [...]

  • http://jurekm55.50gigs.net/ seizedcarautos

    Hello to all ! Great site. I am new here greetings to all from Poland.

  • paw

    could you send me the psd file please?
    cant get that same blur effect at the end like you ><

  • http://www.tripwiremagazine.com/tutorials/photoshop-tutorials/stunning-photoshop-text-effect-tutorials.html 80+ Stunning Photoshop Text Effect Tutorials | tripwire magazine

    [...] Cracky Text Effect [...]

  • http://photoshop.forgingfire.com/2009/04/create-a-diablo-iii-inspired-grungy-text-effect-in-photoshop/ Photoshop Tutorials | Photoshop Tutorial | Free Photoshop Tutorials | Forging Fire Studio

    [...] Launch tutorial Share and Enjoy: [...]

  • Nicholas

    I dont understand which curves are that.

    If you have bandwidth , so why dont you upload on rapidshare ?
    it will be a lot easier

  • Blashyrkh

    Nice tut, but a bit confusing on step 4. Screen blending option doesn’t give the shown result, I used multiply instead.

    Those who can’t find the Curve tool, press Ctrl+M on your keyboard people.

  • admin

    @Nicholas: PSD files aren’t something I’m preparing to give away for free at the moment :)

  • Frank

    Hey…really great tutorial…but i’m stuck at the end….how did you get the motion blur and the brush effects

  • revO

    cant you upload a photoshop file of this effect? for me its really hard to translate this filters etc.
    i really loved to try this :D

  • James

    @rev0: In the future I may consider upload some of the PSD files for free for future tutorial/or just as a giveaway. However at this stage, I do not wish to giveaway PSD files as it would be unfair to those who have already paid for them. Do apologise for this.

  • http://thepirateway.net/?p=2487 Design a God of War III Inspired Cracked Text Effect in Photoshop

    [...] Create a Diablo III Inspired Grungy Text Effect [...]

  • ImporamuraJak

    newwm 26590 c krj cs kamagra 91392 fdjskv fdvf buy kamagra online in UK http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=buy_kamagra_online_in_uk kamagra buy :) wqiunx 29005 buy kamagra 21024 vbrtbrt

  • http://www.ouech.net/the-most-popular-photoshop-tutorials-of-all-time/ The Most Popular Photoshop Tutorials of all Time | Ouech.net

    [...] Create Diablo III Inspired Grunge Text Effect [...]

  • http://jinspiration.wordpress.com/2009/07/20/the-most-popular-photoshop-tutorials-of-all-time/ The Most Popular Photoshop Tutorials of all Time « JinSpiration

    [...] Create Diablo III Inspired Grunge Text Effect [...]

  • http://sakabatou.wordpress.com/2009/08/24/30-awesome-photoshop-text-effects-tutorials/ 30 Awesome Photoshop Text Effects Tutorials « Graphic Bowl

    [...] Cracky Text Effect [...]

  • Vlad

    Hi, you make awesome things, and a nice tutorial, but i have some comments sothat you can improve it in future:

    -Please show more often the result of the used tool.
    -Make the tutorial til its final end, cause this ends up with just fire coloured text without the flames and that smudged letters effect, what is very very dissapointing. I havent the result you have, cause i havent those brushes and knowledge..

  • el

    could you add how to do the motion blur? its not having the result i wanted..

  • http://www.aniacyrson.com photographe

    Thanks, so nice!

  • http://www.pierreabraham.be architecte liège

    i really loved to try this :D

  • http://www.aniacyrson.com photographe

    i really loved to try this :D

  • http://mu.freakz.ro/ Stricken

    Thank you very much, useful ;)

  • http://www.graphicmania.net/40impressive-photoshop-text-effects-tutorials/ 40+ Impressive Photoshop Text Effects Tutorials | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net

    [...] That’s about it, everything else we’ll be creating ourselves. Now, does that sound cool or what?Create a Diablo III Inspired Grungy Text EffectThis tutorial shows the way to create the Diablo III Inspired Grunge Text Effect. It is very nice [...]

  • http://www.neurosoftware.ro/programming-blog/facebook-web-design/photoshop/40impressive-photoshop-text-effects-tutorials/ 40+Impressive Photoshop Text Effects Tutorials | Programming Blog

    [...] Create a Diablo III Inspired Grungy Text Effect [...]

  • Ruslan

    I want to ask you James. After finishing these steps abave we received same text with fire or only darck yellow text and shadow?

  • Ruslan

    I’m sorry for my grammar.

  • Reaper

    can you please send me the PSD for this ? =(

  • John

    hellow,

    I have some problems in step 3

    where and how(in what program) i need to open the texture image file>?
    What i need to select what tool?
    how i drag on the text layer?

  • http://www.gold-kaufen-verkaufen.info gold-kaufen-verkaufen

    I like your tutorial about this nice text effect!
    Simply stunning!

  • http://www.levoltz.com/2010/02/15/140-high-quality-categorized-photoshop-text-effect-tutorials/ 140+ High Quality Categorized Photoshop Text Effect Tutorials | LeVoltz – iPhone Games, Engineering Projects, Wordpress Themes

    [...] Cracky Text Effect [...]

  • http://www.bire1.info/?p=138 Etkileyici Photoshop Text Efektleri « Birebir Paylaşım

    [...] Create a Diablo III Inspired Grungy Text Effect [...]

  • http://goldpreis.wordpress.com Goldpreis

    Thanks for “Create a Diablo III Inspired Grungy Text Effect” post. So nice.

  • Bas

    wow dude, awesome tutorial, I’m just a beginner so, many thanks! even for me it was simple to follow your lessons
    keep up the good work! and let me know when you got new good looking stuff!:)

  • http://fairahdo.wordpress.com/2010/03/10/tutorial-photoshop/ Tutorial Photoshop « UNIVERSAL's Blog

    [...] Create a Diablo III Inspired Grungy Text Effect [...]

  • Magnus

    im lost in step 5..help pls..♫♪

  • Magnus

    big circle brush?!

  • James Qu

    @Magnus: with step 5, the circle brushes are those round ones comes with Photoshop by default. Make sure you set the opacity low, around 30%.
    Hope this helps

  • http://www.4over4.com Stickers and Labels Lover

    Great man, Diablo in deed, great tut by the way, thanx fo sharing!!!!

  • http://www.zrhprint.com zrh

    thanks for sharing ! but I can’t see the picture !!

  • http://www.photobuzz.org Jen Pruett

    Amazing tutorial, great technique will try it, Thanks Jen

  • http://Website AEQ

    which brush effects can be used here to get smth like u got? i have experimented with motion blur and other blurs, but not satisfied. If u could share urs or something. thanks beforehand

  • http://Website heernitVono
  • http://Website marco

    dude, can i ask something.. i dont know to upload the text! can you tell what to on loading text in photoshop! ty..nice tuts..

  • http://n/a jethz

    awesome! pls send me the psd file. . if thats okay. advance tnx.

  • http://www.pharmacy2u.co.uk/frontline.html Buy Frontline Online

    Grrrreat…..I have done it alone.thanks for your given information.

  • http://goldpreise.net/goldbarren/ Goldbarren

    nice picture!

  • http://Website yan paing

    I like your website .

  • http://www.onlinepharmacyguru.com online uk pharmacy reviews Guru

    Great and amazing tutorial. Bookmarked now.

  • http://www.debtscotland.net Debt Scotland

    Excellent Post! I’ll be doing that text effect in no time!

  • http://Website matt

    can you tell me the settings for curve plz

  • http://Website mike

    doesnt seem to work..
    at least not in cs5
    from step 3 it doesnt show the effect you show.

  • http://www.keshcash.com Diablo III beta keys

    That’s quite a sexy font you made.

  • http://Website JeLLo

    How can i get that font Metal macabre? i already download the font. i dont know where to put it.. can you help me..

  • http://www.trustdeedscotland.net/index.php Trust Deeds

    Are the images that you used open for public use?

  • James Qu

    Yes, that image is on cgtextures.com and open for public use.

  • http://www.inflatabletrade.com/ China Inflatable

    It is funny and awesome, it looks like letters with fire. Maybe it is also suitable for games of Blizzard Enertainment.

  • http://factoidz.com/digestive-system-disorders-common-digestive-system-diseases-and-disorders/ Digestive system disorders

    Looking forward to your next posts

  • slacchip

    you have to install the font, and here is that you can do:    open control panel, and open there the fonts folder. After that simply pull the desired font in that folder, and it will install that. After that, open photoshop, and you can work with that. You have to reopen Photoshop if it was already started, just after the installation, you can use the font.

  • slacchip

    you have to install the font, and here is that you can do:    open control panel, and open there the fonts folder. After that simply pull the desired font in that folder, and it will install that. After that, open photoshop, and you can work with that. You have to reopen Photoshop if it was already started, just after the installation, you can use the font.

  • Alex

    man   yo are suck a idiot      the post are so stupid pls explain your self wend yo make a new  topic :|

  • REX

    suck explained!!!!!!!

  • Alisha Smith

    I’m happy when reading through your site with up-to-date information! thanks alot and hope that you’ll publish more site that are based on this website.

  • Ziad

    good job

  • Aaa

    Suck explaned!!!