Things You'll Need:
- Web editor
-
Step 1
Open a new document that is size appropriate for your buttons. This can be the size of the website or the size of the button banner. Click on "File>New" and enter the size in the corresponding boxes.
-
Step 2
Create the first button as it will appear when it is not selected. Select the correct shape tool from the "Tools Palette" and draw the button. Then, select the "Type" tool and enter the text inside the button.
-
Step 3
Apply the desired effects to the button or text. Adobe has provided several ways for you to apply effects. To apply your own custom effects, select the layer from the "Layer" palette. Then, select the desired effect from the "FX" drop-down box that is located on the bottom of the "Layer" palette.
Photoshop CS3 provides preset web styles designed specifically for web buttons. If the "Styles" palette is not visible, select "Windows>Styles." From the "Styles" drop-down menu, select "Web Styles." Make sure the button layer is selected and choose the desired layer from the "Styles" palette. -
Step 4
Create the remaining buttons. Hold down "Control" to select the text and the button. Right-click inside the "Layer" palette and select "Duplicate Layer." Move the copied layers to the location of the next button. Change the text to the new button's name. Repeat this step to create all of the buttons.
-
Step 5
Slice the buttons. Select the "Slice" tool and draw a box around each button. Double-click on each button to add slice options. Make sure that the "Image" is selected in the "Slice Type" drop-down box. Enter a name that describes the button turned off, such as "[button]_off." Enter any information pertaining to the website in the remaining boxes.
-
Step 6
Select "File>Save for web. . ." Press the "Save" button. In the "Save Optimized As" dialogue box, select the location for your images. Create a new folder called "Off." If you entered information for the website, change the "Format" to "HTML and Images." Click "OK."
-
Step 7
Select "Windows>Layer Comp." Create a new layer comp by selecting the "Create New Layer Comp" button. Name it something that describes the current set of buttons such as "Off."
-
Step 8
Edit the buttons to apply the rollover state. Apply the styles, colors or effects to the current buttons. Create another layer comp and name it "On." Repeat Step 7 to save the buttons in a new folder called "On." Open the folder containing these buttons and rename them to reflect the "on" state.
-
Step 9
Create the rollover code in a web editor. Use Dreamweaver, another web editor or a text editor to create the rollover code. Here is the JavaScript code for the home button in this tutorial: <a href="index.html" onmouseover="home_off.src='images/on/home_on.jpg';" onmouseout="home_off.src='images/off/home_off.jpg';"> <img alt="home_off" name="home_off" src="images/off/home_off.jpg" width="130" height="47" class="style9" border="0"/></a>
