Photoshop 7 round and oval buttons

How to use just what I need

[D_Blackwell]

I've been 'teaching' myself Photoshop. (Took a class from a local college - they basically just dumped a book in front of me.)

I've made some really nice round and oval buttons for navigation (complete with rollover versions). I can't figure out how to get just the button. I've been cropping out banners and other rectangular things, but this is a bit different.

I've been cloning in matching background to make my cropped out buttons work, but I'm sure that this can't be 'correct' technique.

Can someone tell me the 'oh so much easier' trick, or point me to a tutorial?

[benihana]

you need to set your buttons up on a transparent background, and then save them as a gif or png with the matte set to match the desired background.

the buttons will still be technically rectangular but will look oval.

ben

[D_Blackwell]

Success. Thank you. I have a follow up question. The edges now come out a little raggedy. Suggestions for making them crisp again?

[benihana]

you will never get them perfectly crisp when you mix curves and transparency - it just doesnt work.

the best you can hope for is to play with the matte settings to be as close to your background color as possible - that way the ragged look will disappear when you put them in place.

ben

[garann]

This may not be part of your problem, but I notice that sometimes, when I create an image with anti-aliasing (like text or a shape) on a transparent background, Save for Web will discard some pixels around the edge if they aren't fully opaque. I get around it by applying an Outer Glow of 1px to that layer in my intended background color. That seems to fill in all the gaps and produce a nice edge. Just, you know.. FYI.

[Josefu]

The edges now come out a little raggedy. Suggestions for making them crisp again?

...you'll notice that when you 'save for web' (as you should be doing : ) your image that there is a 'matte' square in the settings panel - set this colour to that of the background which will be behind your gif image. Photoshop will take this colour and use it to 'anti-alias' the edges of the image, allowing a mix that will give that soft degradation illusion of comfy roundness. Otherwise photoshop will think 'color or transparent' and the edges will be ragged.

(added)

Oh, and when the background is an image I use an app called 'digital colour meter' to measure the best colour to use as a edge matte for the gif image.