First, create a document with the dimensions 600x100. Grab your rectangle marquee tool and create a
smaller triangle that fits inside the dimensions:
Now, we're going to create our first button. Grab your marquee tool again and make a rectangle on the top
half of your white background image. Fill it with whatever color you want. Add this blending option:
Next, grab the font tool and pick out a font you want. Type "home" or whatever you want your main link to
be in the menu. Place it in the lower right corner of the button.
From here, we're going to keep adding buttons. Whenever you add a button, go back into blending options
and shift the inner shadow slighly to the right. Here's an example
Once you have a good base menu, we're going to save our "source" buttons which are the button images that
aren't rolled over. So go ahead and crop the buttons where you need to. Here's an example of how I
cropped mine. Make sure the entire white potion of the menu is underneath the button you cropped:
Save each button that you want to use. Now we're going to create what the images will be when they're
rolled over. First, go into the inner shadow blending option for your button. Change the color of it to
#1D1B1B. Do the same for the text as well. Now, we're going to add a small drop shadow to the button.
Instead of just simply adding it through a blending option, grab your rectangle marquee tool. Create a
small strip that's just skinnier than your button and set it underneath. Use this blending option:
Your rollover image should look like this:
This part is very vital, crop out your rollover image and make sure it's a direct clone of the original.
This is important because your image will look like it's moving when someone rolls over it.
Repeat these steps for how many ever images you want. Now we move onto the code.
We're using javascript, fortunately you don't need to know very much about it to get rollovers to work.
First grab this code and set it in the <head> of your HTML page.
Ok, if you're confused by the above script don't worry. All you have to do is remember the words inside
the parentheses where it says var inames = new Array('home'). And when you save your source images, they should be the same exact names: home.gif, bio.gif, gallery.gif etc...
Your img src code will look like this:
<img src="/home.gif" name="home" onMouseOver="over(0)" onMouseOut="out(0)">
<img src="/bio.gif" name="bio" onMouseOver="over(1)" onMouseOut="out(1)">
<img src="/gallery.gif" name="gallery" onMouseOver="over(2)" onMouseOut="out(2)">
<img src="/contact.gif" name="contact" onMouseOver="over(3)" onMouseOut="out(3)">
<img src="/about.gif" name="about" onMouseOver="over(4)" onMouseOut="out(4)">
Once you have everything laid out, you should be good to go. Here's an example of what it should look like: