Clipping Mask with Text in Illustrator

    ●   Create a clipping mask with some text, add a stroke and drop shadow to create interesting text effects.

Learn About:

Clipping Masks Layers Stroke

  •   This tutorial is part of a series:

  •   302-rounded-corners-header-ai.htm   •   81_CSS_text-size_Dw.htm ~ OR ~ 04-clipping-mask-text-ai.htm  •   251_animated_text_ps.htm 

  •   This tutorial is part of the Make A Scene, What in the World and CD Cover 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 CD 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

… OR your PNG banner from this tutorial in Photoshop if you have it …

… OR … if you're making a banner, open a new document 800 x 200 pixels with approximately these settings:


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

Step #2: Find an Image ~

Find an image online that matches the look of your project, for instance, a sunset, a beach, a collage of pictures, anything you find with a lot of deep colors that matches your color scheme, copy it and paste it on your new layer in Illustrator.

Create creative desktop wallpaper for your desktop in Adobe Photoshop CS3

Step #3: Type Tool ~

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

type tool

… draw a box and type some text you can USE IN YOUR PROJECT, from your graphic organizer sketch.



… (Remember, the Rubrics for these projects say:

"1 headline (at least) with DIFFERENT text and font, smaller, but still prominent and inviting.
) …

Step #4: Font ~

Select your Font in the Character panel …


If you want, search for a font that matches your project theme at dafont.com.

If you need a reminder on installing fonts, refresh your memory from this tutorial = 31-blend-text-ai.htm

… and change the Size here:

Step #5: Clipping Mask ~

Select both the background image and the text by Shift+Clicking each one (if necessary) …

select both background and text

… and go to: Object » Clipping Mask » Make or hit the keyboard shortcut (Cmd (⌘) + 7).


The text is acting as a mask and you can see the image through the letters.

Step #6: Clipping Mask Group ~

In the Layers Palette (keyboard shortcut F7), open the layer that contains your text and background group …

group layers clipping mask

… and click on the text layer.

text layer

Step #7: Stroke ~

Now you can add Stroke to your text, adjust the color, size and anything else you want in the Menu Bar.

Step #8: Adjust the Background ~

Click on the image layer …


… and you can adjust the background (if necessary).

Step #9: Effects ~

Lastly click on the top layer again …

… go to: Effect » Stylize » Drop Shadow and adjust the settings to your own needs.

Try different stuff! Make something interesting!

Step #10: Create Outlines ~

Don't forget to Right-click the text and choose Create Outlines.

Last Steps: Save and Attach ~





STOP HERE - steps #10 thru #11 are ONLY if you are making a website. Otherwise, save your work as an .ai document now.


Step #11: Root Folder ~


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

Get Adobe Flash player

and put the file in the root folder of your project …

Step #12: Open your header Tag in CSS~

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the header tag:

Select Background and attach the image …

… set Background-repeat to no-repeat

… set Background-position (X) to center

… and set Background-position (Y) to top or center.

Last Step: Save your Project and Attach ~

Go to: File » Save as … and save your work as - FIRST_NAME_LAST_NAME_PROJECT_NAME.ai]

Upload your site and attach the link.

  •   ALWAYS save your projects like this:


  •   DO NOT name your project any other way - Improperly named projects will not receive credit and you will be sad.


  •   NEVER leave your work on the desktop or depend on a flash drive - instead, save your work in a folder you can find later - preferably on a virtual drive where it can be backed up.

Other Resources: http://wiki.biorust.com/tutorials/detail/134/en/