278 - Scribble Text in Illustrator ~-
✓ Appearance Panel
✓ Stroke and Fill
✓ Graphic Styles
• Learn to use the Appearance panel to modify effects applied to text.
• This tutorial is usually associated with the Art Genre Project.
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Open your Project in Illustrator ~
✓ If at all possible, use this tutorial in YOUR PROJECT - like your Wireframe, open that. You don't have use it, just try it. You can remove it later if you really don't like it.
✓ If you have nothing, open a New Web Document in Illustrator …
✓ … and make your document 800 x 200 px.
Step #2: Find a Font that Matches your Project ~
✓ Go to http://www.dafont.com/ and search for a font that fits your project theme -
• If you want something that looks like Money, search for that. Get it?
Step #2: Download the Font ~
✓ When you find a font that matches your project, Right-Click and save the file to your desktop, or somewhere you can find it …
Step #3: Install the Font ~
✓ Go to where you downloaded the font, open it, and double-click on the .tff file(s) …
✓ … when Font Book opens, click Install Font.
Step #4: Draw a Box with the Text Tool ~
✓ Get the Text Tool …
✓ … draw a box.
✓ Type some text you can use in your project …
✓ … highlight your text and select the font you installed.
Step #5: Stroke and Fill Off ~
✓ With the text selected, take off stroke and fill.
✓ Don't worry if the text disappears, you will add a Stroke a Fill in the Appearance panel later.
Step #6: Change your Tool ~
✓ For this next part to work, you must change your tool. The easiest way to do that is to hit the Seletion Tool …
✓ … and click somewhere on the text.
Step #7: Appearance Panel ~
✓ With the blank text still selected, click the Appearance panel …
✓ … and click Add New Fill.
Step #8: Effects ~
✓ With the fill in the Appearance panel selected, click on Add New Effect …
✓ … and go to: Stylize > Scribble.
Step #9: Scribble Options ~
✓ Adjust the Angle, Path Overlap Variation, Stroke Width, Curviness, Curviness Variation, Spacing, and the Spacing Variation to 1.5 to your preference.
Step #10: Stroke Options ~
✓ Select the Stroke option in the Appearance panel …
✓ … and add some stroke to the text.
Step #11: Roughen the Stroke ~
✓ With Stroke still selected in the Appearance panel, go to: Effect > Distort & Transform > Roughen.
✓ Choose your own settings In the Roughen dialogue box, change the Size, the Relative radial button, the Detail, etc., to give the stroke a little distress.
Step #12: New Graphic Style ~
✓ Select your font and open the Graphic Styles panel next to the Appearance panel. Press the New Graphic Style button to add your style Graphic Styles panel and you can use this same style font again and again.
Step #13: Drop Shadow ~
✓ Also apply Blending Options by going to: Effect > Stylize > Drop Shadow and apply it …
OPTIONAL Step #14: Save the File in your Web Page Folder~
✓ IF you are working on a header, banner, or background for your website, follow these next steps. Otherwise, skip to the last step.
✓ Then go to: File > Save for Web & Devices and save the document as png-24 format.
✓ Name the document: header.png - IN THE ROOT FOLDER OF YOUR PROJECT - again, make sure you save the file in your web page folder.
Step #15: Insert a Graphic into a Web Page ~
✓ A graphic is another example of an in-line element.
✓ The code that directs the browser to the location of the image looks something like this:
✓ Hopefully it looks something like this:
✓ (View the PowerPoint insert_graphic_web_page.ppt if you want for more information about images.)
Step #16: Center the Image ~
✓ Everyone wants to know how to center the image in their web site.
✓ Surround the image with <center> tags
Last Step: Save Your Project & Attach ~
✓ Go to: File > Save as … and save your work as an .ai file.
✓ Attach it and continue working …
Othere Resources: http://vectips.com/tutorials/turn-any-font-into-a-sketch-font/