shattered / smashed text tutorial
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 
Firstly, type your string as text.
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.)
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.
now, select both the wedge and the text, and duplicate these items…
(do not deselect them after duplication)
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)
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:
repeat this process on the black text for a number of different wedges…
and you will end up with something like this…
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…
now, combine all these seperate paths together…
press CTRL+A to select all, then choose path>combine…
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…
and here is the finished version… (SVG is here)
May 22, 2007 at 3:38 pm
[...] EDIT: i have now done this tutorial… you can view it here [...]
May 24, 2007 at 2:45 pm
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?
May 24, 2007 at 2:49 pm
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…
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…
May 24, 2007 at 4:19 pm
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?) …
May 24, 2007 at 6:31 pm
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…
May 24, 2007 at 10:30 pm
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 …
May 25, 2007 at 1:09 pm
I used Inkscape for nearly 6months before i discovered manual kerning, when i did though…
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
May 28, 2007 at 10:28 pm
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.
May 29, 2007 at 4:05 pm
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.
May 30, 2007 at 3:40 am
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…
May 30, 2007 at 8:21 am
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…
May 30, 2007 at 8:37 am
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!
May 31, 2007 at 2:28 am
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!
May 31, 2007 at 8:53 am
not a problem!
sorry for leading you in the wrong direction to begin with…
June 19, 2007 at 10:08 am
[...] view this tutorial [...]
June 28, 2007 at 3:22 am
She’s a beauty. Thanks!
July 22, 2007 at 6:47 pm
“Path > Difference” doesn’t work for me. When I choose it nothing happens. Why does Inkscape suck so much?
August 3, 2007 at 10:43 pm
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?
August 17, 2007 at 12:46 am
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.
October 22, 2007 at 12:33 pm
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!
February 13, 2008 at 11:04 pm
[...] habe ich eben meine Headergrafik etwas aufgepeppt mit einem schönen Schriftzug. Dazu habe ich dieses Tutorial [...]
February 20, 2008 at 2:52 am
[...] Shattered text tutorial [...]
February 23, 2008 at 8:19 am
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.
February 26, 2008 at 2:40 am
Thank you. Was able to make this simple desktop using your tutorial. Thank you.
http://humanflight.deviantart.com/art/shattered-innocence-78399420
February 26, 2008 at 2:43 am
oops, just click my name to see the desktop.
March 12, 2008 at 2:51 pm
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.
March 13, 2008 at 12:57 am
Haha, never mind. Figured out where I was bring stupid. That’s what I get for trying out something new at 2:00am
March 14, 2008 at 11:16 pm
I like the font you’re using, can you reveal its name?
March 15, 2008 at 3:44 pm
how do you create the wedges?
March 16, 2008 at 2:37 am
how do you take the wedge out of the text?
March 16, 2008 at 10:36 pm
[...] Blog de Ryan lerch [...]
May 10, 2008 at 10:52 pm
c00c4070ddd1…
c00c4070ddd17fe5671b…