logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Illustrator Spiral Tool

Witches Labels - Background Paper

Digital Crafts Business 2014

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor