Lots of people have asked me before about how to make rounded corners with Adobe Photoshop, so I guess it's time to make a tutorial. Hope you find it useful.

From this...

To this...

Steps

Understanding the Rounded Rectangle tool

You can pick the Rounded Rectangle Tool from the left tool menu.



One important setting for this tool is the radius. That size will determine the radious of your rounded corners. You can choose the size you want.



The more bigger the radious is, more rounded will be your corners (see image below for some examples)

Using the Rounded Rectangle Tool to make our rounded corners

Now, time to use it. The color isn't important here, we just want to make a rounded rectangle shape and then select it.

1.-
First of all, copy your image, open a new document and paste it (never work with the original image file to avoid replacing it unintentionally).

So, with the Rounded Rectangle Tool selected, click on the top left corner of your document and drag it until the bottom right corner.
Remember that you can also change its size using Cntrl + T and you can move it using the Move Tool (V or )



You'll have something like this:




2.-
Now, we're going to select the rounded rectangle. To do that, Ctrl + click on the layer's thumbnail.



You rectangle will be selected now.




3.-
As we only want the selection, not the white rectangle, we're going to delete it. Click on 'Shape 1' layer and drag it to the little bin icon.



You can see your complete image, with a rounded rectangle selection over it.



4.-
Now, we could inverse the selection and delete the part we don't want, but we are not going to do this because that would modify the original image.

So, instead, we'll simply add a Layer Mask. Click on Add Layer Mask on the layers tab.



This way, using layer masks, if you don't like the rounded corners or you want to go back to the original image, you will only have to delete the layer mask.

Our final result

And done! We have our image now with pretty and nice rounded corners.

Changing background color

Let's say you want to use your rounded corners image in a website with a dark background. To change yours, just select your background layer (see image below)



Choose a color and pick the Paint Bucket Tool (G or ) and click on your document.

That's it?

Yes, that's it! It's as easy as it seems to be.

This is my newest tutorial, I hope you all like it.
If you have any question regarding this tutorial, don't be afraid to ask and I'll do my best to answer it.

very nice

i just have one thing to add if you dont mind

if you want a transparent background, double click the background layer and name it whatever you want, then control+click the background layer and hit delete, then save as either a png file or a gif.

XD very nice tutorial, im sure it'll help many people

Great tutorial PSGirl

Thanks stupinator and D for your comments

Stupinator you're right. At first I thought about saving it in .png with transparent corners, but I decided not to since that don't works well in Internet Explorer 5 and 6. But thanks for pointing it out

Very nice tut Maria

This is verry usefull for me 10q !

I'm wonderring how can i make my image's resize normal..... i import them in swish ... but then they have resized ......... i don't know this much the english i'm sorry ... but it's realy weird .... i'll be greatfull if you can help me ...
p.s.
The image was created in fireworks !

Thanks for your comments!
About your swish question, you should ask here in Swish Help.

No No No !
Thank you PS and here is the promissed ->
This will be verry usefull ... and again have a nice day/evening

very good tutorial and so usefull keep up the good work

Thanks for your nice tutorial, actually there is some other way to do so.. but you have done a good job mate.

fast and nice work...keep it up

very nice work PSgirl

i use it for my banner on this site Darkzide
feel free to have a look the site is still under constuction

simple and very nice thanks

As you said - only for begginers.
I think that you could use feather

wow, thanks this tutorial is really good, I didn't notice that there is a radius option before