View All Tutorials | Home


Pushed Button
Requirements: Paint Shop Pro 6, 7
Author: Richie Dumlao

 

 

1 Make a new 150x50 White Background, 16 Million colors image.   Set foreground color to Black and background color to White.
2 Apply a Linear Gradient Fill using the settings below:

Linear Gradient Settings:
Fill Style = Linear Gradient
Blend Mode = Normal
Paper Texture and Match Mode = None

Under the Flood Fill Options Tab
Gradient = Metallic
Angle = 180
Repeats = 0

 

Shape Tool Settings:
Selection Type = Rectangle
Style = Stroked
Line Width = 1
Create as Vector = No

3 Add a new layer (Layers>New Raster Layer) and name this layer "Inset Line"

Turn on grid view (View>Grid).

Using the Preset Shape Tool , draw a rectangular black line as shown in the image below occupying 13x3 blocks.

4 Duplicate Inset Line layer (Layers>Duplicate)

Pick the selection tool and press [CTRL+A] (you will notice the whole image becomes the active selection). Click your mouse once anywhere on your image, the black rectangular line should should become the current selection.

Invert color (Colors>Negative Image). This will turn black line into white.

Place your mouse cursor over the white line and you will notice your mouse cursor becomes a mover icon .  Drag the white line about 1 pixel down and 1 pixel to the right.  Change layer's blend mode properties to Soft Light (Layers>Properties)

5 Use selection tool and draw a rectangular selection around the inset line (Antialias = off).  Save selection to alpha channel (Selections>Save to Alpha Channel) and name it Button.

Make Background layer the current layer (Layers>Background). Darken the selection (Colors>Adjust>Gamma Correction)  RGB = .65

6 Make "Copy of Inset Line" your current layer (Layers>Copy of Inset Line).

Add another layer (Layers>New Raster Layer) and name this layer as Text.  The new layer will be created on top of "Copy of Inset Line" layer.

Pick the Text tool and start adding any text. 
Font used on this example = Haettenschweiler
Antialias = on
Size = 20

Save this image in .PSP format and name it pushme01.psp
Save another copy in JPEG format (File>Save Copy As) and name it pushme01.jpg

7 The following procedure will show you how to create a pushed button effect.

Make your background layer the current layer (Layers>Background)

Load the button selection (Selections>Load from Alpha Channel). Apply the Cutout filter (Image>Effects>Cutout)

Cutout Settings:
Fill Interior Color = Not checked
Shadow Color = Black
Opacity = 70
Blur = 10
Vertical and Horizontal Offset = 7

Darken the button selection (Colors>Adjust>Gamma Correction) RGB = .70

8 Make Text Layer the current layer (Layers>Text)

Pick the selection tool and press [CTRL+A]. Click your mouse once anywhere on your image to make your text the current selection.

Place your mouse cursor over the text and you will notice your mouse cursor becomes a mover icon .  Drag the text about 5 pixels down and 5 pixels to the right.

Save this image in .PSP format and name it pushme02.psp
Save another copy in JPEG format (File>Save Copy As) and name it pushme02.jpg

See Push-Me Navigation Bar Sample

Download the PSP file for this tutorial.
pushme01.zip 3.04kb

Download the PSP file for this tutorial.
pushme02.zip 3.67kb

See also: Mouse-over tutorial

Back to Top / Translate this tutorial

Home | Tutorials | W3 Corner | Freebies | Pixel Arena | Message Board | Resources | Portfolio | E-mail  | About | Guest Book

Pinoy7 1999 - 2000 Richie Dumlao All Rights Reserved.
Paint Shop Pro and Animation Shop is a registered trademark of Jasc Inc.
Disclaimer   Privacy Statement