Adobe Illustrator CS2 – Adding Text to an Illustrator Web Banner Project

Project Information-- • Skill level-Beginner • Adobe^R Illustrator ^R CS2

In the two previous tutorials, we worked on your web banner in Adobe^R Illustrator^R CS2. We first added the gradient background and then embedded images, previously created in Photoshop^R, 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

Adobe^R product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe^R, Photoshop^R, Photoshop^R Album^TM, Illustrator^R, InDesign^R, GoLive^R, Acrobat^R, Cue^R, Bridge, Dreamweaver^R, Flash^R, Fireworks^R, Contribute^TM and FlashPaper^TM are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.