Step Two: Rollover it up.
[current materials] Photoshop (v 6.0). I am using the file imageready.psd .
----------------------------
In this lesson, you will learn how to use splices to create a rollover. A rollover is a little effect on webpage images; have you ever rolled the mouse over an image and seen it turn into another picture? That's what you are going to accomplish with ImageReady. Without ANY html or javascript knowledge what so ever. Excited? So am I!
We are still working with imageready.psd, so keep it open!
Step 1) The Rollovers
I have preset the images we are going to use in the rollover links in a folder in the Layers Palette called 'Buttons'. Select the little arrow thingie to drop it down.
I was thoughtful (modest, too! XD) and color coded the images for your reference.
The grey 'About', 'Art', and 'Link' are the buttons. You will not really be needing this images.
The pink 'About', 'Art', and 'Link' texts are what you are currently viewing in the document.
The yellow 'About', 'Art', and 'Link' texts are the rollover texts. For the fun of it, select the yellow 'About' and see what happens to the document.
[Feel free to use View>Hide Extras to hide the splice lines.]
Deselect the yellow 'About' now.
Step 2) The Rollover Pallete
[Go back and select 'View>Show Extras' to see them again]
Have the 'Rollover' Palette open (see aqua selected area). You will be creating the rollover through it. Now, select the first 'About' button -not the text- (the red selected area) and see what happens in the 'Rollover' pallete. Ta-da! ^_^ It appears there!
Step 3) Applying the Rollovers
Create a new document in the Rollover Palette. It should automatically be named 'Over'.
Make sure it's selected. At the same time, hit the yellow 'About', and DE-select the pink 'About' text. *drum roll* You've just applied a rollover!! Woo!! See, go back to 'Normal', and see how the text turns back to pink? ^_^
Step 4) Finish them!
Repeat Step 3 using the second and third buttons, selecting the 'Art' and 'Link' yellow text in conjunction. Easy, neh? ^_^
To see if it worked, go to File>Preview In>Your Browser Preference (I used IE).
Just roll your mouse over each button to see the text turn black. Neat, neh? ^_^ The coding on the bottom shows all the work you would have had to have done if you were a programmer doing this from scratch. *anime style collapse*
There's only one problem: the links don't work! ^_^ Silly, you have to apply them!
NEXT!>> Using Splices to Apply Links
----------------------------