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

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Create a Web Banner in Adobe Illustrator CS2 - Draw a Rectangle and Fill it with a Gradient

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

Drawing and coloring in the Adobe Illustrator program is slightly different than other graphics programs. In the next few tutorials, I will show you how to create a web banner in the Illustrator program and you will learn some of the basic skills along the way. In this first tutorial, we will draw the rectangle for the banner and fill it will the color gradient of your choice.

1. Start a new project. Open the Illustrator program and choose New Document from the Welcome Screen. The New Document dialog box will appear. Because this project will be a web banner, we will use the RGB color mode and set the measurement units to pixels. Set the following values in the dialog box.

Artboard Setup
Size: Letter
Units: Pixels
Orientation: Portrait
Color Mode: RGB

Now you should see a white square with a black border. This is the Artboard where you will create your web banner. The white area outside the Artboard is the Scratch Area. You can use this area as a holding space for design elements that you are not ready to add to the finished project. When you save your image, the items in the Scratch Area will be stored also.

Rectangle Tool    Selection Tool
2. Draw the rectangle web banner. The standard size for a web banner is 468 pixels by 60 pixels. We are ready to draw our rectangle to that size. Click on the Rectangle Tool icon in the Toolbox and then click on the Artboard. The Rectangle dialog box will appear. Set the Width to 468 pixels and the Height to 60 pixels. If you need to reposition the new rectangle on to the Artboard, click on the Selection Tool icon in the Toolbox and then click and drag the rectangle onto the center of the Artboard. Finally on the Control Palette, set the Stroke to null.

3. Fill the rectangle with the gradient. We will add the colored background to the web banner. But instead of just a flat color, we will use a gradient. If you don't see the small squares at the corners of the rectangle, click on the rectangle again with the Selection Tool. This will make the rectangle "active" and ready to be worked on. You will find the Gradient and Swatches Palettes on the right side of the Workspace. If not, click on Window > Gradient and Window > Swatches in the Menu bar. In the Gradient Palette is a small arrow (upper left corner). Click on this arrow and then click on Show Options.

Before we can set the two base colors for your gradient, you need to access the Color Stops on this palette. Click on the bottom of the Gradient Palette and you will see three small shapes appear. These are the Color Stops for the gradient. The two on each end are the ones we will be using first. You might have also noticed that your rectangle has been filled with the default gray gradient.

4. Set the Color Stops. It's easy to change the colors of the gradient. Go to the Swatches Palette and choose the color you want to use as the darkest color in the gradient. Click on that color swatch and you will see a border appear around the swatch. Now, drag your mouse pointer to the Color Stop on the right of the Gradient Palette. When you see a small plus sign appear, you are in the correct spot. You can release the mouse button to set the color. Repeat this for your choice of color for the lighter side of the gradient and drag the color to the left Color Stop. If you would like the direction of the gradient reversed, just put the dark color at the left and the lighter color at the right.

5. Experiment with gradients. The default setting for the type of gradient is Linear. Change this to the Radial setting in the Type drop-down menu. You can refine the light and dark areas in the gradient by using the Slider (looks like a diamond) in the Gradient Palette. Click and drag the slider to the right or left and you will notice that the predominant colors in the Gradient will change. If you prefer, set the gradient type back to Linear and refine your gradient again. When you are happy with your banner background, save your image.

6. Save your image. From the Menu bar, click File > Save to open the Save As dialog box. Give your image file a name and use the default Adobe Illustrator (.AL) file format for Save as Type.

In the next tutorial, we will continue to build the web banner by adding images that have previously been created in Adobe PhotoshopR.

Adobe Illustrator Workspace Diagram

AdobeR product screen shot(s) reprinted with permission from Adobe Systems Incorporated. AdobeR, BridgeR, IllustratorR, PhotoshopR, PhotoshopR AlbumTM and FlashR are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Twitter Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Facebook Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to MySpace Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Digg Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Yahoo My Web Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Google Bookmarks Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient to Stumbleupon Add Create+a+Web+Banner+in+Adobe+Illustrator+CS2+%2D+Draw+a+Rectangle+and+Fill+it+with+a+Gradient 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 © 2018 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
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor