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.
✓ Text and Font ✓ Gradients ✓ Effects
• This tutorial is part of a series:
• 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: ornament-symbols.ai and open it in Illustrator …
✓ … then open the Symbols panel to view your new symbols.
✓ Click on the Symbols Libraries Menu…
✓ … and save the Symbols as your name or whatever.
Step #10: Create a New Layer~
✓ Create a New Layer, lock 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.
✓ 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 …)
✓ 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 …
✓ … 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 …
Step #19: Add Code ~
✓ Copy the following code …
✓ … 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 http://juicystudio.com/services/colourcontrast.php and Color Function and Web Safe Palette