Photoshop – Creating rollover button

photoshop rollover button
photoshop rollover button
1) Open a new document. Choose rectangular marquee and draw a rectangle. Fill that with any color and apply bevel and emboss.(See layer yellow).

2) Duplicate the layer and fill the selection with different color and apply bevel and emboss.(See layer green).

3) Make the yellow layer active.Choose the type tool and type your text.

4) Make the green layer active and type text.

5) Save the document and click on jump to Imageready icon imageready in the tool box.

photoshop rollover button

6) photoshop rollover buttonGo to the Rollover Pallet and click on the New roll over state icon.

photoshop rollover buttonThis should create what looks like a duplicate of the original image.


7) Click on the First frame and hide the green layer and button-yellow type layer. photoshop rollover button

8) photoshop rollover buttonClick on the second frame and show the green layer and button-yellow type layer.
9) Now under the File Menu, select “Save Optimized As…” and save the HTML file. ImageReady will automatically export the images into a folder called “Images.” Unless you want to do some tweaking, you’ll need to place this “Images” folder into the same directory on your Web site as the HTML file.

10) Now cut out of the automatically generated HTML file and place into the final HTML document you’ll be using for presentation on the Web.

Leave a Comment