Start
by creating a rounded rectangle using rounded rectangle shape tool.
Duplicate
layer. Enable "subtract from shape area" at the top bar. Create two ellipses
using elliptical shape tool cutting the rounded rectangle shape from top
n bottom.
Double
click the layer to open layer style window. Apply settings as shown.
Select
the path using direct selectopn tool. Select convert point tool and click
on right and left most nodes.
Copy
layer style from the above shape layer and paste on rounded rectangle layer.
Type
navigation link over the button.
Double
click the layer to open layer style window. Apply settings as shown. This
will finish our first state of button which is called up.
This
will be our second state of button which is called over.
Duplicate the above shown layer. Press Ctrl+T. Scale down a bit. This will
be our third state that is called down.
Save
the file and switch to Imageready.
Create
guideline surrounding the button. Select slice tool and create a slice over
the button.
Open
web content palette if its not already open. Select the button slice in
this palette. Right click and select "Add Rollover Sate". This
will create a rollover state of the button.
Select
the over state in web content window. In layer window hide the rounded rectangle
layer and unhide the over shape layer that we created in steps above.
Again
select the button slice in this palette. Right click and select "Add
Rollover Sate". This will create another state of the button called
down.Select this down state in web content window. In layer window hide
the rounded rectangle layer and also the over shape layer. Unhide the transformed
scaled down button shape layer that we created in steps above.
Now
click preview in browser button at the bottom of the tool palette. Press
Ctrl+Alt+Shift+S to save an HTML file with all image slices.
Below
is the animated output to show how your 3 state button will work on rollover
as well as on button press.
