• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 5. Building a Web Site > Creating layer-based rollover buttons

Creating layer-based rollover buttons

In the Layers palette, select the home shape layer, and then choose Create Layer-Based Rollover from the Web Content palette menu.

The image will be divided into four slices, one large slice above the button, one slice each to the left and right of the button, and one slice for the button itself. In the Web Content palette, you can see the Normal state for the button, plus a new rollover state.

About Slices and Slicing

In effect, slices are individual image segments patched together to look like a contiguous image. Slicing an image can help reduce the overall file size by selecting the best possible compression method for each segment of that image. Monotone images are best compressed in GIF format, while photo-realistic images look better when compressed in JPEG format. So, if you have a image containing both monotone areas as well as photo-realistic areas, you can have the best of both worlds by slicing the image accordingly and then selecting different compression options for each area, or slice.

Another good example for using slices can be seen at http://www.manneken.be where the banner image features some animation effects. However, most of the image remains static. Instead of producing a huge GIF animation of the entire image, it was sliced into static and dynamic areas. The overall file size (and therefore the download time) for the static image areas plus the GIF animations is as small as possible. With an image sliced like this, you can even assign different animation speeds to the individual animations. The animation for the smoke in the left half of the picture, for example, runs at a lower speed than the two animations on the right.

For now, the visual appearance settings for the home button in the Over state is identical to the Normal state. You will now modify the appearance of the button text in the Over state to create a rollover effect.

With the Over state of slice number 3 (the home button slice) selected in the Web Content palette, select the home text layer in the Layers palette. Choose Layer > Layer Style > Color Overlay.

In the Color Overlay panel of the Layer Style dialog box, click the colored rectangle next to the Color Blend Mode pop-up menu to bring up the Color Picker dialog box.

In the Color Picker dialog box, enter the RGB values of our Basics Blue color, R: 0, G: 181, B: 204. Click OK to close the Color Picker dialog box.

Back in the Layer Style dialog box, set the Opacity of the Color Overlay to 50%, then click OK to close the dialog box.

In the Layers palette, you will see that a layer effect has been added to the home text layer. The details relating to this layer effect can be shown or hidden by clicking the triangle next to the layer effects indicator. Double-clicking the layer effect icon would allow you to edit the effect in the Layer Style dialog box.

In the Web Content palette, select the Normal state of slice number 3. Note that in the Layers palette, the layer style of the home text layer disappears. Also, in the document window, the color of the home button text is again white, the chosen text color for the Normal state.

Select the Over state again in the Web Content palette to see the layer style added to the text layer in the Layers palette, and note the effect that this has on the text in the document.

Switching between the Normal and Over states changes whether or not the layer style is added to the text layer, and a rollover effect is created. To preview this effect in your Web browser, you should have a default browser specified

Choose File > Preview In > Edit Browser List. If the list is empty, you haven't selected a default browser yet. To do so, click Add in the Edit Browser List dialog box, and then navigate in the Preview in Other Browser dialog box to the folder containing your Web browser application. Select the Web browser application and click Open. You can add more than one Web browser application to the list. When done, select your preferred Web browser application in the Edit Browser List and click Set As Default, then click OK.

Type Ctrl-Alt-P / Command-Option-P to preview the Web banner in the default browser. Point to the home button to see the Over state, and move away again to see the Normal state. Switch back to ImageReady when done with previewing.

Create the over states for the other three buttons in the same way (steps 1 through 5). In the Color Picker dialog box, use RGB 193, 215, 47 for the Basics Green color overlay, RGB 255, 210, 0 for Basics Yellow, and RGB 247, 143, 30 for Basics Orange.

Select the Normal state in the Web Content palette, and then choose File > Edit in Photoshop, and save the document in Photoshop file format in the Lesson05 folder.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint