Building a website with Photoshop and Dreamweaver: Part 5 Testing rollovers
We are now ready to turn our slices into rollovers and test them.
INGREDIENTS
by Colin Smith
1. Preparing the background
2. Adding the design elements
3. Preparing rollovers with
Layer Styles
4. Slicing in *Imageready
5. Rollovers in *Imageready
6. Optimizing and publishing
7. Bringing it into *Dreamweaver
8. Turning the page into
a website
PART 5
We
are now ready to turn our slices into rollovers and test them
1. Preparing the background *Photoshop 6
2. Adding the design elements
to the page *Photoshop
6
3. Preparing rollovers with
Layer Styles *Photoshop
6
4. Slicing in *Imageready 3
5. Rollovers in *Imageready
3
6. Optimizing and publishing *Imageready
3
7. Bringing it into *Dreamweaver
4
8. Turning the page into
a website *Dreamweaver 4
1
Choose the slice select tool from the tools palette.
2
Click on the link and the slice will become active.
3
Open
the rollover palette.
Click the new state button and an "over state" will appear.
This is the action that will happen when the mouse rolls over the button.
4
Remember we hid the layer styles earlier on? This is the time to show
them.
Click the little eye icon and the layerstyle will be activated.
5
Notice that the preview in the rollover palette also shows the style
attached, but only to the "over" state.
Rollovers in Imageready work like this:
Whatever the image looks like in any particular state is what will be
displayed. For example. If the layerstyle is activated only in the "over"
state, it will only appear when the mouse rolls over the slice.
Also you can show and hide things in other slices too and they will also
change, this is how to create remote rollovers.
(Please don't email me and ask how to do remote rollovers, I will cover
that in another tutorial at another date.)
6
With the slice still selected, switch to the slice pallette.
Enter a URL (The link you want to go to when you click the button) Here
I called it index.htm.
You are all done and the rollover will work when you export the page.
7
Select the next slice that will be a button.
Note: you can enter the slice url before you create the rollover of after, it doesnt really matter.
I called it link2.htm. Name it whatever you want the page to be called, but it must have a .htm or .html extension.
8
Click on the rollover palette and add an over state,
9
Once
again, show the effects. To the left you will see the layers palette,
before and after.
10
And link 2 is ready to go.
11
Keep repeating until you have created the rollovers and added the url's for all the buttons.
12
To test your rollovers, click the rollover preview button in the toolbar.
You should now be able to test your rollovers within Imageready.
Dont forget to click the preview off when you are finished.
See more on Rollovers here
In the next installment we are going to optimize and publish the webpage.
Enjoying this Tutorial?
Photoshop and Dreamweaver Integration
Learn how to build stunning web pages using Photoshop and Dreamweaver together. This step-by-step approach makes it so easy, that even beginners can produce great webpages. Covers the latest version of Photoshop (CS) and Dreamweaver (MX 2004).
Check out the DVD for easy to follow video, watch over Colin's shoulder as he builds a complete web site from scratch, explaining every step along the way. Ever wished you could sit in a professional design studio for a day and learn all the trick? This is your chance, only better!
For a more detailed approach See the book includes iframes, design theory, drop downs, liquid sites and no programming commerce. Perfect companion for the DVD!