Clipping Mask with Text in Illustrator
● Create a clipping mask with some text, add a stroke and drop shadow to create interesting text effects.
✓ Clipping Masks ✓ Layers ✓ Stroke
• This tutorial is part of a series:
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 …
… if you're working on the Movie Poster Project, open that …
✗ … 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.
Step #3: Type Tool ~
✓ Get the Type Tool or hit the keyboard shortcut letter (t) …
✓ … 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 …
✓ … and change the Size here:
Step #5: Clipping Mask ~
✓ Select both the background image and the text by Shift+Clicking each one (if necessary) …
✓ … 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 …
✓ … and click on the 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 ~
✓ Hit 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/