Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Building a Website with Photoshop and Dreamweaver (Part 1)

Building a Website with Photoshop and Dreamweaver (Part 1)

Browse Pages: << < 3  4  5  6  7  > >>

We are now ready to turn our slices into rollovers and test them

1. Choose the slice select tool from the tools palette.

image 1

2. Click on the link and the slice will become active.

image 2

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.

image 3

image 4

4. Remember we hid the layer styles earlier on? This is the time to show them.

Click the little eye icon and the layer style will be activated.

image 5

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 layer style 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.)

image 6

6. With the slice still selected, switch to the slice palette.

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.

image 7

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 doesn't 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.

image 8

8. Click on the rollover palette and add an over state.

image 9

9. Once again, show the effects. To the left you will see the layers palette, before and after.

image 10

image 11

10. And link 2 is ready to go.

image 12

11. Keep repeating until you have created the rollovers and added the url's for all the buttons.

Click to enlarge
Click to enlarge

12. To test your rollovers, click the rollover preview button in the toolbar. You should now be able to test your rollovers within Imageready.

Don't forget to click the preview off when you are finished.

image 14

image 15

In the next installment we are going to optimize and publish the webpage.



About the Author:

Click to Visit Author's Website

Colin Smith is a best-selling author, trainer, and award-winning new-media designer who has caused a stir in the design community with his stunning photorealistic illustrations composed entirely in Photoshop. He is founder of the world's most popular Photoshop resource site, PhotoshopCAFE.com, which boasts more than two million visitors.

With over 10 years of experience in the design industry, Colin was formerly Senior Editor and Art Director for VOICE magazine. He is a regular columnist for Photoshop User magazine, PlanetPhotoshop.com, and the official site of the National Association for Photoshop Professionals. He also contributes to a number of other graphic art publications and Web sites, such as Mac Design magazine, Web Designer magazine and Computer Arts Magazine.

Colin's graphic design work has been recognized with numerous awards, including the Guru awards at Photoshop World 2001 and 2002, for his work in both Illustration and Web Design. He's authored or co-authored more than ten books on Photoshop, including the best-selling How to Do Everything with Photoshop CS (McGraw-Hill/Osborne, 2003) and award-winning Photoshop Most Wanted: Effects and Design Tips (A Press/Friends Of Ed, 2002). Colin is also creator of the Photoshop Secrets Video training series (PhotoshopCD.com). He is in high demand across the United States as a lecturer, presenting his Photoshop techniques to Web designers and other graphics professionals across the nation.

Author's URL: Colin Smith
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 3  4  5  6  7  > >>
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Building a Website with Photoshop and Dreamweaver (Part 1)"

Captcha