Create Custom Buttons in Illustrator and Dreamweaver
● Good navigation has animation, or "rollover" effects - in other words, your buttons DO SOMETHING when the mouse activates them.
✓ Kuler Colors✓ Rounded Rectangle Tool✓ Gradients ✓ Image Rollover Effects in Dreamweaver
Step #1: Open Illustrator ~
✓ Open a New Web Document in Illustrator and set your document size to approximately 150 px by 65 px.
Step #2: Make a Rectangle ~
✓ Get the Rounded Rectangle Tool …
✓ … set Stroke to none and pick a Fill color of your choosing …
✓ … and drag a rectangle box
Step #3: Swatches ~
✓ Open your Swatch color choices (if you haven't chosen your swatches, go here: 260_Kuler_Colors_Ai.htm) …
✓ … you will need to "tear off" Swatch panel and place it somewhere.
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: Adjust the Angle of the Gradient ~
✓ Adjust the Angle of the gradient here:
Step #7: Add UP Text ~
✓ Create a New Layer …
✓ … click on the Type Tool or hit the keyboard shortcut (t) …
✓ … drag a box and type your text.
Step #8: Select your Font ~
✓ Select your Font in the Character panel …
✓ … select Size here …
✓ … and Colo r in the menu bar.
Step #9: Save your work … ~
✓ Go to: File > Save as … and save the file as button-up.ai ...IN THE ROOT FOLDER OF THIS PROJECT.
✓ You will use this file over and over again, so be sure to save the file as .ai
Step #10: Save the Image as a .png ~
✓ Then go to: File > Save for Web … and change the document format as png-24 …
✓ … and save it as button_up.png in the ROOT FOLDER of your web page.
✓ That's right, save it twice! Once as a .ai and again as a .png
Step #11: Add RollOver Effects to the Text ~
✓ Then add some Stroke to the text.
✓ Also go to: Effects > Stylize > Drop Shadow …
✓ … and this is what it will look like when the mouse rolls over the button.
Step #12: Save it a 4th Time ~
✓ Go to: File > Save as … and save it as button_over.ai
✓ You saved the image 4 times: twice as an .ai file and twice as a .png file.
Step #13: Insert buttons in Dreamweaver ~
✓ Click inside your #nav div:
Step #14: Insert your Buttons using a Navigation Bar
✓ Go to: Insert > Image Objects > Rollover Image …
✓ In the "When clicked, Go to URL:" field, click on Browse and drill down to your web page folder where all your files should be kept. Select the appropriate page and be sure the link is correct.
✓ Hit OK and check out your Rollover! See if it works!
Last Step: Save and Upload your site ~
✓ If you have a web server, save your pages, upload them and attach the link.