[Table of Contents]

Using Gradient
Adding Text to a Photo
Creating Rollover Buttons
Creating a Banner
Creating Borders
Embossing Effect
Spotlight Effect
Converting to Black and White Image

 

Create your own rollover buttons.

Example

    First ImageSecond Image

 

To create rollover buttons:

1. Prepare an image to use for a button. In this example, we prepared white image of the button size.

Blank Image

2. Select the image and choose [Image > Image Effect...] in the Insert menu.

3. Image Effect dialog box appears. Select Gradient tab.

4. Add gradient effect to plain white backgound to give color and 3D effect.

Gradient

5. Select Add Text tab and insert the button label.

Add Button Label

6. Save the image.

7. Select the saved image and choose [Image > Image Effect...] in the shortcut menu.

8. Select the Effects tab in the Image Effect dialog box.

9. Choose Bevel edges. This option "Bevels" the edges of the image to make it appear raised above the rest of the image.

Bevel Edges

10. Apply drop shadow in Drop Shadow tab as necessary. When you apply drop shadow, remember the values of Offset and Blur. Save the button with a different filename.

Drop Shadow

11. Select the image you saved at the step 2 and choose [Image > Image Effect...] in the shortcut menu.

12. Select the Effects tab and check Bevel edges (inset). This option "Bevels" the edges of the image to make it appear inset below the rest of the image.

Bevel edges (inset)

13. Apply drop shadow in Drop Shadow tab as necessary. When you add drop shadow, use higher value of Offset than the engraved button you made before.
Give less Offset value to make an effect that the embossed button sinks when mouse pointer rolls over the button. 

14. Save the button with a different filename.

Drop Shadow

 

15. Choose [Script > Script Wizard...] in the Insert menu.

16. Select Rollover effect from the list and press Next.

17. Enter the path to the embossed image in the First image path and enter the path to the engraved image in the Second image path. You can see the preview of the rollover effect. Move the mouse pointer over the image to preview the rollover.

18. Click Finish to close the Script Wizard.

Move the mouse pointer over the image below to see a rollover effect.

up_button.jpg

 

Namo Interactive Inc.

This document is created using Namo WebEditor 4 on August 2, 2000.

 

© 2001 Namo Interactive Inc. All rights reserved.