Creating "button" images cropped

[MrRedPants]

All I'd like to do is create a button image that I am going to use on my website. What I can't figure out is how to crop the image, or resize the canvas, so that the image is saved as ONLY the button, including the rounded edges vs. seeting the button within a rectangular white background. The crop tool will only crop a rectangle. Not sure if that makes sense. I'm sure it has something to do with layers...

I'm sure this is easy, but, I can't seem to get it -
Thanks in advance!

 

[theKeeper]

Greets MrRedPants...

Question: are you trying to save your image as a transparent Gif? I'm assuming so because you mentioned rounded corners. And are you trying to have the button sit against your page's bg colour?

This is what i normally do when i don't want the hassle of using the slice/crop tools and all that jazz...

Drag a tight selection around the button; hide the document bg layer; press Ctrl+Shift+C. (copy merged) Then open a new doc; leave the settings to what they are; press Ctrl+V then delete the bg layer of this new document. Now save out the button using the "Save for Web..." function. Select "Transparency" and choose a "Matte" colour. Plus, optimize the image as you see fit.

That's about it. Takes only a couple minutes once you're used to the steps.

If this isn't even close to what you're asking let me know. [oops]

 

[MrRedPants]

Sounds close.
The only thing I don't know how to do is hide the bg color.

All I did was created a new image, used the shape create tool to make a rounded rectangle, changed the color and added some text.

Now I just want the button, not the background 'canvas' so that when I'm using the image as a button for my webpage design, it's only the button and not the button sitting on a white rectangle.

Attached an image of what I mean. Here I wouldn't want any of the purple background, just the button. Is what you were saying fix this? Thanks for the response

 

[Josh]

If that background is on a seperate layer, just make it invisible (checkerboard pattern), that's all there is to it.

Then continue to follow Mark's steps.

 

[MrRedPants]

That's what I thought, but, when I do that and save it, the background still is saved as white and takes up more space than I want.

This was the solution I found, FYI.

http://curriculum.union.edu/tips/psebuttons/

 

[anepu]

Heres another approach to getting the image sized down for just the button you created. Either click the eye off on the background layer or delete that layer. Then go to Image - Trim at the top, select Transparent Pixels & all four corners then click OK. That will easily remove the excess area for you. This Trim feature is available in PS7 and possibly in earlier verisions as well.

Hope that helps!

anepu

 

[Sark]

I saved the image you posted with the purple background and removed the background colour as follows.

1...Open image

2...Click on purple background with magic wand to make selection

3...Right click on image selection and choose "Inverse"

4...Right click again and choose "Layer via cut"

3...Delete original image layer in layer palette

That's it. You can now "Save for web" but you will first want to use Image/Trim (Based on Transparent pixels) to reduce the image size to your button only.

My attempt suffered a little on the top left corner when selecting with the magic wand. As you have a better image to work from this should not be a problem.

Of course all you really needed to do before creating your button was create a new document with a "Transparent" background . \:]

Sark