Home Button

Summary:

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.


Learn About:

Kuler Colors Rounded Rectangle Tool Gradients Image Rollover Effects in Dreamweaver

  •   This tutorial is part of the Home Sweet Home Portfolio, What in the World?, and other Dreamweaver projects.

Other People's Work:

Here are examples of work inspired by this tutorial.






   



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

rounded Rectangle Tool

… set Stroke to none fill-color-none-ai.png 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

new layer

… click on the Type Tool or hit the keyboard shortcut (t) …

l

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

save as button up

You will use this file over and over again, so be sure to save the file as .ai

home button


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.

save as button up

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.

add stroke to text

Also go to: Effects > Stylize > Drop Shadow …

3 effects

… and this is what it will look like when the mouse rolls over the button.

drop shadow words


Step #12: Save it a 4th Time ~

Go to: File > Save as … and save it as button_over.ai

button over

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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Step #14: Insert your Buttons using a Navigation Bar

Go to: Insert > Image Objects > Rollover Image

x

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.

index

Hit OK and check out your Rollover! See if it works!

button rollover example


Last Step: Save and Upload your site ~

If you have a web server, save your pages, upload them and attach the link.

upload-site-dw.png