g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Kidney Disease
Today in History
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Adobe Illustrator CS2 Adding Text to an Illustrator Web Banner Project

Project Information-- Skill level-Beginner AdobeR Illustrator R CS2

In the two previous tutorials, we worked on your web banner in AdobeR IllustratorR CS2. We first added the gradient background and then embedded images, previously created in PhotoshopR, to the banner. Now we will add some text to the banner. You might want this to be your company name, tag line or both. Open you banner image into Illustrator and let's get started.

Text Tool
1. Align your text. From the Toolbox, click on the Text Tool icon. Some of you will want to center your text on the banner and some will prefer the text to align to the left. On the Control Palette, click on the Paragraph link to open the Paragraph Palette. You will see the alignment choices across the top of the palette. Click on the one of your choice. Also at the left edge of the Control Palette, you will want to set the Fill color to that of your choice and the Stroke to null.

2. Type you text. Now click in the center of the banner and a little above the lower edge. If you are aligning your text from the left, click at the left and just above the lower edge. Type your text and you will notice that it is in the default font size of 12. That's OK for now.

3. Format your text. To select the text, triple click on it. From the Control Palette, click on the Character link to open the Character Palette. Use the drop-down menus to format your text as you prefer.

Direct Selection Tool
4. Add a drop shadow. Our text will stand out better on top of the gradient background if we add a drop shadow to the text. While the text is still selected, click on the Direct Selection Tool icon in the Toolbox. You will notice a small blue line appears under the text. From the Menu Bar, click Effect > Stylize > Drop Shadow to open the Drop Shadow dialog box. Click the Preview checkbox to activate the preview. Now experiment with the settings in the dialog box to find the best look for your text and click OK. Notice that the selection box indicates the drop shadow expands outside the measurements of the banner. But the Blur was only set to 2 pixels so we can easily fix that by repositioning the text.

5. Reposition the text. While the text is still selected and using the Direct Selection Tool again, click on the text and drag the selection box into the perfect position on the banner. You can also use the direction arrows on your keyboard. Click on the Scratch Area to deselect the text.

6. Save your changes. From the Menu Bar, click File > Save to save your changes to your web banner image.

In the next tutorial, we will optimize your banner for the web.

Adobe Illustrator Workspace Diagram

AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, PhotoshopR, PhotoshopR AlbumTM, IllustratorR, InDesignR, GoLiveR, AcrobatR, CueR, Bridge, DreamweaverR, FlashR, FireworksR, ContributeTM and FlashPaperTM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Twitter Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Facebook Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to MySpace Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Del.icio.us Digg Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Yahoo My Web Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Google Bookmarks Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Stumbleupon Add Adobe+Illustrator+CS2+%96+Adding+Text+to+an+Illustrator+Web+Banner+Project to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Moodboards for Web Designers lynda.com

Fixed Layout eBook Options

Calendar Wizard for InDesign

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor