Make a Rounded Corner Banner for your Header div in Illustrator

    ●   Use the colors in your swatches to create a gradient and attach your banner to the header div.

Learn About:

Text and Font Gradients Effects

  •   This tutorial is part of a series:

  •   302-rounded-corners-header-ai.htm   •   81_CSS_text-size_Dw.htm ~ OR ~ 04-clipping-mask-text-ai.htm  •   251_animated_text_ps.htm 

  •   This tutorial is part of the Art Genre Project.

Other People's Work:

Here are examples of work inspired by this tutorial.



Step #1: Open a Blank Document in Adobe Illustrator ~

Open new blank document in Illustrator by going to: File > New or hit the keyboard shortcut: Cmd(⌘)+N or and open a new document 800 x 200 pixels with approximately these settings:

Step #2: Rounded Rectangle Tool ~

Select the Rounded Rectangle Tool which is behind the Rectangle Tool

Step #3: Draw a Box ~

… draw a Box on a new layer …

Step #4: Choose your Colors~

… choose another color from your Kuler Color selection by copying the HEX number …

Step #4: Radial Gradient ~

Now click the Gradient icon or hit the keyboard shortcut: Cmd(⌘)+F9 and select Radial as the Type.


Step #5: Choose your Gradient Color Stops ~

Now you can drag colors from the Swatches menu to fill your gradient.

Drag OFF any stops you don't need …

Step #6: Drag the Gradient ~

Drag the Gradient over to the rounded rectangle shape and drop it (if necessary).

Step #7: Adjust the Angle of the Gradient ~

Adjust the Angle of the gradient here:

Step #8: Drop Shadow ~

Select everything by hitting Cmd(⌘)+A and go to: Effect > Stylize > Drop Shadow

Try the other Effects Too! Experiment! Take a risk!

Step #9: Download and Install New Symbols ~

Download this zipped file: and open it in Illustrator …

open with illustrator

… then open the Symbols panel to view your new symbols.

curly brushes

Click on the Symbols Libraries Menu


… and save the Symbols as your name or whatever.

save brushes

Step #10: Create a New Layer~

  Create a New Layer, lock lock layer your others.


Step #11: Use your New Symbols ~

Locate the Symbols you saved by clicking on the Symbol Libraries Menu again, go down to User Defined - and open the custom symbols you created.

user defined symbols

Then drag a symbol onto the artboard onto your New Layer.

Step #12: Blending Mode ~

Click Transparency or go to: Window > Transparency

… and change the Blending Mode until you get something you like.

Also, experiment with lowering the Transparency (if necessary …)

Step #13: Save the Image as a .png ~

Then, go to: File > Save for Web … … and save the file as a .png format.

Step #14: Root Folder ~

Hit Save and put the file in the root folder of your project …

Step #15: Open your header Tag in CSS~

Open the CSS Styles panel (if necessary) by going to: Window > CSS Styles and Double-Click the body tag …

body tag

… select Background and attach the image.

Step #16: Background Position ~

Set Background-repeat to no-repeat

… set Background-position (X) to center

… and set Background-position (Y) to top or center.

Step #17: Background Size ~

Lastly, open styles.css by Double-Clicking your styles sheet.


Step #18: Header Tag ~

Locate your #header tag. This is where you'll paste your code …

body tag code view

Step #19: Add Code ~

Copy the following code …

background-size: contain;

… and paste it in your header tag:

Last Step: Save and Upload your site ~

Click on your root level folder and upload your site.


Attach the link.

If you want to create an animated banner, begin this: 251_animated_text_ps.htm

If you DON'T want animation, begin: 81_CSS_text-size_Dw.htm

Other Resources and Color Function and Web Safe Palette