How to distress or shatter type in Illustrator

shattered or distressed type

This is a good tip if you ever want to change type to invoke a mood. I wanted to give a bit of text a feeling of electricity and this is what I did.

First of all, in Illustrator, you must convert your type to outlines. Remember, after you have done this you can’t edit what’s written, so you better make sure you have spelled it correctly! To do this go Type > Create Outlines with it selected, or Cmd/ctrl-shift-O. Easy!

Next you need to draw diagonal lines across the text. Draw your first one at the top either with the Line Segment Tool(\) or the Pen Tool (P) and then, with the Selection Tool (V) and option held down, drag the whole line down to create your second line. Further lines can be draw with equal space in between by going Object > Transform > Transform Again, or Cmd/ctrl-D. (You may want to make you diagonal lines uneven for a more distressed effect, I just showed you this way because Illustrator’s Transform Again feature is incredibly cool!)

Now the clever part. With everything selected, type outlines and diagonal lines, click Divide in the Pathfinder palette.

Now, with the Direct Selection Tool (A), move the sections around until you’ve created something you’re happy with.

shattered or distressed type tutorial

Did you enjoy the article? If so, please share!

Download the free e-books "How to Market Yourself Online" & "Starting An Online Business"

How to get clients online and advice on starting up online!

  • Creating websites
  • Setting up WordPress
  • Writing blog posts
  • Getting links
  • Driving traffic to your site
  • Using social media
  • Getting clients
  • Getting found on Google
download icon
download button

Comments

  1. Sophie says:

    Thanks for a nice tutorial.
    I was looking for same to electrify my logo. :)

  2. Richard says:

    Hey wow, this looks like a really fantastic website, you have a really nice layout and great ideas.

    If you get a chance, feel free to drop by my blog

    http://hedgeagainstspeculation.com

    I also have monthly contests going on, so I would really appreciate it if you entered or donated :)

  3. Dallas Web Design says:

    That is a lot easier that I would have thought. Thanks for the awesome tut.

  4. window tinting courses says:

    You’ve made this look really easy – thank you. I’m going to try this with some of my graphics.

    I’m used to photoshop but still learning illustrator, your tips are helpful

    Thanks

  5. Warhammer Online says:

    You explained it nicely :) , but I am not sure I would use it.

  6. Anonymous says:

    that was real good tip i will try it 1 day

  7. Rob Cubbon says:

    Thank you, Webmaster blog, hope you got round to electrifying your logo.

    Thanks, Richard, not sure how many people from here who would be interested in donating to a blog about financial speculation but you never know!

    No problem, Dallas Web Design.

    Hope you enjoyed using this technique, window tinting courses.

    Thank you Warhammer Online and Anonymous.

  8. Hamjam says:

    Thanks for the tip, I just used this to make a vehicle wrap. It can take an already distressed looking font and make it a lot more interesting and less stock.

Speak Your Mind

Notify me of followup comments via e-mail. You can also subscribe without commenting.