intro

Summary:

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.

radial-gradient.png


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: ornament-symbols.ai 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

brush-libraries-menu-ai.png

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

3rd-new-layer.png


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.

open-styles-sheet.png


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.

upload-site-dw.png

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 http://juicystudio.com/services/colourcontrast.php and Color Function and Web Safe Palette