- On a Layered Photoshop File (.psd) 160px W x 320 px Ht, design five buttons (place text on one layer): ABOUT AOIT; OUR STAFF; OUR CLASSES; OUR STUDENTS; OUR WORK.
- When you have designed the background and the lettering as you want them for your BASIC BUTTONS (the way the buttons will appear when the web page is opened) duplicate the text layer at least two times.
- Now design some variations on the Basic Buttons. You need to design the ROLLOVER BUTTONS (what the buttons will look like when mouse rolls over) and the SELECTED BUTTONS (what a button will look like when youre on the selected page and button is not an active link). The simplest choice would be to use different colors, but you could also apply Layer Styles, change the background, or change font formatting.
- Once youve decided on the design for Basic, Rollover and Selected buttons, set Guidelines in Photoshop to separate buttons. Then save your file as buttons.psd, make visible only the layers needed for Basic Buttons and switch to Edit in ImageReady.
- In ImageReady, turn on appropriate layers for Rollover Buttons and File > Save Optimized As > buttons2
- Then back in ImageReady, turn on appropriate layers for Selected Buttons and File > Save Optimized As > buttons3
- Open buttons.html in Browser version and also in TextEdit version. In the TextEdit version find the image tag for first button (probably either buttons_01.gif or buttons_02.gif)
in img tag add name=btn1
after the image remember to add a close anchor tag .