Create An Editable Stitched Label Type Treatment
Tutorials | February 18th, 2010
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!
wow!
great one ♥
hello IVAN.
I love your avatar. What is mean this arabic text on the avatar pictures.
God name?
No ermanil
It is his name and it isn’t Arabic. Because I see a letter “V” in there. And in Arabic there is no letter “V” just letter “F”.
maybe it is farsi.
NO it’s Arabic
because if we want to translate any English word which contain a ‘V’ Character to that one in Arabic
Let me answer this Q
it is IVAN but in arabic Language
regards
it`s the Arabic word for ivan
nice tutorial
That’s cool! I just skimmed through it and there seems to be a lot more gradient than I thought but hey, it look good. Thanks!
Great tut! Very useful, as I’m more Photoshop guy.
Awsome! Thanks Rype!
Very detail and useful for someone who is new to Illustrator like me. Thanks Ryan!
awesome tutorial, thanks.
Brilliant tutorial! The best in this technique is that it’s editable…
Thanks for sharing!
you did excellent job in this beautiful tutorial.
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.
thanks,it’s verydoog.
thank you for
awesome tutorial, I love the possibilities with this technique
Excellent tutorial!
Great work.
Great tutorial. Thanks. Shouldn’t it be “create AN editable stitched…”?
Dang it! Thanks for catching my horrible grammar.
You wtire some awesome text effect tutorials, where did you learned this stuff? where do you take inspiration for it?
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
Great tutorial. Very straight forward & thorough. This works in CS3 as well with only a few small differences in the UI of the effects panel.
again a great tutorial. thanks for sharing.
Super!!!!!!!!
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!
You LOVE the appearance panel, don’t you? Haha, great tutorial though – awesome final result! Thanks!
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!
wow the results look fantastic!
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!!
I wanted to learn how to create this in Illustrator from a long time. You’ve made my day. This is perfect for a beginner like me. Thanks a lot
that is so cool! on my imac it actually looks like a real stitched patch! many thanks in sharing such a great resource.
amazing one…thanks a lot…
I like the stitched look, it adds some depth. I might incorporate it into a logo I’m working on.
Fantastic. Thanks so much. =)
that’s crazy good!
the third example on the final image section could be better if you’ve applied efects>pathfinder>add to the dashed stroke inside the text.
The overall effect is really nice!
Awesome tutorial! And i love the fact that storing the settings in a graphic style makes applying it a snap! really super useful, thanks
This is great
Excelent!! simple and easy to edith. Thanks for this tip
¡¡¡EXELENTE TUTORIAL MUY AGRADECIDO!!!!!…
Good stuff……
such a great tutorial! thanks
A great example of how to use appearance. Well done, very useful.
Awesome dude!
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!
Thank you so much for the great tutorial and the clear and easy explanation
Awesome!! I can follow every steps and make my final badge without any exp with Ai. Thanks a lot.
Lovely tutorial ! Thanks for teaching ~
Hey Guys, i would like to say thank you about this great post, very helpful to me, Thank You.
Great tuts, can you tell me whats the name of the font in the final image – third down above the house…
The font is Susa
Thank you!
Hi Rype, i want to know the name of typography of the last example (is only a “V”) appreciate if you can help me.
The font is called Candy Script from Sudtupos.
OMG!!! thanks a lot
This is so damn crazy graphics, man you’ve made my day.
Thank you
i love it…
really make it all simple!
great work!
WOW. Great tutorial! Really!
Thank you! I’ve been looking for a tut for this for a minute now. Here’s what my turned out like. http://bit.ly/9SsGCF
greeeat tutorial, I loved it.
great tuts, thank’s
This is a brilliant and very helpful tutorial! Thanks so much for sharing!
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!
Love this tutorial! Just wondering, what is the font you used for the “V” on the last image.
!!!
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!
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…
i love this Tutorial it’s very useful ,, thanks alot