Create a Stunning Shattered Stone Effect Typography in Photoshop


I remember my first design article published on Designzzz. A typography tutorial it was and I bagged much praise for that. Today when I decided to make another typography tutorial with some hardcore designing techniques.

The previous tutorial was for creating a funky groovy kind of a design, this is the opposite. Here, you’ll learn how to create a tough ‘broken hard stone’ effect on text. This kind of design looks great on men’s products or anything where strength is required to be shown in design.

I think I should focus more on design tutorials, what do you think?

Final Preview

photoshop tutorial of typography

Kick off

Let’s just start by typing a simple text, what could be better than “Designzzz”. Don’t forget to place all the letters on separate layers. And converted all the vector text layers to Rasterised bitmap layers.

Designzzz destuction typography tutorial

Here I select the Pen Tool and make Paths on the letters. These paths will break the letters in pieces.

pen tool usage in photoshop tutorial

Now what I did here is the that I converted the paths to Selection by pressing Ctrl+Enter over the path icon (or you can right click and strike Make Selection), this will convert the paths into marquee selection.

photoshop cs5 tutorials

Now after moving and breaking all the pieces, this is the result I got. You wouldn’t get the identical but something similar would do the trick.

typography tutorial of the photoshop


Apply the Pattern on the Designzzz Text layer

photoshop tutorial

photoshop tutorial of cs5

Apply the Drop Shadow on the Designzzz Text layer.


applying the drop shadow and the pattern


For the background, I added a wall image.

stoke image for the typography tutorial

Add the Solid Black Color layer over the Wall layer. After that, change the opacity of the Wall Layer to 16%.

Typographic color tutorial

Here is the final image that I get after applying the color on the wall image.

typography tutorial of the photoshop cs5


Now I added the Broken Glass image over the Designzzz layer.

typography tutorial

I added multiple copies of the same image here there. After I changed the blend mode of this broken glass layer to Overlay.

tutorial of typograhy of photoshop cs5


It already looks good but I thought to add a little shadow glow behind the text. This is an optional step so you can avoid that if you want.

Amazing typography  tutorial

Make a new layer filled with the following color.

Photoshop tutorials

Add a blur

typography tutorials

Final Result

amazing tutorial

Without Glow

typography tutorial

Leave your comments below to let me know what you think about this tutorial 🙂

create free website wix below post

Further Related Readings

  1. waseem September 13, 2011 at 6:04 am

    @Stealth Web Design
    Thanks for the beautiful comment 🙂

  2. Ayesha Imtiaz ! October 15, 2011 at 10:49 pm

    yOu should alsO give links fOr da background image u used nd pattern ! em unable tO search this 1 . well great pOst !

    1. waseem October 16, 2011 at 8:50 am

      Actually we have a library here and we sometimes grab images from there, that’s why I couldn’t provide you link right now but it isn’t that important. You can use any wall.
      I do apologize for this and I understand that from now on I will take all images from net and provide proper links for you to mimic my tutorial.
      and thank you for the comment and guidance.

  3. Ayesha Imtiaz October 16, 2011 at 9:42 am

    nP !

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved