(1) (2) (3)
STEP 4
Now that my button states are set I can apply them to my other buttons. The
quickest way to do this is to create a new style based on the 'layer styles'
I just created for 'Button 1' and then save them. I go to my 'Styles' palette,
click the little arrow and click - New Style. I give it a name - Rollover
Style 1 - making sure the three boxes are checked and click OK.
Now I go back and select 'Layer 2' (the white rectangle
for Button 2) in my 'Layer' palette. I then select the style
I just saved and drag it on to the 'Layer 2.' Button 2 now has
an 'Over' state and a 'Down' state. I repeat this procedure for
my two remaining buttons. Now all 4 buttons have the same style
effects for the 'Over' and 'Down' states.
 |
|
Apply saved style to other 3 buttons
|
STEP 5
The final step in creating rollover buttons is to add some navigation functionality.
I start with 'Button 1' in the 'Rollover' palette by selecting slice '03' from
the drop down menu. I select my 'Down' state button and then I click the 'Slice'
tab on top of the palette. As you can see from the palette the text field choices
are fairly standard. You can enter a URL or use a Target. There are also other
options you should be familiar with by now. I then give URL's for the other
buttons.
 |
|
Slice Palette is where to add navigation functionality
|
Once I completed this phase I preview the rollovers
in a browser - File - Preview In - and click a browser. Testing
rollover effects is always a good idea. Now I go - File - Update
HTML - and resave the document in HTML. The file is now ready
to be imported into any html document.
STEP 6
Fortunately Photoshop makes this process painless. If you look at the resulting
HTML code Photoshop adds Image Ready comments denoting the beginning and
ending of the sections of code you must copy and paste into a new html document.
The first section is the 'Javascript' which is contained in these comments:
<!--ImageReady Preload
Script (Buttons.psd) -->
JavaScript coding
<!-- End Preload Script
-->
The next section is not contained in comments and
should be placed in the BODY tag:
onLoad="preloadImages();"
The final section is the code for the table containing
the rollover images:
<!-- ImageReady Slices
(Buttons.psd) -->
Table code
<!-- End ImageReady Slices
-->
That's all there is to it gringos.
(1) (2) (3)
