Design a God of War III Inspired Cracked Text Effect in Photoshop

Posted on June 7th, 2009 under Inspirations,Text Effects

Subscribe for test king online training and download testking 640-802 questions and answers plus testking 70-680 test samples to review and pass exam on time.

In this tutorial, I will show the processes involved in designing a God of War III Inspired Cracked Text Effect in Photoshop. I personally have been a fan of the God of War Series for a long time and got the inspiration for this tutorial from the game title text effect, and thought I could make a tut for it :)

Along the way, I would like to show you the use of custom brushsets in Photoshop and how to use them to create eye-catching effect for your design work. There are also techinques such as layer blending mode, masking and image adjustments. Have a go!

Here is a preview of the final text effect for this tutorial:

Alternative version:

Let’s get started!

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

Grunge Brushset

Font

Crack Brushset

Step 1

Create a new document sized 1200px * 800px, fill the background layer with Black colour. Create a new layer called “background texture” on top of the background layer, and we’re going to do some painting with the Grunge Brushset we have just downloaded.

Firstly we want to load the brushset into Photoshop. To do this, press the “B” key to select the Brush Tool, and following the steps as shown in the following screenshot:

1. Click the down arrow next to the Brush shape/size

2. Click the right arrow on the top right corner of the brush palette

3. Click the “Load Brushes” option on the menu

1 load brush 500x277 Design a God of War III Inspired Cracked Text Effect in Photoshop

After this, you will see a window pop-up and simply select the Grunge Brush set you just downloaded/extracted, and you will see those brushes appear in the palette as shown below:

2 after load 500x337 Design a God of War III Inspired Cracked Text Effect in Photoshop

(The yellow highlighted part indicates the brushset we have just loaded)

So now we have a set of grunge textures we can use to create our background texture. On the “background texture” layer, use those brushsets we just loaded and paint some irregular, grungy patterns on it:

(Hint: don’t just stick with one brush, try out a combination of them and adjust the flow and opacity for each different brushset, experiment and see what result that bring you)

Here is what I have after a bit of painting with the grunge brushset:

1 after paint 500x335 Design a God of War III Inspired Cracked Text Effect in Photoshop

Step 2

Now we have a grungy style background texture. Let’s type some text onto it by using the font we downloaded at the start of this tutorial:

2 type 500x328 Design a God of War III Inspired Cracked Text Effect in Photoshop

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

Drop Shadow

2 drop sha 500x350 Design a God of War III Inspired Cracked Text Effect in Photoshop

Inner Shadow

2 inner sha 500x350 Design a God of War III Inspired Cracked Text Effect in Photoshop

Bevel and Emboss

2 bevel 500x350 Design a God of War III Inspired Cracked Text Effect in Photoshop

Gradient Overlay (Hint: you can adjust the position of the gradient by left-click and drag on the text)

2 grad overlay 500x350 Design a God of War III Inspired Cracked Text Effect in Photoshop

And you will have the following effect:

2 effect 1 500x328 Design a God of War III Inspired Cracked Text Effect in Photoshop

Duplicate this text layer once and make the text look bolder and thicker:

2 effect1 500x332 Design a God of War III Inspired Cracked Text Effect in Photoshop

Step 3

Load the selection of the text layer (if you’re not sure how to do so, please take a look at Step 3 of my previous post) and create a new layer called “crack texture”. While maintaining the selection, load the “Crack brushset” into Photoshop and on the “crack texture” layer, use this brushset to paint over it.

You will see because we keep the selection active, the crack texture appears only within the selection:

3 paint 500x329 Design a God of War III Inspired Cracked Text Effect in Photoshop

Duplicate the “crack texture” layer once and change the blending mode of the duplcated layer to “Multiply”, you will have the following effect (the crack texture darkened) :

3 duplicate 500x325 Design a God of War III Inspired Cracked Text Effect in Photoshop

To create some more variation to the crack, we can add some more layers and on each added layer, apply a different crack texture from the brushset, and set the layer blending mode to “overlay”.

You can add as many layer as you wish, here is what I have after adding two more layers of crack texture:

3 effect 499x325 Design a God of War III Inspired Cracked Text Effect in Photoshop

Step 4

Now we can some colour on the text. To do this, load the selection of the text layer again, create a new layer on top of all other layers called “colour overlay”.

Here is the tricky bit: What I would like to achieve is some colour variation, so I use the Lasso Tool with a 10px feather, substract the upper portion of the selection off by holding down the Alt Key while making the selection:

4 lasso 500x198 Design a God of War III Inspired Cracked Text Effect in Photoshop

While maintaining the selection, pick a colour and a soft round brush, and paint inside the selection:

4 colour 500x255 Design a God of War III Inspired Cracked Text Effect in Photoshop

Load the text layer again, create a new layer above the previous colour overlay layer, this time choose a lighter colour and soft brush, paint it on the upper portion of the text:

4 effect 500x299 Design a God of War III Inspired Cracked Text Effect in Photoshop

Step 5

Now we can add some adjustment layers to bring out some colour contrast and lightness for the overall effect. I added the following two adjustment layers (Layer > New Adjustment Layer > …)

Levels

5 level Design a God of War III Inspired Cracked Text Effect in Photoshop

Curves

5 curves Design a God of War III Inspired Cracked Text Effect in Photoshop

And here is the final effect for this text effect: (Click to enlarge)

Ok that’s it for this tutorial! You can of course add some of your own texture or filter effect and see what the end results are! Remember to always keep your own creativity!

Here is an alternative version I have: (click to enlarge)

Hope you enjoy this tutorial, drop me a comment if you have any question, I will try my best to help you out.

Cheers and have a nice day!

Fresh Posts from PSD Vault

Imagination Unleashed: Best of PSD Vault DeviantART Group – Vol. 23

Easily Apply Texture with Clipping Mask to Produce Unique Text Effect in Photoshop

Unique and Curious Photoshop Tutorial Showcase – January 2012

Creativity Fine-Tuning: Best of PSD Vault Flickr Group – Vol. 54

Design Abstract Surreal Text Effect with Metal Texture in Photoshop

VIP Exclusive Tutorial – Create Advanced Photo Manipulative Artwork via Grunge Textures and Colour Effect

http://www.psaddict.com psaddict

My fav game, really good work.

Added to http://www.psaddict.com
E_Van

what the purpose changing the flow of a brush?
I’m a newbie in photoshop. :)
http://www.tutorialul.ro Ionut

Links for brushes don`t working.
http://www.photoshoproadmap.com/Photoshop-blog/2009/06/08/30-fascinating-video-game-inspired-photoshop-tutorials-and-brushes/ 30 Fascinating Video Game Inspired Photoshop Tutorials and Brushes

[...] Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
James

@Ionut: that should be fixed now. thanks for pointing it out!
James

@E_Van: the purpose is to add depth and create variety for the background texture, plus to get familiar with the use of custom brush. If you’re new to Photoshop, this would be good for you to start practicing :)
http://www.joyoge.com/ joyoge designers’ bookmark

it look very nice, thanks for effect tut..
http://photorestorationretouching.com/ photo retouching

Great result, a lot better than the standard fonts that come preloaded in windows.
NEWBIE

THANKS FOR THE POST, BUT I SUGGEST IF YOU DONT MIND
PLS. INCLUDE THE DRAWING WHILE DOING THE STEPS 1- 5
James

@NEWBIE: thank you for the suggestion, I thought of including them in the tutorial, but in the end I thought it would be better to leave them upon your own creativity. In the future I might try and do a basic tutorial on the brush flow/drawing skill seperately, hope that will help :)
Louwrie

Thanx for a great Text lesson, this was great!!!!
http://www.ac-web.org/forums/graphics-discussion/59104-tutorial-list-great-photoshop-tutorials.html#post499917 [Tutorial] List of Great Photoshop Tutorials – AC Web

[...] Text Underwater Text Effect in Photoshop Furry Text Artistic Tiles Text Effect in Photoshop Design a God of War III Inspired Cracked Text Effect in Photoshop Wooden Text Effect in Photoshop Flaming Hot Fire Text In Photoshop Create a Simple, Professional [...]
http://hdsfl nave

nave ynaco :D
http://www.onextrapixel.com Terrance-OXP

This is really great, especially when you are a great fan of GOD of War like me. :P
http://photoshoptexteffects.com/?p=42 100 Photoshop Text Effects- Custom Picked :: Photoshop Text Effects, Photoshop Tutorials, Fonts, Brushes and Articles

[...] God of War III Inspired Cracked Text Effect [...]
http://photoshoptexteffects.com/?p=1 Photoshop Text Effects, Photoshop Tutorials, Fonts, Brushes and Articles » 100 Photoshop Text Effects Tutorials

[...] God of War III Inspired Cracked Text Effect [...]
http://thepirateway.net/?p=9943 Design a Golden Flame Text Effect with Soft Smoke in Photoshop

[...] Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://www.webdesignbooth.com/40-really-useful-photoshop-text-effect-tutorials/ 40 Really Useful Photoshop Text Effect Tutorials

[...] 7. Design a God of War III Inspired Cracked Text Effect [...]
http://porady-it.org/index.php/grafika/5-ciekawych-efektow-tekstowych-w-photoshopie.html 5 ciekawych efektów tekstowych w Photoshopie « Porady IT

[...] 4) Napis wzorowany na God of War III [...]
http://mahallo.net/multimedia/40-naistina-polezni-photoshop-uroka-za-tekstovi-efekti 40 наистина полезни Photoshop урока за текстови ефекти

[...] 7. Design a God of War III Inspired Cracked Text Effect [...]
http://stylomx.com/40-espectaculares-efectos-de-texto-en-photoshop-82 40 Espectaculares efectos de texto en Photoshop | STYLOmx

[...] 7.- Texto Estilo God of War III: [...]
http://www.konkeanweb.com P@W

very cool!!!
http://www.webdesignmash.com/blend/?p=46 Design a Cracked Text Effect in Photoshop ‹ Design Blend

[...] View the Tutorial In this tutorial, I will show the processes involved in designing a God of War III Inspired Cracked Text Effect in Photoshop. Share and Enjoy: [...]
http://www.kaplang.com Kaplang

wow really cool tutorial and really cool effects :)
http://siteniziyapiyoruz.com yaren

very veryy easy :) I can do. thanks
http://www.xdesignblog.com/design-a-golden-flame-text-effect-with-soft-smoke-in-photoshop Design a Golden Flame Text Effect with Soft Smoke in Photoshop | X Design Blog

[...] Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://asd.asd.asd fenheal

GREAT WORK MAN…
http://huibit05.com/design/textures/50-amazing-photoshop-text-effects-tutorial/ 50 Amazing Photoshop Text Effects Tutorial | huibit05.com

[...] Design a God of War III Inspired Cracked Text Effect [...]
http://www.downrex.com/tutorials/photoshop/design-a-chilling-and-icy-text-effect-in-photoshop/ Design a Chilling and Icy Text Effect in Photoshop | Downrex

[...] Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
Abhilasha

its really 2 gud ,,…….
http://www.faydaliweb.com/tasarim-dizayn/photoshop-tasarim-dizayn/40-tan-fazla-photoshop-yazi-efekti-alistirmasi.html 40 tan fazla photoshop yazı efekti alıştırması | Photoshop

[...] 7. Design a God of War III Inspired Cracked Text Effect [...]
http://www.graphicmania.net/40impressive-photoshop-text-effects-tutorials/ 40+ Impressive Photoshop Text Effects Tutorials | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net

[...] just takes 12 steps to complete. it is a great effect and i like it so much, you should all try it Design An A mazing Cracked Text Effect in PhotoshopIn this tutorial, it will show the processes involved in designing an Awesome Cracked Text Effect in [...]
http://www.neurosoftware.ro/programming-blog/facebook-web-design/photoshop/40impressive-photoshop-text-effects-tutorials/ 40+Impressive Photoshop Text Effects Tutorials | Programming Blog

[...] Design An A mazing Cracked Text Effect in Photoshop In this tutorial, it will show the processes involved in designing an Awesome Cracked Text Effect in Photoshop. The inspiration for this tutorial is from the game title text effect, and it is very nice that the designer transform this into Photoshop tutorial, just have a try! [...]
http://www.neurosoftware.ro/programming-blog/facebook-web-design/photoshop/40impressive-photoshop-text-effects-tutorials-2/ 40+Impressive Photoshop Text Effects Tutorials | Programming Blog

[...] Design An A mazing Cracked Text Effect in Photoshop [...]
VENOM

nice post dude…but it was a bit easy one….
http://speckyboy.com/2009/12/18/the-best-40-photoshop-text-effects-from-2009/ The Best 40 Photoshop Text Effects from 2009 : Speckyboy Design Magazine

[...] God of War III Inspired Cracked Text Effect [...]
http://www.coreldesign.com/blog/?p=999 40 آموزش افکت متنی در فتوشاپ | به وبلاگ کرل دیزاین خوش آمدید

[...] God of War III Inspired Cracked Text Effect [...]
http://www.kaangokce.com/2009/12/19/en-iyi-40-adet-photoshop-yazi-efekti/ En iyi 40 Adet Photoshop Yazı Efekti « Kaangokce

[...] God of War III Inspired Cracked Text Effect [...]
http://www.heycome.net/the-best-40-photoshop-text-effects-from-2009.html The Best 40 Photoshop Text Effects from 2009 | 嗨，来网络

[...] God of War III Inspired Cracked Text Effect [...]
http://www.jackchen.cn/blog/?p=2004 2009年40个华丽的photoshop 文字特效设计 | Jackchen Design 1984

[...] God of War III Inspired Cracked Text Effect [...]
http://focusec.cn/index.php/09-best-text-effect-photoshop-tutorials/ 2009年国外最佳文字效果photoshop教程 | Focusec

[...] 战神3创意的破裂文字效果 [...]
http://wordpress.yammh.net/2009/12/23/52-great-looking-photoshop-text-effects-tutorials-%e2%80%93-part-1/ wordpress dev » Blog Archive » 52 Great Looking Photoshop Text Effects Tutorials – Part 1

[...] Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://forusedesign.com/article/62 Text Effect with Photoshop « Foruse Design Studio

[...] God of War III Inspired Cracked Text Effect [...]
http://www.newspoon.com/the-best-photoshop-text-effects.html 2009年40个最佳Photoshop字体设计教程_新勺网| 专注于引进国外设计资源和设计酷站_

[...] God of War III Inspired Cracked Text Effect [...]
http://www.i-render.net/2009/12/28/the-100-most-popular-photoshop-tutorials-2009/ The 100 Most Popular Photoshop Tutorials 2009 « i-render | Creative Media

[...] Design an Awesome Cracked Text Effect in Photoshop [...]
http://www.omnetsolution.com/blog/?p=170 The Best 40 Photoshop Text Effects « Om Net Solution

[...] God of War III Inspired Cracked Text Effect [...]
http://airyland.com/blog/40-photoshop-text-lessons/ 40款最漂亮的PhotoShop特效文字制作教程 « 幻岛|领地

[...] God of War III Inspired Cracked Text Effect [...]
http://www.afiffattouh.com/web-design/140-high-quality-categorized-photoshop-text-effect-tutorials 140+ High Quality Categorized Photoshop Text Effect Tutorials | Afif Fattouh – Web Specialist

[...] God of War III Inspired Cracked Text Effect [...]
http://maniacs.crossfire.ro bobmarleyisnotdead

the links do not work couldnt do this tut :(
http://imaginationshare.wordpress.com/2010/01/16/9/ Imagination Share

[...] 7. Design a God of War III Inspired Cracked Text Effect [...]
http://77even.net/2009/12/20/the-best-40-photoshop-text-effects-from-2009/ The Best 40 Photoshop Text Effects from 2009 | Seventy Seven

[...] God of War III Inspired Cracked Text Effect [...]
http://phorias.wordpress.com/2010/01/20/los-mejores-efectos-de-texto-de-photoshop-en-2009/ Los Mejores Efectos de texto de Photoshop en 2009 « phorias

[...] God of War III Inspired Cracked Text Effect [...]
http://www.lxlabs.com.cn/?p=30 2009年最经典40个photoshop教程 « Lx实验室

[...] God of War III Inspired Cracked Text Effect [...]
http://www.bire1.info/?p=138 Etkileyici Photoshop Text Efektleri « Birebir Paylaşım

[...] Design An A mazing Cracked Text Effect in Photoshop [...]
http://YOUTUBE.COM/user/superdrifter101 WAJID ABBASI

Please make a the Video DUde
jagutiger

hey man…how can we use the fonts?
http://creativenerds.co.uk/tutorials/70-photoshop-ttorials-for-creating-perfect-typography/ 70 Photoshop Ttorials For Creating Perfect Typography | Creative Nerds

[...] 30. Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://www.neurosoftware.ro/programming-blog/facebook-web-design/tutorial/70-photoshop-tutorials-for-creating-perfect-typography-2/ 70 Photoshop Tutorials For Creating Perfect Typography – Programming Blog

[...] 30. Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://thenewdrop.com/?p=297 70 Photoshop Tutorials For Creating Perfect Typography | The New Drop

[...] 30. Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://www.lanche86.com/blog/70-photoshop-tutorials-for-creating-perfect-typography/ 70 Photoshop Tutorials For Creating Perfect Typography | blog.lanche86.com

[...] 30. Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://www.booto.net/?p=5326 70个字体Photoshop设计教程 | Booto’Blog

[...] 30. Design a God of War III Inspired Cracked Text Effect in Photoshop [...]
http://techbytez.wordpress.com/2010/04/07/80-best-photoshop-text-effects-tutorials/ 80 Best Photoshop Text Effects Tutorials « Techbytez’s

[...] God of War III Inspired Cracked [...]
http://gabrielcatalano.wordpress.com/2010/04/07/80-best-photoshop-text-effects-tutorials-part-iii/ 80 Best Photoshop Text Effects Tutorials, Part III « gabriel catalano | in-perfección

[...] God of War III Inspired Cracked [...]
http://www.jackscript.com/80-best-photoshop-text-effects-tutorials-part-iii 80 Best Photoshop Text Effects Tutorials, Part III | #! Jack Script

[...] God of War III Inspired Cracked [...]
http://lnx.web-burning.it/2010/04/06/80-best-photoshop-text-effects-tutorials-part-iii/ 80 Best Photoshop Text Effects Tutorials, Part III Web Burning Blog

[...] God of War threesome Inspired Cracked [...]
Zilva

For some reason my font wont load do you know why?
Zilva

None of the fonts that i download work…. They say: “Could not complete your reqeust because they are the wrong type of document” What should i do? can i download them in a different format?
nimar

Nice tut and font! ^_^
For the font you have to paste it in the windows folder and that’s it
http://www.freelancers.vn/Home/2010/04/26/80-bai-huong-dan-photoshop-ve-hieu-ung-text/ 80 Bài hướng dẫn Photoshop về hiệu ứng text | FREELANCERS.VN – BE FREE YOURSELF – Hành trang cho Freelance Việt

[...] God of War III Inspired Cracked [...]
http://www.webrisorsa.info/creating-text-effects-using-photoshop-and-tutorial-collections/251/ Creating Text Effects Using Photoshop and Tutorial Collections | Design | Web Risorsa | A Web Resource Abode

[...] God of War III Inspired Cracked [...]
http://www.youtube.com/user/superdrifter101 wajid abbasi

please explain me step 4 i can’t understand how to please gIVE Me the example
http://Website M.O.A

Hey man, Nice tut but which version of Photoshop are you using? mine is CS2 and it’s giving me some useless results!!!!!!!!! but really, great tutorial.
James Qu

@M.O.A: I use CS3 for this tutorial. Yes some steps do require special functions on CS3, but usually there would be alternatives on early version.
http://Website one

do you have a video tutorial on this?.. Nice tut though. Just thought if there is a video tutorial on this.
http://Website Rolf

seriously, the part where you draw the background is impossible with the grunge textures you are giving, theres no way I can make the same amazing background it just seems impossible, really pls help there.
http://www.world-cup-jersey.net World Cup Jersey

there is a video tutorial on this.
http://ilhama06.student.ipb.ac.id ilham

wow, this tutorial very clear.thanks
http://Website Awesomenezz

Can anyone link the video tutorial pls?
http://Website SiNadh

Good Work , I tried it .
Nothing more found any Dissatisfaction.
Everything worked.
I enjoyed it.
Thanking You.
http://Website Fatima

awsome tutorials very inspiring!!!
http://www.20milesnorth.com spokane websites

Great tutorial, was the only one that gave the effect i was searching for that wasn’t so over the top basic it looked cheesy. Just enough instruction to get the job done right.
http://www.balloonprinter.org Balloon printer

I enjoyed it.
Thank you very much.
http://www.napkinmachine.org Sanitary Napkin Making Machine

this tutorial help me a lot, thank you.
http://www.kneader.org Kneader

the tutorials help me a lot. Thank you.
http://Website Maja

Oh noohh, I can’t use the brushes from the links.. That’s really a shame. Is there somebody to help me from this? Great tut. ;]
http://Website n5ive

it would have been a tad more helpful if you stated what colours are best to use when rather than having to guess.

awesome tute though.
http://www.cgbaran.com Cgbaran

Great tutorial thanks
http://coopernicus.wordpress.com cooper

doesn’t work in CS2…every time i select texturizer in step 3, i get a msg stating image must be rasterized. then loaded crack brushes do not appear in texturizer….
James Qu

@cooper: with step 3, you need to load the selection of the text – that’s to click on the text layer on the layer palette, then Ctrl + left-click the thumbnail image of the text layer.
Once the text is selected, paint the crack texture with the brush, and you will get the result shown in the tutorial.
No need to use texturizer.

Hope this helps.
http://Website Fazal Malappuram

Ohhhh

grateeeeeeee
http://Website Slayer_28

I was just wondering if you would be able to make a video tutorial? I am so lost and confused. It took me forever to figure out that after I typed in the text is when I needed to do the layer effect. But I still can’t figure out the other things, such as selecting the text in order to add the crack effects. Would you be willing to do a video tutorial for people like me who have a hard time following along with this one? It’s not you…it is very well done. I just haven’t ever done anything like this before, so it’s difficult for me to understand.
http://www.reformascoam.com REFormas

Fire and destruction!! LOL Great result with a few simple steps.
Anonymous

How to download PSD of this ?
http://www.facebook.com/profile.php?id=100000131639078 Bhavesh Rathod

hey u have any nfs under cover type font