|
To create the rollover effect in html you must have at least two sets of images (one for the Up state of the button and one for the Over state of the button). So if you want that in your layout the text of the buttons to change when you place the mouse over it you must create two different text layers for each button.
Open the index.psd file located in template/psd (Note: if the opened file has the slices visible just press Ctrl+H to hide them):
Go to the Layers palette and look into the "Buttons" layers group. You'll see the 4 text layers for the 4 buttons (Home, Services, Partners & Contacts) and 4 hidden layers for the over state of the 4 buttons (marked below). We have already created the layers but in this tutorial you'll delete them and recreate them.
To clearly see the difference between the two kind of layers make the "home over" layer visible and hide the "home" layer for example. Now the text color is a dark orange. This is the way the home button will look when you'll place the mouse over it.
Now let's delete the 4 hidden layers (the layers for the over state). Select each layer and click on the Delete layer icon from Layers palette or drag the layer over this icon to delete it.
After deleting the over state text layers the Layers palette should look like in the image below. As you can see we have 4 text layers for the 4 buttons.
|
