Please rank my site and sign my guestbook.
The above does not necessarily reflect my values.


Five Acre Graphics

Paint Shop Pro
Tips

Creating Round or Curved Buttons !

Creating Buttons and Images with Curved Edges

About round buttons: The buttonizer doesn't really work very well for that in PSP 5. But you can do a "work around" by using the "cut-out" effect.

step 1

For instance, on my image, I select my circle, then choose a really light color and a really dark color with my dropper for foreground and background in the boxes (can be white and black, or shades of the circle's main color).

step 2

Now I'll go to Images: Effects: Cut-out and set it at, hmmmm maybe 50% opacity, maybe 8 blur, and 2, and 2 in the bottom boxes.

I'll select the light color for this (I habitually put the light color as foreground for some reason--but it doesn't matter, as long as you use it!).

Now I'll click "OK". I should have the effect of light shining on the top left curved area of the "button."

If I'm not satisfied,I'll undo and try again. I'll play with the amount of opacity, blur, or the numbers in the bottom boxes (I usually keep these even, or close to even) until I'm satisfied.

step 3

Now, leaving the circle with its new light highlight and still selected, I'll go back into cut-out again, only this time I'll select the dark color and put a minus sign before those two numbers in the bottom box. Otherwise leave the settings exactly the same as with the first time. Then click "OK" again.

This doesn't quite give the same effect as the rectangular buttonizer, but with some experimenting, it can actually look more realistic, more spherical -- even like half a grape.

step 4

Now, I'll invert the selection and change the background of the image to a color that matches the background color of my web page.

step 5

To keep it "on the ground," I'll again invert the selection, then add a drop shadow using the same set of (all positive) numbers I used for the light colored cut out (except for changing the opacity to 100%). That gives me a "coughdrop with a shadow" kind of look (I couldn't think of a better description. LOL it's late!!!)

Now I deselect the button. I always SAVE the ORIGINAL as a PSP file!! That way it's always there to make copies from if I decide I want to put text or small images on similar buttons.

step 6

If I want to save this image as a .jpg to put on a page with a solid color background, I can stop here. I will have to save a copy of it at a very low (5% or less) compression rate to avoid artifacts. But if I want a sharper image on a transparent background, I need to save a copy of it as a gif, as follows:

First, I'll go to Colors: Decrease: 256 and select the "nearest color" option.

step 7

Then I'll make sure that I have the image's background color in the background (bottom) box below the color palette. Now I will go to Colors: Set Palette Transparency and select the "set to background color" option before clicking OK. (I can click on the Colors: View Palette Transparency button to see the transparent effect: the "checkerboard" background will show.)

Finished Button
There are lots of variations on this, like changing those paired numbers to have the light hit from a different angle. (Try -2,2 and 2,-2, or even just reversing the numbers we just did).

You can experiment with using more subtle colors for foreground and background, or even the same color and see whether you like the effect.

If you're making the button for a GIF transparency, you'll probably want to reduce the amount of "blur" on the Drop Shadow step, maybe to 2 instead of 8.

If the image's edges are too rough, try creating the button a little larger than you really want it, then resizing (Smart Size) to 90% before reducing the colors of your gif copy.

This also works to give more dimensionality to other shapes, too. Play with it, okay?

If you have comments, questions, or would like further information, please sign my guestbook or contact me at my e-mail address.

Thanks!
Diane

Button 2 Button 4 Button 1
Tip List Home Next

Button 5
E Mail
5acreart@usa.net

Five Acre Graphics Logo

All original graphics on this site
Copyright 1999
by Diane at
Five Acre Graphics



This page hosted by
GeoCities