Design a Horror Style Text Effect with Dirt and Splatter Texture in Photoshop

If you are new to photoshop then join SY0-201 online web designing course and get thousands of free 70-680 photoshop tutorials and 642-902 study guides prepared by experts to help you to boost up your creative skills and generate better ideas in web design.

In this tutorial, I will show you the processes I used in creating this horror style text effect with Dirt and Splatter Texture in Photoshop. I’ve got the inspiration from the game “Prototype” title typography and decided to have a bit experiment with it myself.

Along the way, we will be using a lot of layer blending options, image adjustments, selection techniques, custom brushsets painting and filter effects. This is an intermediate level tutorial and beginners may find it a bit tricky to complete, but why not have a try :)

Here is  a preview of the final effect for this tutorial: (click to enlarge)

horror-text-effect-flatten-2

PSD File Download

You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 70+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorial there. Signup now and get exclusive :) Find out more about the VIP Members Areas

Let’s get started!

To complete this tutorial, you will need the following stocks:

Font

Dirty Spray Brushset

Stroke and Splatter

Step 1

Create a new document sized 1200 * 800 px (in fact size doesn’t really matter here, choose one you feel comfortable with), use White as background colour.

In order to maxmise the effect, the choice of font is quite important here. For me I tend to use a Bold, Clean Font from at the start, simply because they are easy to manipulate and stylise. So go head and use the font we have just downloaded and type some text onto the canvas: (Hint: you can use Ctrl + T free transform tool to adjust the size of the text)

1 type

Step 2

On this text layer, apply the following layer blending options:

General Blending

2 general

Drop Shadow

2 drop sha

Inner Shadow

2 Inner Shadow

Bevel and Emboss

2 bevel and emboss

Contour

2 contour

Gradient Overlay

2 gra overlay

Stroke

2 stroke

and you will have the following effect:

2 effect

Step 3

Load the selection of the text layer by holding down the Ctrl key and left click the thumbnail image of the text layer on the layer palette:

3 load

Hit Ctrl + Alt + R and bring up the Refine Edge Tool, apply the following settings:

3 refine edge

and your selection will become like this:

3 after ref

Step 4

Maintaining the selection, create a new layer on top of the text layer and name it “Dirt Spray”, load the Dirt Spray brushset into Photoshop, and use the different brushes in this set, paint on the new layer.

You will see because we have the selection enable, the dirt appears within the selection:

4 paint

and here is the effect I have after a bit painting with the dirt brush:

4 after pai

Step 5

Now we can add some background textures to make the effect a bit richer. Load the “Stroke and Splatter” brushset into Photoshop, create a new layer called “texture” just above the background layer, select the brushes from this set to paint over the new layer: (I chose the red colour)

5 paint

Also you can use the splatter brushset for additional effect.

Now we can add some more decorations onto the text. I decided to add some curvy lines . To do this, create a new layer called “lines” and grab the Pen Tool, create the following working path on this “lines” layer:

5 path

And right0-click and choose the “Stroke Path” option, as shown below:

5 stroke path

Then select the option “Brush” and tick the “Simulate Pressure” option (Make sure set the brush size to 16px, with 100% hardness). Use the Free Transform Tool (Ctrl + T) and free transform it as shown below:

5 free trans

Duplicate this “lines” layer a few times, on each duplicated layer, free tranform it to different sizes. Here is what I have after the duplication and free transformation:

5 after duplicate

Optional: You can further enhance this effect by duplicating some more layers of the “lines” layer, and drag them on top of the text layer. Here is what I have after moving them above the text layer:

5 after move

Step 6

To create some uneven light effect, we can add a new layer on top of all previous layer, grab a soft round brush (I chose 150px) and select the White colour, do some single-clicks on the spot you would like to highlight:

6 high

Change the layer blending mode to “Overlay” and you will have the following effect:

6 effect

I further added some more background textures by using the splatter brushsets and here is what I have after the paintings:

6 final

Step 7

For some final adjustments, I decided to flatten the image (make sure before you do so, save a copy of the non-flattened one first), and duplicate the background layer once and desaturate the duplicated layer, go to filter > sharpen > smart sharpen and apply the following settings:

6 sharpen

And add a new layer on top of the duplicated layer, grab a big soft brush and paint some colour onto it:

7 paint

Change the layer blending mode to “Color” and you will have the following effect

horror-text-effect-flatten

Add the following two adjustment layers on top of all previous layers by going into “Layer > Adjustment Layer >…”:

Curves

7 curves

Colour Balance

7 col bal

and you will have the following final effect: (click to enlarge)

horror-text-effect-flatten-2

That’s it for this tutorial! Hope you enjoy it drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Categories: Text Effects

Tags: ,,,,,,

  • Awais

    this was amzing text style
    v v v v v v v v v nice Effect
    i am a great fan of your site its to good
    i want to submit a tutorial how can i do that i need your reply

  • http://10steps.sg Johnson Koh

    Very cool James. U r good in this!

  • anieng

    nice,,
    thx ^^

  • James

    @Johnson: thanks buddy!

  • http://www.joyoge.com/ joyoge designers’ bookmark

    nice text effect, thanks for the tut..

  • WOW

    wow dude this is awsome

  • http://insanolabilmek.wordpress.com Abdurrahman

    Nice effect, I did this effect and very to be was beautiful, thank you

  • Jaax

    Hey mate, i was wondering if you could get in touch, i really need some help with some stuff about this cool style :)

  • Jaax

    I was wondering if i could have an image made up for me, exactly like this one, but with the text saying “Emerge” because im only running version 7.0 and i can’t get the same kind of effects to it. =/

  • Flex developer

    Your site is very good. There are useful information and most importantly, for sharing great. Thank you ….

  • ElectronicPastry

    What version of PS are you running, James? I’m not sure if it makes much a difference with the issue I’m having or not. I’m using CS3 Extended, and I’ve followed the blending options for the text at the very beginning of the tut exactly, and I keep ending up with a darker, terrible looking text. I hope you can help out. If you want, I’ll use the same settings again and show you what I end up with.

  • / Spetch

    Ye ehm, i’ve got some problems with this one.. I cant get the “Splatter” effect or any other BEHIND the text, it´s growing above it.

    also the Lines with the Pen tool is very very hard for me to do. Maybe you could give me a hint on theese ocne, since i´m not that advanced into photoshop.

    -/Best Regards, SpeTch.!

  • http://www.wetinkpro.com Zac

    Very well written.

  • jake santos

    i cant do the step 3..what ps are u using with ds effect..?

    the ctrl+alt+r is not working here in cs2..i dont know y..!

    im not dat to familiar hir in ps ..!

  • CrimzonLabs

    ElectronicPastry

    Try a White to Light Grey gradient in the blending options.

  • Algwins

    Yeah, I’m having exacltly the same problem as ElectronicPastry =/. What to do? All your other projects where fine, so why this one? Many thanks for the incoming and awaited answer :)

    (Love your Tut’s, they’re amazing!)

  • Adam

    Yea the CTRL+ALT+R doesn’t work in CS2, any other way to do this part, I’m new to Photoshop.

  • ZaN

    cant you give me the PSD of it

  • jake

    what the hell

  • Petter

    very god tutorial! this was my result!
    http://bildr.no/view/481411

  • Moon

    can i use it for a game? loading screen or something

  • Toro

    Hi, I’ve liked thi tutorial, but how can I do those lines? After drawing a line with a Pen tool, choosing stroke path option with ticked “simulate pressure”, the line is just getting thicker, width is the same at the beginning middle and at the and of the line, not like here. What should I do? Yo

  • http://tutorialblog.info/ tutorial blog

    thank.

    Good post

  • Erin S.

    Wow! Thank you so much for this tutorial, it’s complete unlike most tutorials you find online and very thorough, so again, thanks!

  • Mark

    Your tutorial was good, but is made for people with knowledge of photo shop (lack of explanation in some parts of the tutorial), certainly not for first timers

  • gradient

    Your gradient style on the font is wrong. The one you have showing is a black gradient but then you show it being white. You made the same mistake in another tutorial as well

  • Rest

    Why doesnt the Qbrushes work? its 404’ing :l

    I need them

  • free fontz

    absolutely stunning!

  • Jules

    Thanks mate. Good one

  • Kashm1r

    Very much THX !! love this effect !!!

  • Peter

    Hi there, as many have stated issues with the blending options. There is definitely an error, because the resultin image is terrible. Please check the tutorial, becuase it does NOT work. It is a nice effect, but it’s worth of nothing if we cannot replicate it. Please fix the tutorial, or alternatively send me the .psd file, that I can examine it and update it for you.

    Thank you.

  • Crayon ^_^

    I Like Your Design in Text! I realy appreciate, and i love to see more of your works, very inspiartional. thanks a lot

  • Yusuf

    I’ve try it N it works great . really THX . Keep it up . Show us more .

    If ever smeone need the PSD file just email me on mb2507@live.com.

    Awesome Work !!!!!

  • Hootbehnam (贝南)

    Its Realy Nice & New kind of typo graphy ;-)
    I Love It… love love love love
    Tanx A Lot…

  • Niclas
  • DR_K1T0

    Wonderful

  • Diggler04

    This tutorial is awesome and easy to understand, love it.  Thanks a lot, I appreciate it.

  • Web Hosting

    Nice effect! Thanks!

  • Taupo Accommodation

    Cool paint brush effect :)

  • Building Inspections Auckland

    You’re really good on this! Nice work :)

  • Mislav

    Ok, It’s a great tutorial for someone who knows what he’s doing… Most of you don’t get the text right because you use different gradient…just make a lighter gradient and keep opacity of the gradient at 100%…if you can’t get the splatter brush effect behind the text you’re doing something wrong like…#1. you gradient opacity isn’t 100 %….#2 when you created a new layer called texture (step 5) you have to put it under the text and above the Background layer!…I hope it will help you somehow, And nice tut by the way :)

  • Dannyboy

    I’m new to photoshop and i’ve got the the line point. Sadly my line doesn’t seems to be as good has his. Could anyone help me?

  • http://www.facebook.com/patrick.dekker2 Patrick Dekker

    thanks my result: http://i.imgur.com/wUt66.png

  • KimJunHong.blogspot.com
  • http://www.facebook.com/beckymariebamforth Becky ‘Dinky’ Bamforth

    It appears to be the Opacity on the Gradient Overlay that he has not altered. I reduced mine down to 20% and had a damn close result if not the same result as what shows in step 3

  • Egene

    how do you make that strokes on step 5 (The part where you use the pen tool) I keep getting the round ends instead of like that

  • http://www.psdvault.com PSD Vault

    Hi, you need to tick “Simulate Pressure” before you apply the stroke.

  • http://www.shakur80s.net Shak

    Which Brush stroke you have applied on the following step :-

    Then select the option “Brush” and tick the “Simulate Pressure” option (Make sure set the brush size to 16px, with 100% hardness). Use the Free Transform Tool (Ctrl + T) and free transform it as shown below:

    I can’t get the same results

    @PSD Vault Thank you so much