First we will start with creating a new PS file, doesnt matter what size, but im just gonna use a small file, 100x100:
and for this, just create a simple box inside the 100x100 file.
Once you have done this, you will create some text inside of it.
Then you will create a duplicate layer of the button you made previously *Make sure that the second button is slightly darker, and is not visible since this will soon go to Image Ready*
As you can see in the image below, you will notice a bright color button, and a lighter color button. make sure that the darker color button is not visible. So click on the eye so that its not visible.
Once you have the basic images, click on the imageready button, and we will move on to the next step of the rollover.
Once you have image ready open, you will slice the button image:
Once you have sliced it, you will go up to WINDOW > WEB CONTENT, and another window will open:
As you notice, you will right click on the WEB CONTENT box, and a menu option will open up. You will scroll down and choose ADD ROLLOVER STATE.
Doing this will open up a duplicate image:
Now, the second duplicate image, you will click on the eye of the duplicate button.
Now, that this is done, you can look back and forth between the two buttons and notice that one is lighter, and the second one (the rollover state) is darker. Preview your image on IE, or Firefox, and notice that it works.
This can be done with just about anything really. Just as long as you follow these steps.
