Paintshop tutorial

Textured Buttons

Click HERE to go back to the "PSP Index page"

Some of my websites have a "textured" background instead of a colored one as this one does. On this page, the "Return" button at the very bottom looks OK, I think but on a textured background, it is nice to see a button to match that background. This is easy to do in Paintshop. For an example of the result see my home page at http://www.sticksite.com/.

Here is how I did it:

1. In PSP, open the image which is the texture of the page background, and click:

edit | copy | edit | paste | as a new image

Now you have the original and a copy of it. Move the original out of the way; we'll work with the copy, just to be safe.

So now, it looks like this:

make a button

2. Now browse to, and open, the "Preset Shape" that you want; if your folders are like mine: C:\Program Files\Jasc Software Inc\Paintshop Pro 8\Preset Shapes and choose a file, e.g. Arrows.PspShape That file will probably show smaller than actual size; note the title bar; to enlarge to full size: View | Zoom | zoom to 100% Now you can see if the arrow you want to use will fit the background image; assume it will, and it now looks like this:

make a button

3. Let us pick the fourth arrow on the second row.

make a button

Use the "Crop tool" to make a box around that arrow.

make a button

make sure that the "tool options" are showing for that tool; if they are not, View | Palettes | Tool Options will bring them up:

make a button

click the check-mark on the tool option palette and only that arrow will be left:

make a button

The green and white checkered background indicates that the background is "transparent."

5. With the arrow picture still active, Image | Rotate | Rotate counter-clockwise 90 and it looks like this:

make a button

6. Edit | Copy
click the title bar of the background
Edit | Paste | As a new selection
Move the mouse so the arrow is centered on the background and then click to drop it there.

7. If you want a shadow beside the arrow
Effects | 3D effects | drop shadow
change the settings to suit yourself and click OK
Selections | Select none (to remove the "ants") and it looks like this:

make a button

8. Now use the Crop Tool again to get rid of the part you don't want around the arrow.

9. Effects | 3D effects | Buttonize (and set it the way it looks good to you)

10. in the "Image" menu, choose "resize" and make the button the size you like.

make a button

11. save your button as a JPG (and also as a GIF if you like and then compare them for quality and file size)

12. Close Paintshop and use your new button!

NOTE: if you want an "UP" version of a button as well as a "DOWN" version, "Buttonize" it before you put the arrow on, and the use the "Flip" option under '"Image" to make the opposite version; then add the arrows.

Corel Store

how to get Diamond Willow

in fact, tell EVERYBODY!

Diamond Willow Sticks

back to page top