Create An Editable Stitched Label Type Treatment

If you found the previous Letterpress, Sketchy, and Metal type treatment tutorials useful, then you are going to like this Stitched Label Type tutorial. Like the previous tutorials, this one relies heavily on the Appearance panel, making it easy to edit the text and apply the treatment to other fonts and vector elements.

Final Image

Below is the final type treatment we will be working towards.

Tutorial Detail

  • Program: Adobe Illustrator CS4
  • Difficulty: Intermediate
  • Topics Covered: Appearance panel, Effects, gradients
  • Estimated Completion Time: 15-20 minutes

Step 1

Create a new document and without the Type tool (T) and type out some text. Change the font to whatever you like. I suggest using something heavy like the Museo Slab 1000 font I am using.

Step 2

Before we start adding new fills and strokes from the Appearance panel, it is good to start with a clean slate. Select you text and take off any fill or stroke.

Step 3

From the pop-up menu of the Appearance panel, select New Fill. Keep the default black color for now, we will be changing it later on in the tutorial.

Step 4

Again, create another New Fill From the Appearance panel. Select the second fill in the Appearance panel and change the fill to a red color.

Step 5

Select the red fill in the Appearance panel then go Effect > Convert To Shape > Rounded Rectangle. When the Shape Options dialog opens select the Relative radial button and change the Extra Width and Extra Height to 18 px. These number might be higher or lower depending on the dimensions of you text.

Step 6

With the red fill selected in the Appearance panel, press the Duplicate Selected Item button at the bottom of the Appearance panel. Change the last red fill in the list to a gray color. With the gray fill still selected, go Effect > Path > Offset and change the Offset in the dialog to 5 px. Just like in the previous step this numerical values might change depending on the size of your text.

Step 7

Now that we have all the major shapes done, we can start by add some detail and stitching to the text. To start, select the first black fill in the Appearance panel. Change the fill to a liner gradient with the first color stop in the gradient white and the second color stop a light gray. From the Gradient panel change the Angle of the gradient to -90.

Step 8

With the text selected, choose New Stroke from the pop-up menu of the Appearance panel. Change the color of the stroke to gray, set the Weight to 1pt, check the Dashed Line checkbox, and input 2 pt in the first Dash filed of the Stroke panel. Next, go Effect > Path > Offset and change the Offset in the dialog to -2 px.

Step 9

Select the main white text linear gradient fill in the Appearance panel and press the Duplicate Selected Item button. Select the second white text gradient, fill it with a light gray and choose Multiply for the Blending Mode from the Transparency panel. Next go Effect > Distort & Transform > Transform. With the Transform dialog open, change the Vertical Move to -2 px.

Step 10

Select the red color fill from the Appearance panel and change it to a linear gradient. From the Gradient panel, change the first color stop to red, the second to dark red, and change the Location to -90.

Step 11

From the pop-up menu of the Appearance panel, choose New Stroke. Next, Go Effect > Convert to Shape > Rounded Rectangle, change the Extra Width and Height to 10 px, and change to Corner Radius to 5 px. Change the stroke to a light yellow color, change the weight to 1.5 pt, and change the Dashed Line value to 8 pt.

Step 12

With the yellow stroke selected, press the Duplicate Selected Item button in the Appearance panel. Make sure you have the second yellow stroke selected and go Effect > Distort & Transform > Transform. In the dialog, change the Vertical Move to -2 px. Next, change the stroke color to a light gray and set the Blending Mode to Multiply.

Step 13

Select the last fill in the Appearance panel list, change the fill to a linear gradient, change the first color stop a light gray, the second color stop to a gray color, and change the location of the gradient to -90 from the gradient panel. With the last fill still selected, go Effect > Stylize > Drop Shadow. In the Drop Shadow dialog, change the Opacity to 50, X Offset to 0, Y Offset to 5 px, and the Blur to 5 px.

Final Image

Now we have a nice stitched type treatment. Even better, it is fully editable! You can change the font or even apply it to other vector objects. I suggest creating a Graphic Style to make applying the treatment extremely easy. Simply select your text treatment and press the New Graphic Style button in the Graphic Styles panel. Below are some examples of different text and icons. Have fun!

These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Facebook
  • Mixx
  • TwitThis

149 thoughts on “Create An Editable Stitched Label Type Treatment

    • This is exactly what I have been looking for…

      Anyone know how to achieve a similar effect in Indesign, or failing that, a way to transfer the graphic ‘style’ across (of the stitched label text) from Illustrator to Indesign?

      I’m creating a childrens book, and I think this style would look great for section headers, but I don’t really want to jump back and forth too much between programs.

      thanks, any suggestions are welcome and appreciated.. oh, and great tutorial again :)

      btw I’m using CS5

  1. This is actually amazing. I am bookmarking this! I’ve been looking for a ‘stitching’ tutorial for bloomin’ ages – this doesn’t look *that* difficult either. :-)

    • Most of the time I have an idea in my head and try to create in the most efficient way possible in Illustrator. I get inspiration from popular type trends and sites like Behance.net, Flickr.com, and FFFFound.com

  2. I like this tutorial! I’ve been doing some “stitched” effects for a while, but yours look 3 dimensional – very much like a real patch. Thanks so much for sharing – hope to see more and more frequent tutorials of this quality!

  3. Great Rype! Thanks! May I suggest you to use a script, like the one called “Adjust Dashes (offset)” (google it!), in order to edit the dashed stroke? That would be more regular.
    Bye!

  4. Awesome tip! I love different type effects.

    If you wish, there are a ton of different types one can select and choose from over at http://www.pilo.me – I think it would be awesome to try this on various typefaces. Thanks again!!

  5. Awesome tutorial! And i love the fact that storing the settings in a graphic style makes applying it a snap! really super useful, thanks

  6. Great tutorial! Never thought of using the appearance panel this way.. I’m too much old school. “do it all yourself”. But I love to learn how to work more efficient!

  7. I’m not too experienced with Illustrator so this may be a silly question, but once I created this as a new graphic style, will it still be accessible through somewhere when I open a new Illustrator file?? Awesome tute!

  8. !!!

    That is genius. I’ve used the same technique (not as in-depth) for creating tackle twill and letterman jacket styles for text as well. I am in love with the transform tool when used on extra strokes etc. Yay!

  9. WOW!!! Amazing tutorial… i want to know the name of typography of the last example (is only a “V”) appreciate if someone can help me…

  10. Must say, you are the Jedi of appearances panel! I used to outline the text to get all sorts of effects, I feel so dumb now :D . There are so many text effect tuts for Photoshop but not enough for Illustrator.
    I also appreciate your attention to details, thank you so much and keep them coming!

  11. Best you could edit the blog subject title Create A Editable Stitched Label Type Treatment In Illustrator | Vectips to something more suited for your subject you make. I loved the post yet.

  12. Your tutorials are the best! I’ve been looking everywhere for tuts on Type effects and Illustrator…so happy to have stumbled across this. Just an hour or two on your site, and I feel comfortable with the Appearance panel. Thank you!

  13. Does anyone know which font he is using on the Final Example, the third font down ( the script/handwritten one. If anyone knows it would be greatly appreciated if you could tell me what the name is and where I can find it. Thanks!

  14. I’d appreciate any help, I cannot get the offset path to be active in my dropdown.

    For example, I try to offset the dashed stroke on the text, and I cannot get to the offset path because it is greyed out.

    I’m working with Illustrator CS4.

  15. i ment the font for the first picture, the retro looking type of V …it is the 5th down and opposite vectips and diagonally acroos of the speechbubble in the final images

    by the way this site is amazing ……..keep it up

  16. (sorry, didn’t mean to reply to a specific individual)

    This is exactly what I have been looking for…Anyone know how to achieve a similar effect in Indesign, or failing that, a way to transfer the graphic ‘style’ across (of the stitched label text) from Illustrator to Indesign?

    I’m creating a childrens book, and I think this style would look great for section headers, but I don’t really want to jump back and forth too much between programs.

    thanks, any suggestions are welcome and appreciated.. oh, and great tutorial again btw I’m using CS5

  17. Hi there,
    Thanks very much for this tutorial) I followed it all to a t, but stumbled at adding a gradient to the rectangle without losing my swatch colour…so I had to google it and found another tutorial,
    but after that I am stuck on adding the last stitch line to the rectangle. For some reason, it isn’t showing up at all…I applied the yellow colour, set the weight etc as instructed but nothing!? So I thought, ah, I must have to offset it in the effects>path..but no – nothing is working! And I was so looking forward to that final touch…do you have any ideas as to what I have done wrong?

  18. by the way – I forget to mention, at the top tool bar, there is a small triangle and when I hover over it it says
    ‘top most fill/stroke is not active, click here to make active’ but when I click the stitch does not become visible and nothing noticeable has changed..

  19. I’m having real trouble with this. On the step where you create the rounded rectangle.. nothing happens. I’ve tried it with a few other dimensions but nothing ever shows up. Can anyone help?

    • Make sure you have your text selected when you do this. A way to check this is by seeing if you have the preview option available in the shape options popup that you get after going to Effect>Convert To Shape>Rounded Rectangle.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>