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.


Step #1: Open Your Project in Illustrator ~

Open YOUR CURRENT PROJECT in Illustrator

… if it's the Shadow Life Project, 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.

 ONLY if you absolutely do not have an Illustrator project,
go to: File > New ... open a new document.


Step #2: Find a Font that Matches your Project ~

Go to 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


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


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