shattered / smashed text tutorial

By ryanlerch

as promised, i have done up the tutorial for my smashed / shattered text effect. it is quite a simple process…
please, post links to your creations using this tutorial in the comments :P

Firstly, type your string as text.

1.png

next, i manually kerned my letters to make the spacing closer
together and a bit randomly moved up or down.

(manual kerning is done by putting the cursor after a letter,
holding down ALT and pressing an arrow key.)

2.png

now, we are going to take a wedge out of the text…
draw the wedge that you want to take out with the path tool.

3.png

now, select both the wedge and the text, and duplicate these items…
(do not deselect them after duplication)

4.png

with one copy of the text and the wedge item selected, choose
path > intersection, (this will create the wedge item from the text)
and change its colour (i changed it to magenta)

6.png

now, select the other red wedge path and the other text path
and choose path> difference. this will create a path of the text, with-
out the wedge in it, like below:

8.png

repeat this process on the black text for a number of different wedges…
and you will end up with something like this…

9.png

next, move the wedges out a bit to create the ”shattered” look…
you may need to path>inset some of the wedges to make them fit and look right…

10.png

now, combine all these seperate paths together…
press CTRL+A to select all, then choose path>combine…

11.png

next i put a ”grunge” look to the text…
there are many different ways of creating ”grunge brushes” in inkscape.
examples of how to do this can be found at these two places:
http://howto.nicubunu.ro/grungy_brushes/
http://www.redhatmagazine.com/…

here is the SVG file of the grunge i used:
http://www.box.net/shared/i70qaio1v7  

to use it, just lay it where you want on your path (in this case it is our shattered text…)
select both the grunge and the texty path, and choose path>differnce…

12.png

and here is the finished version… (SVG is here)
13.png

62 Responses to “shattered / smashed text tutorial”

  1. shattered text in inkscape « ryan lerch Says:

    [...] EDIT:  i have now done this tutorial… you can view it here [...]

  2. pjay Says:

    I’m working with the latest version of Inkscape (on WinXP) and the manual kerning doesn’t work. Is this a bug I need to report, or am doing something wrong?

  3. ry Says:

    im using the latest version of inkscape (0.45.1) on winXP too, and it works fine for me…

    how are you trying to do it? perhaps i did not explain it too well… :D

    the “Advanced Tutorial” in Inkcape probably explains the process a bit better than i did… (In inkscape go Help>Tutorials>Inkscape:Advanced to view the tutorial) the text editing section of that tutorial is about 3/4 of the way down the page…

    hope this helps…

  4. pjay Says:

    Thanks for your prompt reply (and for this tutorial).

    You’ve explained it perfectly well, but just in case I’ve checked the tutorial page, to no avail. I’ve also watched a tutorial on YouTube talking about manual kerning [ http://youtube.com/watch?v=9Vr97ze75Ww ]. Everywhere it’s the same set of instruction: (1) place cursor after letter to move, (2) hold down alt key, (3) move letter with arrow keys;

    I get the same (non-) result with two different machines (both WinXP), so I’m a little flabbergasted, that you don’t seem to have the same problem. Certainly also doesn’t make sense to post a bug, if I’m the only one experiencing this problem. I just have no idea what it could be related with (GIMP GTK?) …

  5. ry Says:

    okay pjay, i have done a little bit of research, and i think i have found your problem. Basically, manual kerning does not work on text that is “flowed” so try changing your text item to normal text (Text>Unflow) and then try your manual kerning…

    i found someone else that had this problem and filed a bug for it, here is the link to that bug report: http://sourceforge.net/tracker/index.php?func=detail&aid=1315383&group_id=93438&atid=604306

    cheers…

    :P

  6. pjay Says:

    :D

    Thank you very much for discovering how I can do manual kerning. You’re a champ! Now I’m debating with myself, if I should have thought of this myself …

  7. ry Says:

    I used Inkscape for nearly 6months before i discovered manual kerning, when i did though…
    :D
    i did not know that manual kerning did not work on flowed text before you asked the question, so i thank you for asking it :P

  8. Michael Fötsch Says:

    I googled for “cracked glass inkscape”, and your tutorial was at the top. I must say, your result looks great, so I tried to repeat your steps.

    I’m running into a problem, though. The shape of the text comes out completely destroyed when I do “cut path”. For example, the “A” doesn’t have a hole anymore, the letters are cut in the wrong places, and the fill is suddenly outside of the shapes in some places.

    It’s hard to explain, so I uploaded a screenshot of Inkscape.

    What am I missing? I’m somewhat of a newbie to Inkscape, so it might well be something very obvious. ;-) I’d really appreciate any help that you can give.

  9. Lensman Says:

    I am having the same problem as Michael above. I’m using Inkscape 0.45.1 on Fedora Core 5 and I get the same results.

  10. Michael Fötsch Says:

    I just found the reason, and as I assumed, it’s something very obvious:

    In the version of Inkscape that I use (0.43), “Path”->”Division” has the desired effect. “Path”->”Cut Path” is something completely different.

    Either it’s a typo in the tutorial, or the feature got renamed in Inkscape…

  11. ry Says:

    yeah, i originally had the tutorial as first making a duplication of the wedge and the text and doing a intersection (to make the wedge) on one set and a difference on the other set to make the rest of the text without the wedge…

  12. ry Says:

    okay, i hvae changed the tutorial back to what i had in the first place –
    a two step process of a difference and an intersection. hope this works for you guys, and thanks for helping me out!

  13. Michael Fötsch Says:

    When I used “Path”->”Division” in order to solve my problem, I had to select the pieces of the wedge (not easy for the small ones) and then group them. Your suggestion works even better.

    Thanks!

  14. ry Says:

    not a problem!

    sorry for leading you in the wrong direction to begin with…

    :P

  15. Shattered, Smashed and Grungy Text in Inkscape « the inkscape tutorials blog Says:

    [...] view this tutorial [...]

  16. bennyp Says:

    She’s a beauty. Thanks!

  17. asdf Says:

    “Path > Difference” doesn’t work for me. When I choose it nothing happens. Why does Inkscape suck so much?

  18. Rookie Says:

    Well i am very new to inkscape and all im tring to do is manipulaite text into an arc or in a “wrap” around effect. if some one could help me i would very much appreciate it. I also dont really know how to put an object on a path? if I draw a zig zagging line then create text group them and select “put on path the text does nothing. I would like the text to Sort of “ride” the line or “path” that I drew out can some one please take a rookie under there wing?

  19. naught101 Says:

    Ryan,
    You might be interested: http://naught101.deviantart.com/art/Coal-Killer-62461756
    Had the idea first, but couldn’t have done it without the tutorial, so thanks!

    Another way I found is to use the calligraphy pen to draw a web of cracks out from the centre, unite all the calligraphy paths, simplify (ctrl+L), select all nodes and convert the beziers to straight lines (might need to add some nodes before this step), then subtract the web from the text, or what ever you’re cracking.
    That said, I actually used your method for the above piece.

    Rookie: You need to unflow the text first (it can’t be in a box or already on a path), then it should work fine. Make the path invisible when you’re done.

  20. dp Says:

    Is it possible to adjust the tremor of a calligraphy line after it’s been drawn? in other words to give a normal line some tremor? Mail me if you knos? per favore!

  21. Erste Schritte mit Inkscape « Caromite Says:

    [...] habe ich eben meine Headergrafik etwas aufgepeppt mit einem schönen Schriftzug. Dazu habe ich dieses Tutorial [...]

  22. Raccolta di tutorials per Inkscape | linux 4 life Says:

    [...] Shattered text tutorial [...]

  23. E Raber Says:

    How do you overlay the two for the final step? I cant seem to add the graffitti part into the original, it only opens in a seperate window.

  24. Jason Says:

    Thank you. Was able to make this simple desktop using your tutorial. Thank you.

    http://humanflight.deviantart.com/art/shattered-innocence-78399420

  25. Jason Says:

    oops, just click my name to see the desktop.

  26. Jeremy Says:

    I’m not sure what I’m doing wrong here, but I’m using the newest version of Inkscape and I can’t get myself past the 3rd step where you draw the wedge in using the path tool. How exactly are you doing that? I’m clicking on the path tool, and I can create a wedge by dragging part of the “S”, but is it supposed to change color like you have it or what? I’m getting rather confused and feel like I’m missing an seemingly obvious step somewhere. Any help would be appreciated.

  27. Jeremy Says:

    Haha, never mind. Figured out where I was bring stupid. That’s what I get for trying out something new at 2:00am

  28. Rory Says:

    I like the font you’re using, can you reveal its name?

  29. Austin Says:

    how do you create the wedges?

  30. t Says:

    how do you take the wedge out of the text?

  31. Iseron. José Santiago Jiménez Sarmiento. » Curso de Inkscape en el IES Vecindario Says:

    [...] Blog de Ryan lerch [...]

  32. Alexis New Says:

    i need this tutorial in spanish….. can you please help me??? thank you……… a’ll be waiting……

  33. Andres Says:

    WoW! Wonderful tutorial!

  34. andry20 Says:

    Thank you for your site,
    I have been using inkscape to make design for my clothes, I was thinking this is a simple software, but when I found many articles from internet which covered up this tool, I realized that this is not just a simple software. Now I can create some text effect after see this page. Maybe you want to visit my blog here http://compissue.wordpress.com/2008/10/06/free-photoshop-like-software/. this link will show to this page visitors that there is another free software for manipulating image

  35. Ruber Eaglenest Says:

    I think I have a newbie problem. Simply, as I write down the text with the text tool, later I can’t kern each letter individually. Maybe you should update the tutorial to add that bit of information? I need a way to convert the text to curves, or just break the text in multiple object, one per letter.

    Someone, help me!

  36. ryanlerch Says:

    @Ruber Eaglenest:
    most likely, your issue is that you are using a flowed text object rather than a normal text object. (more than likely this occurs when you use click and drag the text tool and create a box)
    Kerning does not work on a flowed text box. To unflow a text box, select it, and choose text > unflow from the menu, then you should be able to kern to your heart’s content… :)

  37. Ruber Eaglenest Says:

    That was quite helpful. Thanks a lot!

  38. Ruber Eaglenest Says:

    One more problem. When I import the Svg file of the grunge effect, just the program resist to make the difference between the objects, even I can’t combine them, intersect them or whatever operation 8-O This is so strange.

  39. نيوكسيرو Says:

    [...] woodgrain effect شعر حقيقي Rubber stamp the grunge look ورق حقيقي cartoon dynamite نص مبعثر نص ثلاثي الأبعاد أنابيب وحبال ثلاثية الأبعاد عناصر [...]

  40. 25 Tutorials To Get You Started With Inkscape | LinuxHaxor.net Says:

    [...] 8) Shattered / smashed text tutorial [...]

  41. Marge Says:

    I’ve got my text how I want it, but I can’t figure out how to create the wedge. I go to “Path”—-”Division”/”Cut Path”—-select it and then attempt to draw one…and nothing happens…………how exactly am I supposed to make a wedge?

  42. Mike Says:

    I have a suggestion on a slightly quicker variation on this. Rather than do the wedge – intersection – difference step multiple times, I did the following steps.

    Type & adjust the text ( same as normal )

    I created all my wedges at once and distribute them over the text.

    Select all wedges and do a Path combine on them.

    Select both wedges and text, duplicate them do the intersection/difference steps just like in the tutorial.

    I can break apart the paths and shift around the piece to look good.

  43. thelowlander Says:

    quote:
    please, post links to your creations using this tutorial in the comments :P
    endquote.

    Well okay:
    http://thelowlander.wordpress.com/

    I tried to do this tutorial the same way Mike says he did it, but than I wouldn’t get any intersections. It only worked if I did it one piece at a time… :(
    I’m new to inkscape, so it’s probably my bad…

  44. 35 Tutorials to create amazing Vector Graphics using Inkscape : Speckyboy Design Magazine Says:

    [...] Shattered / Smashed Text [...]

  45. 35 Adet Vektörel Çizim Dersi (Inkscape) Says:

    [...] Kesik Yazı Yapımı [...]

  46. Hal D. Says:

    Yet another manual kerning issue. This has to do with the Mac version I’m using on a Macbook Pro. Nothing mentioned previously solves the problem. I unflowed the text, but still could not ALT-Arrow manually kern the text. Any Mac geeks out there know a workaround?

  47. Learn How to create Amazing Vector Graphics using Inkscape- Tutorials | guidesigner.net Says:

    [...] Shattered / Smashed Text [...]

  48. Itharius Says:

    Hi, nice tutorial :) Had some trouble with the grunge effect, the SVG of your brush didn’t work for me, Inkscape said it wasn’t a path so it couldn’t perform the Difference function. Got it to work by making a brush in Inkscape only (the first of the two links), copying the brush into the document with the text, using Path > Combine to make the shapes one object. Then selecting the text and one of the copies of the brush to Difference, and repeating that for each seperate use of the brush I made.

  49. Lindsay S. Says:

    WOW!! Great simple tutorial. I can see using this in so many different ways.

  50. Peter F. Says:

    Hello,

    I’m new to Inkscape, so thanks to everyone helping me to learn the program by myself.
    Thanks for the great tutorial, a really nice effect.

    I am having the same problem like Ruber Eaglenest posted above, I can not use the Grunge-SVG like I would.

    The bool-operation cannot be performed, because the Grunge is not a path. It cannot be converted to a path either.
    What am I missing?

    Thanks for your help!

    Peter

  51. Michael Says:

    Hello!

    I’ve had the same problem like Peter F.. You have to ungroup the selected grunge, then it works fine.

  52. inkscape tasarım dersleri « Bay Bedava – Netten Başlıklar Says:

    [...] Shattered / Smashed Text [...]

  53. Tutorial:Texto destrozado en Inkscape | Bitacorita.net Says:

    [...] duda pueden dejarla en los comentarios. Con ayuda del manual en ingles de ryanler, traducido y adaptado para la versión 0.46 (versión estable mas reciente) de Inkscape por David [...]

  54. liisa Says:

    I’ve finnish version and i don’t understand anytihng of that tutorial :p
    too difficult for me :D

  55. thyjhg Says:

    fdhgf fghfdh

  56. David Rios (dfrios) 's status on Wednesday, 16-Sep-09 14:36:53 UTC - Identi.ca Says:

    [...] shattered / smashed text tutorial (Inkscape) : http://ryanler.wordpress.com/2007/05/22/shattered-smashed-text-tutorial/ [...]

  57. mr.style Says:

    Thanks for the great tutorial! Very simple stylish and smashing! Especially great for the beginners with Inkscape like me :)

  58. Jon Says:

    Thanks for this tutorial – its really good. As you suggested, i have uploaded what I made using your tutorial for you to have a look at! This was my first attempt, im pretty proud of it ;)

    http://rapidshare.com/files/285235053/smashnatotxt2.png.html

  59. brtkr Says:

    Hello,
    It’s very impozing. I’ll try it if I have more time.
    See my tutorial for beginners here:
    http://brtkr.extra.hu/articles.php?article_id=61

  60. abdullah Says:

    شات
    دردشه
    فيديو
    توبيكات
    العاب
    منتدى
    منتديات

  61. ZURG Says:

    FOR A VIDEO EXPLANATION OF THIS TUTORIAL GO HERE:

  62. Magmatrix Says:

    Can effects like this be scripted in Inkscape? I.e. can i write a script or macro which i can execute on any text? I was thinking something like script-fu in Gimp…

Leave a Reply