Rollover Buttons

1. Start by make a new document 150 x 75. Add a new layer (Shift+Ctrl+n), call it button and make a selection with the Rectangular Marquee Tool, fixed size 100 x 25. Fill the selection with the Linear Gradient Tool. In this example

I've used white as foreground colour and gray (#999999) as background colour. Drag the gradient from top to buttom.

image 1

2. Add a Bevel & Embross Layer Style, Layer > Layer Style > Beveled and Emboss, and set the size to 1. Click ok. Now we are finished making the normal state of the button.

image 2

3. Copy the button layer, call it button_own. Open the Bevel and Embross Layer style and change the direction to down. You should now have to layers with different layer styles.

image 3

4. Now turn of the visibility by clicking on the eye to the left of the button_down layer. Go to File > Save for Web and save the image.

Do the same once more with the button_down layer visible. Remember to use different names on the two images.

image 4

5. The last thing we need do is to insert the two images into your homepage with Dreamweaver. Open Dreamweaver and go to Insert > Rollover Image.

In the new window click on the first Browse.. button (original image) and select the first image you made. And in the second one select the second image. Enter the URL and you are finished. I would recomend that you place the rollover button inside a table.


Close    To Top
  • Prev Article-Photoshop:
  • Next Article-Photoshop:
  • Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction