g
Printer Friendly Version

editor  
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.

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor