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.

scribble-text-example

Step #1: Open Your Project in Illustrator ~

Open YOUR CURRENT PROJECT in Illustrator

… if it's the Magazine Cover, open it …

Click to view the project database

Click to view the project database

 

… if you're working on the Movie Poster Project, open that …

 

Comic Book Project

Click to view the project database

 

… (Remember: all these tutorials are intended to be applied to YOUR PROJECT) …


… whatever project you're working on, create a New Layer, and lock lock your other layers.




 If you don't have an Illustrator project, go to: File > New ... open a new document.



 


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 …


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

Don't worry if the text disappears, you will add a Stroke a Fill in the Appearance panel later.


Step #6: Change your Tool ~

Get the Selection Tool or hit the keyboard shortcut letter (v) …

… and click somewhere on the text.


Step #7: Appearance Panel ~

With the blank text still selected, click the Appearance panel appearance panel small or go to: Window > 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.


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 …

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

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: 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~

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/