Directory

Top 50

Paint Shop Pro : A button that changes when the mouse moves over it
[ Contents ]
Bernard Jolivalt

Creating the Button's 'pressed' down Variant

We have created our button. Now we have to create its variant, which will replace it when the mouse cursor moves over it. You can do anything you want: change the colours, make it distorted, apply filter effects. The only limit is your imagination. In Paint Shop Pro, the colours of an image can be modified using the Colours > Colourize command. The thumbnails in the dialog box allow you to view the outcome of the hue and saturation settings that you have defined.



Figure 3: The effects can be viewed in real time, before being applied.

Keep it sober! An abundance of special effects is not always a good idea. You can create a real "button effect" by making a pressed down button that replaces the "normal" button when the mouse cursor moves over it.

To create an "incised" button (also referred to as cut-out), we are going to apply a "negative effect" on the bevel created on the first image:

  1. Save the existing button under a new name.

  1. Click on Paint Shop Pro's Zoom tool and blow up the button 4-5 times.

  2. Click on the Selection tool and draw a selection rectangle inside the bevel.

    3. The corners of the rectangle should be inside the extended diagonal edges. Avoid above all cutting the image or the text.

  3. Choose Selections > Invert, so as to select the actual bevel (see Figure 4).

  4. Select Colours > Negative Image.

    5. The effect is only applied to the selected area. The edges of the bevels have become very dark.



Figure 4: The negative effect inverts the colours, as well as the visible brightness.

To correct the bevel without touching the rest of the image, we are going to use the floating selection function. Proceed as follows:

  1. Click on Selections > Float

    2. The selected zone becomes a floating image, separate from the rest of the image. You can also adjust the settings for this part, without affecting the rest of the image.

  2. Select Colours > Adjust > Brightness/Contrast).

    3. As the thumbnail only shows the bevel (that is to say, the floating selection), check the Auto Proof box. Juxtapose the images of the first button and the button being adjusted in order to compare the outcome. Set the contrast to 0 and increase the Brightness.



Figure 5: Compare the two images by adjusting the brightness of the image on the right.



'Buttonizing' an Image
  1   2   3 
Replacing Buttons When the Mouse Moves Over