For distinguishing Point(s) of tutorial application between ImageReady versions 3.0 and 7.0 an (IR3) or an (IR7) have been added after the Numerical Point and before the text of that point, additionally Point(s) of version difference(s) are Numerically Identical so as to avoid confusion of pointed steps.



1. On the desktop create a folder called: ”Sleek”. In this folder create another folder called “ZPCS” (or: “ZYMIC”). In this ZPCS (or: ZYMIC) folder create another folder named “ZPCSRollover” (or: “ZYMICRollover”). The ZPCSRollover (or: ZYMICRollover) folder is where you are going to save your work. In the ZPCS (or: ZYMIC) folder you will create other folders to house this project. Close these folders and prepare to go to work in ImageReady.
2. Open ImageReady and select “New…” from the “File” in the Menu Bar. In the Image Size area of the New Document window that appears enter the pixel values of 155 for Width and 70 for Height. In the Contents of First Layer area select the “Transparent” option and press the OK button.
3. Change the foreground color to R 210, G 190, B 220 (a light purple). Fill the layer with this foreground color by using the keystroke of [Alt] + [Delete] and then press [F6] if the Styles palette is not already visible in the work area (the Styles palette has three tabs: Color, Swatches and Styles).
4. Select the Styles tab and then press the Maximize button to show the available styles. Select the “Rivet” style with a left-mouse click (you should be able to identify this rivet style by a mouse-over of the thumbnail images). Once the selection has been made and almost instantly your filled area becomes graphic. Minimize the Styles palette by clicking the Minimize button (use to be the Maximize button). Note: you may have to append the styles to utilize the styles used here. To append the styles available press the “circle with a triangle in it” (located below the Styles palette close button) and Select the “Glass Button Rollovers” selection and a window appears. Select “Append”, your styles list is updated. Continue the appending with the Glass Buttons, Image Effects, Text Effects and Textures.

5. Press [F7] once or twice to reveal the Layers palette in the work area and then select the Layers tab (the Layers palette has three tabs: Layers, History and Actions).

In the Layers palette Layer 1 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and then click the down-arrow to the right of “Smooth” and select “Chisel Soft” and then click anywhere in an open area of the workspace. This layers graphic is now updated to a 10 pixel wide bevel. Press the “Indicates Layer Effects” triangle again to close the drop-down list of layer effects.

6. Press the Maximize button in the Untitled-1 window.
7. Just to get up to speed, here’s the basics of the Tool Bar

8. Select the “Marquee Tool” and in the Options Bar use a “Fixed Size” Style with a Width of 125 and a Height of 25. (chances are that the use of any tool from the Tool Bar you’ll have options that are settable from the Options Bar, the Options Bar is pictured below)

9. Mouse over to the graphic on Layer 1 and left-mouse click to create a marquee area then Zoom-in at 400% to get better resolution for placement of the marquee. With the Marquee Tool still selected position the cursor anywhere inside of the marquee and left-mouse click & drag the (or use the keyboards mouse cursor keys: ↑←↓→) marquee to move it, centering the marquee in the lower half of the graphic, see below.

10. Create a new layer by pressing the “Create a new layer” button on the Layers palette. A new layer, Layer 2, is created and becomes active. Check to make sure the foreground color is R 210, G 190, B 220 (a light purple) and then fill the layer with this foreground color by using the keystroke of [Alt] + [Delete] and then press [F6] if the Styles palette is not already visible in the work area.
11. Select the Styles tab and then press the Maximize button to show the styles. Select the “Rivet” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button (use to be the Maximize button).
12. In the Layers palette Layer 2 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and then click the down-arrow to the right of “Smooth” and select “Chisel Soft”. This layers (Layer 2) graphic is now updated. Press the “Indicates layer effects” triangle again to close the drop-down list of layer effects.

13. De-select the marquee bounding by pressing the keystroke [Ctrl] + [D].
14. In a moment you are going to use another style of the Marquee Tool, the Elliptical Marquee Tool. Zoom-in to 800% and center in on Layer 2’s graphic because you are going to create another fill zone in the tiny rectangular area created when you sized the bevel down from 25 to 10.
15. Place the cursor over the Marquee Tool and left-mouse click & hold until the sub menu appears – when it does select the “Elliptical Marquee Tool”. In the Options Bar make sure the “Style” is Normal and then create the ellipse in the area.
16. Go to the Layers palette and create a new layer, Layer 3, and fill it using the [Alt] + [Delete] keystroke. Select the Move Tool from the Tool Bar and move the ellipse around until pretty much centered. Now, from Edit in the Main Menu select Transform and from the Transform Fly-Out Menu select Scale. Using the width grips of the bounding area fit the width of the ellipse to either end of the flat area. Using the height grips you want to be two lines down from the upper bevel and two lines up from the lower bevel. Using the width grips you want to be at the left edge of the left black from the left-side bevel (one line) and respectively equidistant from the right-side bevel. This may take a little manipulation to get it just right, but hey! this isn’t any ordinary HTML button you’re creating – it reeks of professionalism.
17. Now that the task is complete your graphic should look somewhat similar to this:

18. Select the Styles tab and then press the Maximize button to show the styles. Select the “Fire Glass” style with a left-mouse click (you should be able to identify this fire glass style by a mouse-over of the thumbnail images). Minimize the Styles palette by clicking the Minimize button.

19. De-select the bounding area with a [Ctrl] + [D] keystroke and then zoom to 100%. Looking pretty sharp.

20. Select the “Type Tool” and in the Options Bar use a “Eurostile” font (or similar, like: Waukegan LDO), Regular, 18 px, Crisp and select the Center text alignment (chances are that the use of any tool from the Tool Bar you’ll have options that are settable from the Options Bar).
21. Position the cursor in the center above the Layer 2 graphic and left-mouse click. A new active layer with a boxed in “T” appears above Layer 3 in the Layers palette. Enter the text “ZPCS” (or: “ZYMIC”) and then go to the Styles palette and select the “Fire Glass” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button. Zoom-in to 300% and select the Move Tool to re-position the ZPCS (or: ZYMIC) text to its final placement.

22. Select the “Flatten Image” from “Layer” in the Main Menu Bar. You’ll notice that all the layers you created are joined into one layer now, ZPCS (or: ZYMIC). This is the default (Normal) state of the rollover button you are creating; there are two more states to create; the mouse-over (Over) state and the mouse-click (Down) state.
23. Save your work in the ImageReady/Photoshop format of “Photoshop [*.psd]” with the filename of “but_zpcs_sleek_3st” (or “but_zymic_sleek_3st”) to the ZPCSRollover (or: ZYMICRollover) folder you created at Point 1.

The Over button will look pretty much the same as the Default button. The exceptions are that; the Layer 2 graphic created with an Inner Bevel Up will now have an Inner Bevel Down; the Style applied to Layer 3’s Fill (the light purple color) will not be Fire Glass, but rather Lime Green Glass. Are you ready, let’s rock!

24. Make sure the foreground color is R 210, G 190, B 220 (a light purple). Create a new layer and then fill the layer with this foreground color by using the keystroke of [Alt] + [Delete]. AH! It looks like you just painted over your work, doesn’t it? That’s okay – click the ”Indicates layer visibility” boxed-in eyeball on the Layer 1 layer, it’s still there. Click the ”Indicates layer visibility” boxed-in eyeball on the ZPCS (or: ZYMIC) layer and then click the ”Indicates layer visibility” empty box on the Layer 1 layer. Please make sure the Active layer is Layer 1 and it is visible at this time, thanks.
25. Press [F6] if the Styles palette is not already visible in the work area. Select the Styles tab and then press the Maximize button to show the styles. Select the “Rivet” style. Minimize the Styles palette by clicking the Minimize button.
26. In the Layers palette Layer 1 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and then click the down-arrow to the right of “Smooth” and select “Chisel Soft” and then click anywhere in an open area of the workspace. Press the “Indicates Layer Effects” triangle again to close the drop-down list of layer effects.

In creating a matching positional image of the Default button state for the Over button state a down and dirty guide or killer template sure would be handy instead of replication by relative positional coordinates… which I didn’t write down anywhere, did you?

27. Take a break, you know … get a refreshment, stretch your legs, maybe have an organic smoke (not one of them chemically altered over the-counter store bought smokes that cause second hand smoke(ing) related illnesses), I am.

Okay things are going to get manipulative here so that no image shift(ing) occurs during the actual operation of the javascript rollover button

28. Select the “Marquee Tool” (not the Elliptical Marquee Tool) and in the Options Bar use a “Fixed Size” Style with a Width of 125 and a Height of 25.
29. Mouse over to the graphic on Layer 1 and left-mouse click to create a marquee area then Zoom-in at 400% to get better resolution for placement of the marquee. With the Marquee Tool still selected position the cursor anywhere inside of the marquee and left-mouse click & drag the (or use the keyboards mouse cursor keys: ↑←↓→) marquee to move it, centering the marquee in the lower half of the graphic.

30. With Layer 1 still the Active layer in the Layers palette change the “Opacity” in the Layers palette Layer tab to 23%. Check for the ”Indicates layer visibility” boxed-in eyeball on the ZPCS (or: ZYMIC) layer and if it is not present then left-mouse click the ”Indicates layer visibility” for the boxed-in eyeball on the ZPCS (or: ZYMIC) layer – Do not make it Active.
31. Create a new layer by pressing the “Create a new layer” button on the Layers palette. A new layer, Layer 2, is created and becomes active. Check to make sure the foreground color is R 210, G 190, B 220 (a light purple) and then fill the layer with this foreground color by using the keystroke of [Alt] + [Delete] and then press [F6] if the Styles palette is not already visible in the work area.
32. Select the Styles tab and then press the Maximize button to show the styles. Select the “Rivet” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button (use to be the Maximize button).
33. In the Layers palette Layer 2 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and then click the down-arrow to the right of “Smooth” and select “Chisel Soft”. This layers (Layer 2) graphic is now updated. Press the “Indicates layer effects” triangle again to close the drop-down list of layer effects.
34. Toggle the ”Indicates layer visibility” boxed-in eyeball on the Layer 2 layer repeatedly, if the image appears to move you are not correctly aligned with the Default state. (If this misalignment occurs, use the “Edit” and undo the operations performed back to the point of “Undo Fill” and then “Undo Fill”. At this point with the Marquee Tool selected move again the bounding area to align, continue the process from the fill of Point 31 until it is aligned and no movement is detected)
35. Alignment is achieved or else you would not be at this point so de-select the marquee bounding by pressing the keystroke [Ctrl] + [D].
36. Make sure the Active layer is Layer 2 and select the “Type Tool”. In the Options Bar use a “Eurostile” font (or similar, like: Waukegan LDO), Regular, 18 px, Crisp and select the Center text alignment (chances are that the use of any tool from the Tool Bar you’ll have options that are settable from the Options Bar).
37. Position the cursor in the center above the Layer 2 graphic and left-mouse click. A new active layer with a boxed in “T” appears above Layer 3 in the Layers palette. Enter the text “ZPCS” (or: “ZYMIC”). You should notice that the ZPCS (or: ZYMIC) in the light purple is not centrally aligned with the Default Button state’s ZPCS (or: ZYMIC) Fire Glass, unless you got lucky.
38. Select the “Move Tool” and move the light purple text to align with the Default Button state’s ZPCS (or: ZYMIC).
39. Go to the Styles palette and select the “Fire Glass” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button.
40. Do the alignment toggle layers thing again with this text layer and when completed with alignment proceed.
41. Zoom-in to 800% and select the “Elliptical Marquee Tool”. In the Layers palette make Layer 2 the Active layer and in the Options Bar make sure the “Style” is Normal and then create the ellipse in the area as you did in Point 16.
42. Go to the Layers palette and create a new layer, Layer 3, and fill it using the [Alt] + [Delete] keystroke. Select the Move Tool from the Tool Bar and move the ellipse around until pretty much centered. Now, from Edit in the Main Menu select Transform and from the Transform Fly-Out Menu select Scale. Now, using the height and width grips of the bounding area fit the height and width of the ellipse to either end of the flat area as accomplished earlier (Point 16). To check the alignment do the toggle thing with Layer 3, have Layer 2 and Layer 1 visibility unchecked – if misarranged move or transform as necessary.
43. Select the Styles tab and then press the Maximize button to show the styles. Select the “Lime Green Glass” style with a left-mouse click (you should be able to identify this lime green glass style by a mouse-over of the thumbnail images). Minimize the Styles palette by clicking the Minimize button. When complete make all layers visible. Zoom-in to 100%.
44. De-select the marquee bounding by pressing the keystroke [Ctrl] + [D].
45. Select Layer 1 to be the Active layer now and reset the “Opacity” to 100%.
46. Turn off the visibility for (hide) the ZPCS (or: ZYMIC) layer (the Default Button’s state) and make Layer 2 the Active layer.
47. In the Layers palette Layer 2 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change it from “Up” to “Down” using the radial check buttons and this layers (Layer 2) graphic is now updated. Press the “Indicates layer effects” triangle again to close the drop-down list of layer effects. The graphics should be similar to this button pictured.

48. (IR3) From the Main Menu Bar click “Window” and select “Show Rollover” (if it reads “Hide Rollover” then it is already viewable in the work area). For some odd reason this palette never got a name but it has four palettes attached to it, the Tab headings are Animation, Rollover, Image Map and Slice. Maximize the palette, if it is not already and with Rollover the Active palette there should be an image labeled “Normal”.

48. (IR7) From the Main Menu Bar click “Window” and select “Rollovers” (if it is already “Checked” then it is already viewable in the work area). The Tab headings are Rollovers, Color Table and Layer Options. Maximize the palette, if it is not already and with Rollovers the Active palette there should be an image labeled “Normal”.

49. Okay, now for sure the Default Button state ZPCS (or: ZYMIC) layer is hidden. Make the Text layer “ZPCS” (or: “ZYMIC”) the Active layer.
50. Use the keystroke of [Ctrl] + [Shift] + [E] to merge visible layers. Save your work and do not close the file at this time (just in case you were contemplating it). This graphic is going to be the Over image of the rollover button you have been creating.
51. (IR3) On the Rollover palette select the “Creates new rollover state” icon and a new image appears with the heading “Over” and is the Active State for editing. Look at the Layers palette and notice that the Lime Green Glass ZPCS (or: ZYMIC) is visible only. Click the “Normal” image in the Rollover palette and in the Layers palette hide the “Lime Green Glass ZPCS” (or: “Lime Green Glass ZYMIC”) and make visible the “Fire Glass ZPCS” (or: “Fire Glass ZYMIC”). You may have noticed that the graphic updated on the display screen to reflect your choice.

(IR3 con’t.) You may want to exercise what you got so far to see if it is appears fine. Press the “Preview the behavior of rollovers” icon in the Rollover palette (it’s the Play button looking icon) and then mouse around and over your display graphic, of course no mouse click yet. When you are done with your check: Please remember to click the “Preview the behavior of rollovers” icon to stop this operation … ‘cause strange things happen otherwise.
51. (IR7) On the Rollovers palette select the “Create rollover state” icon and two new images appear with the headings “but_zymic_sleek_3st_01“ and “Over State” and the “Over State” is the Active State for editing. Look at the Layers palette and notice that the Lime Green Glass ZPCS (or: ZYMIC) is visible only. Click the “Normal” image in the Rollovers palette and in the Layers palette hide the “Lime Green Glass ZPCS” (or: “Lime Green Glass ZYMIC”) and make visible the “Fire Glass ZPCS” (or: “Fire Glass ZYMIC”). Next, click the “Over State” image in the Rollovers palette and in the Layers palette hide the “Fire Glass ZPCS” (or: “Fire Glass ZYMIC”) and make visible the “Lime Green Glass ZPCS” (or: “Lime Green Glass ZYMIC”). You may have noticed that the graphic updated on the display screen to reflect your choice.

(IR7 con’t.) You may want to exercise what you got so far to see if it is appears fine. Go to the Main Menu Bar and click “File” and mouse down to “Preview in ►” and select your preference of either “Internet Explorer” or the ”Other” with a left-mouse click. Soon your Browser choice opens and beholds the button. Preview the behavior of the rollover by mousing around and over your display graphic, of course no mouse click yet. When you are done with your check: Please remember to close your browser.
52. Minimize the Rollover palette and save your work.

The Down button will look pretty much the same as the Over button. The exceptions are that; the previous points Layer 1 graphics were created with an Inner Bevel Up this Layer 1 will have an Inner Bevel Down, the Style applied to Layer 3’s Fill (the light purple color) will not be Lime Green Glass, but rather Water Glass (what I call Blue Shimmer). The ZPCS (or: ZYMIC) text will be replaced with “Loading …” and will be Water Glass (what I call Blue Shimmer) instead of Fire Glass. Are you ready, let’s get rock’n again!

53. Make sure the foreground color is R 210, G 190, B 220 (a light purple). Create a new layer and then fill the layer with this foreground color by using the keystroke of [Alt] + [Delete]. Click the ”Indicates layer visibility” boxed-in eyeball on the Over Button state’s ZPCS (or: ZYMIC) layer. Please make sure the Active layer is Layer 1 and it is the only visible layer at this time, thanks.
54. Press [F6] if the Styles palette is not already visible in the work area. Select the Styles tab and then press the Maximize button to show the styles. Select the “Rivet” style. Minimize the Styles palette by clicking the Minimize button.
55. In the Layers palette Layer 1 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and select “Down” rather than “Up” and then click the down-arrow to the right of “Smooth” and select “Chisel Soft” then click anywhere in an open area of the workspace. Press the “Indicates Layer Effects” triangle again to close the drop-down list of layer effects.
Time to get the killer template.
56. Select the “Marquee Tool” (not the Elliptical Marquee Tool) and in the Options Bar use a “Fixed Size” Style with a Width of 125 and a Height of 25.
57. Mouse over to the graphic on Layer 1 and left-mouse click to create a marquee area then Zoom-in at 400% to get better resolution for placement of the marquee. With the Marquee Tool still selected position the cursor anywhere inside of the marquee and left-mouse click & drag the marquee to move it, centering the marquee in the lower half of the graphic.

58. With Layer 1 still the Active layer in the Layers palette change the “Opacity” in the Layers palette Layer tab to 23%. Click the ”Indicates layer visibility” boxed-in eyeball on either ZPCS (or: ZYMIC) layer – Do not make it Active.
59. Create a new layer by pressing the “Create a new layer” button on the Layer palette. A new layer, Layer 2, is created and becomes active. Check to make sure the foreground color is R 210, G 190, B 220 (a light purple) and then fill the layer with this foreground color by using the keystroke of [Alt] + [Delete] and then press [F6] if the Styles palette is not already visible in the work area.
60. Select the Styles tab and then press the Maximize button to show the styles. Select the “Rivet” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button (use to be the Maximize button).
61. In the Layers palette Layer 2 press the “Indicates layer effects” triangle and select the “Bevel and Emboss” effect with a double left-mouse click. Change the size value of 25 to be 10 and select “Down” rather than “Up” then click the down-arrow to the right of “Smooth” and select “Chisel Soft” and then click anywhere in an open area of the workspace. This layers (Layer 2) graphic is now updated. Press the “Indicates layer effects” triangle again to close the drop-down list of layer effects.
62. Toggle the ”Indicates layer visibility” eyeball on the Layer 2 layer repeatedly, if the image appears to move you are not correctly aligned with the Default state. (If this misalignment occurs, use the “Edit” and undo the operations performed back to the point of “Undo Fill” and then “Undo Fill”. At this point with the Marquee Tool selected move again the bounding area to align, continue the process from the fill of Point 59 until it is aligned and no movement is detected)
63. Alignment is achieved or else you would not be at this point so de-select the marquee bounding by pressing the keystroke [Ctrl] + [D].
64. Make sure the Active layer is Layer 2 and select the “Type Tool”. In the Options Bar use a “Eurostile” font (or similar, like: Waukegan LDO), Regular, 18 px, Crisp and select the Center text alignment (chances are that the use of any tool from the Tool Bar you’ll have options that are settable from the Options Bar).
65. Position the cursor in the center above the Layer 2 graphic and left-mouse click. A new active layer with a boxed in “T” appears above Layer 3 in the Layers palette. Enter the text “Loading …”. You should notice that the Loading … in the light purple is not center aligned with the ZPCS (or: ZYMIC) Fire Glass/Lime Green Glass height, unless you got lucky.
66. Select the “Move Tool” and move the light purple text to align with the ZPCS (or: ZYMIC) Fire Glass/Lime Green Glass height and centering.
67. Go to the Styles palette and select the “Water Glass (what I call Blue Shimmer)” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button. In the Layers palette “Loading …” layer press the “Indicates layer effects” triangle and select the “Drop Shadow” effect with a double left-mouse click. Change the “Opacity” from 75% to 0% and then click anywhere in an open area of the workspace and this layer is now updated. Press the “Indicates layer effects” triangle again to close the drop-down list of layer effects. The current display graphic should be similar to this button pictured.

68. Zoom-in to 800% and select the “Elliptical Marquee Tool”. In the Layers palette make Layer 2 the Active layer and in the Options Bar make sure the “Style” is Normal and then create the ellipse in the area.
69. Go to the Layers palette and create a new layer, Layer 3, and fill it using the [Alt] + [Delete] keystroke. Select the “Move Tool” and move the ellipse around until centered and then using the width grips of the bounding area fit the width of the ellipse to either end of the flat area as accomplished earlier. To check the alignment do the toggle thing with Layer 3, have Layer 2 and Layer 1 visibility unchecked – if misarranged move or transform as necessary (when completed with alignment have Layer 2 and Layer 1 visibility checked – The boxed-in eyeball visible).
70. Select the Styles tab and then press the Maximize button to show the styles. Select the “Water Glass (what I call Blue Shimmer)” style with a left-mouse click. Minimize the Styles palette by clicking the Minimize button. When complete make all layers visible except for the first two ZPCS (or: ZYMIC) (Default & Over Button states) layers that have already been processed, really now make sure they are hidden. Zoom-in to 100%.
71. De-select the marquee bounding by pressing the keystroke [Ctrl] + [D].
72. Select Layer 1 to be the Active layer now and reset the “Opacity” to 100%.
73. Maximize the Rollover palette. You’ll notice the images have changed since you’ve been working, that’s ok. Make the Text layer “Loading …” the Active layer.
74. Use the keystroke of [Ctrl] + [Shift] + [E] to merge visible layers. Save your work. This graphic is going to be the Down image of the rollover button you have been creating.
75. (IR3) On the Rollover palette select the “Creates new rollover state” icon and a new image appears with the heading “Down” and is the Active State for editing. Look at the Layers palette and notice that the Water Glass “Loading …” is visible only.
75. (IR7) On the Rollovers palette select the “Create rollover state” icon and a new image appears with the heading “Down State” and is the Active State for editing. Look at the Layers palette and notice that the Water Glass “Loading …” is visible only.
76. (IR3) Click the “Normal” image in the Rollover palette and in the Layers palette hide the “Loading …” layer and the “Lime Green Glass ZPCS” (or: “Lime Green Glass ZYMIC”) layer in the Layers palette and make visible only the Fire Glass “ZPCS” (or: “ZYMIC”) layer.
76. (IR7) Click the “Normal” image in the Rollovers palette and notice the Layers palette shows visible only the Fire Glass “ZPCS” (or: “ZYMIC”) layer.
77. (IR3) Click the “Over” image in the Rollover palette and in the Layers palette hide the “Loading …” layer and the Fire Glass “ZPCS” (or: “ZYMIC”) layer in the Layer palette and make visible only the Lime Green Glass “ZPCS” (or: “ZYMIC”) layer.
77. (IR7) Click the “Over State” image in the Rollovers palette and in the Layers palette hide the “Loading …” layer in the Layers palette and make visible only the Lime Green Glass “ZPCS” (or: “ZYMIC”) layer.

78. (IR3) Click the “Down” image in the Rollover palette and in the Layers palette make sure to hide the Fire Glass “ZPCS” (or: “ZYMIC”) layer and the Lime Green Glass “ZPCS” (or: “ZYMIC”) layer in the Layers palette and make visible only the “Loading …” layer.
You may want to exercise what you got so far to see if it is appears fine. Press the “Preview the behavior of rollovers” icon in the Rollover palette (it’s the Play button looking icon) and then mouse around, over and click your display graphic. When you are done with your check: Please remember to click the “Preview the behavior of rollovers” icon to stop this operation.
78. (IR7) Click the “Down State” image in the Rollovers palette and in the Layers palette make sure to hide the Fire Glass “ZPCS” (or: “ZYMIC”) layer and the Lime Green Glass “ZPCS” (or: “ZYMIC”) layer in the Layers palette and make visible only the “Loading …” layer. You may want to exercise what you got so far to see if it is appears fine. Go to the Main Menu Bar and click “File” and mouse down to “Preview in ►” and select your preference of either “Internet Explorer” or the ”Other” with a left-mouse click. Soon your Browser choice opens and beholds the button. Preview the behavior of the rollover by mousing around, and over and click your display graphic. When you are done with your check: Please remember to close your browser.
79. Save your work.
80. Press [F10] twice to view the Optimize palette (once if it is not present in the work area). In the “Settings:” select JPEG High and do not enable “Progressive”. Minimize the Optimization palette.
81. (IR3) Mouse right-click on the “Loading …” layer in the Layers palette and select “New Layer Based Image Map Area”. In the Rollover palette there is another tab: Image Map. Click on the “Image Map” tab; change the “Name:” to be “ZPCSImageMap_01” (or: “ZYMICImageMap_01”). In the “URL:” text entry field, enter the web address: “http://zpcs.uuuq.com” (or: “http://www.zymic.com”). In the “Target:” field (and using the down arrow to the right of the “Target:” entry field) select the “_parent” option from the drop-down list box. In the “Alt:” text entry field, enter “This is the button to go to the Halfwatt Illuminations (or: Zymic) home page”.
81. (IR7) Mouse left-click on the “Down State” image in the Rollovers palette and then go to the Layers palette and right-mouse click the “Loading …“ layer and select “New Layer Based Image Map Area”. In the Rollovers palette another image appears: ImageMap_01.

(IR7 con’t.) Press [F11] twice to view the Animation palette (once if it is not present in the work area). Click on the “Image Map” tab; change the “Name:” to be “ZPCSImageMap_01” (or: “ZYMICImageMap_01”). In the “URL:” text entry field, enter the web address: “http://zpcs.uuuq.com” (or: “http://www.zymic.com”). In the “Target:” field (and using the down arrow to the right of the “Target:” entry field) select the “_parent” option from the drop-down list box. In the “Alt:” text entry field, enter “This is the button to go to the Halfwatt Illuminations (or: Zymic) home page”.
82. In the next step you are going to “Save Optimized As”, this is not a “Save” and nor is it a “Save As” function you’re probably accustomed to in the computing world. So, let’s get on with it … shall we?
83. Choose “File” from the Main Menu Bar and from the drop-down list locate and select “Save Optimized As…”. Save this “but_zpcs_sleek_3st.html” (or: “but_zymic_sleek_3st.html”) file in the ZPCSRollover (or: ZYMICRollover) folder you’ve been saving your work to.
84. Save your work.
85. Time to check out the button as it would be on the internet, did I mention that by saving your work in this optimized manner that you just did you created a web page?
86. Minimize all open programs to the Windows Task Bar and open Internet Explorer 6 (or above), or, your favorite Browser. Select “Open….” From the “File” menu and “Browse…” to and open the “but_zpcs_sleek_3st.html” (or: “but_zymic_sleek_3st.html”) file in the “ZPCSRollover” (or: ZYMICRollover”) folder where you saved the optimized in Point 83. (It will be best if your Browser is set to allow active-x controls; this is a JavaScript button). Now this button will get you to a particular web address but don’t expect that web address to have a button there to get you back to this web page, you just created this web page. So to get back to this 3-State Rollover Button page you’ll have to use the Browser’s “Back” button. Thanks for the attention to detail, bye.


Of course, there are shorter ways to perform this creation of a 3-State Rollover Button, but, it is deemed necessary that a complete thorough fundamental process be given to aid the novice and help alleviate any problems encountered with shortcuts in creation.


Provided by: ZARDOZ Personal Computing Solutions (ZPCS)
MADISON, WI 53704 USA
CARTERSVILLE, GA 30120 USA

Thanks for contributing this, very in-depth!

Once again, I am deeply sorry for the misunderstanding. It is indeed a very in-depth tutorial.

Thanks for the great tutorial. Now i implement it step by step.
Please provide more tutorials in the future.
Thanks again.