1. Open Photoshop
  2. Create new image at 125 pix by 50 pix
  3. use the rounded rectangle tool to make a rectangle to take up most of the image:

 

  1. Create a new layer,
               layer>new or ctrl+shift+n
  2. Use the text tool to add text to the button:

  1. Select the first layer that contains the rectangle
  2. Use the slice tool and outline the rectangle:

 

  1. Convert to Image Ready (Click Image Ready Icon at bottom of toolbar)
  2. Once in Image ready, go to the layers box.
  3. You will see a small f icon at the bottom:

 

  1. Make sure the rectangle is selected as the layer your going to alter
  2. Click on the icon and choose bevel and emboss
  3. Now the rectangle has a 3D effect. In the box above the layer box, a bevel and emboss box shows up where you can change the way the bevel and emboss looks. In this same box there should be a tab that says Rollovers. Click this tab
  4. Select the different slices until the rectangle is surrounded in yellow again, like in Photoshop:

 

  1. At the bottom of the rollovers box, there is a picture of a mouse cursor with an asterisk above it:

 

  1. Click the icon to create a new rollover state.
  2. Make sure that the rollover state is an over state.
  3. Highlight the over state.
  4. Right above the rollover state there is a box with a tab called Styles:

 

  1. Use this to create what happens to the button when the mouse rolls over the button. The gray styles won’t change the color of the button, just the way it looks. I used the style in the last column, second row.
  2. Once you add this style to the rollover state, you can save your file, first as a Photoshop .PSD file. This you can keep as your original if you want to change it later.
  3. Next you have to save the image as optimized. This will make an html file, but also create a new folder in wherever you save it called images. This is where it saves the separate images for each state. In this case there are 2.
  4. Now you can open FrontPage.
  5. Insert the original image, as in the image folder, the one that does not have a rollover state.
  6. Highlight the image
  7. Click

                Format>Dynamic HTML effects

  1. Make the first box Mouse over, the second box Swap Picture, and the third box you click to select the picture that you swap.
  2. Go into the images folder where you saved your button, and find the image that has the over state.
  3. Now the button should be surrounded in blue.
  4. Preview the website and hover the mouse over the button, it should appear to pop out and have a shadow.