Summary:

Scribble Text in Illustrator

    ●   Learn to use the Appearance panel to modify effects applied to text.


Learn About:

Appearance Panel Stroke and Fill Graphic StylesEffects

  •   This tutorial is associated with the Don't Buy The Lie and Art Genre Projects.

Other People's Work:

Here are examples of work inspired by this tutorial.

example example example example scribble-text-example example example
example

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.

assets/dreamweaver/images/wire-frame2.png

If you have nothing, open a New Web Document in Illustrator …

web document

  … and make your document 800 x 200 px.

800 x 600


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 -

  •   For instance, if you want a text or font that looks Old, search for that at dafont.com.

OR

  •   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 …

download font


Step #3: Install the Font ~

Go to where you downloaded the font, open it, and double-click on the .tff file(s) …

ttf file

… when Font Book opens, click Install Font.

font book install


Step #4: Draw a Box with the Text Tool ~

Get the Type Tool or hit the keyboard shortcut letter (t) …

text tool

… draw a box.

Type some text you can use in your project …

 

Select your Font, Size and Colo r in the menu bar.


Step #5: Stroke and Fill Off ~

With the text selected, take off Stroke and Fill.

fill-off-stroke-off.png

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 selection tool

selection tool

… and click somewhere on the text.

blank text


Step #7: Appearance Panel ~

With the blank text still selected, click the Appearance panel appearance panel small or go to: Window > Appearance

appearance

… and click Add New Fill.

add new fill

Set your New Fill color to something that matches your project needs.


Step #8: Effects ~

With the fill in the Appearance panel selected, click on Add New Effect

add new effect

… and go to: Stylize > Scribble.

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 4


Step #10: Stroke Options ~

Next, select the Stroke option in the Appearance panel …

stroke appearance scribble

… and add some stroke to the text - again, any color that creates the maximum contrast of your text.

Step 5


Step #11: Roughen the Stroke ~

With Stroke still selected in the Appearance panel, go to: Effect > Distort & Transform > Roughen.

effect distort and 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 6


Step #12: Drop Shadow ~

Also apply Blending Options by going to: Effect > Stylize > Drop Shadow and apply it …

blending options


{OPTIONAL} Step #14: Save the File in your Web Page Folder~

ONLY 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.

save the image


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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Hopefully it looks something like this:

image

(View the Presentation insert_graphic_web_page 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

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


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/