Easy Rounded Corners in Photoshop
Rounded corners should be easy. As I’ve been doing more work with mobile app development, I’ve realized that I have a number of old ways to do it, but I want to get it done fast. So, I’ve put together this little example for making quick rounded edge icons for mobile apps; but you can extrapolate the process for about any image.
First some assumptions: we’ll want to save this as a 24-bit png file - don’t worry, it’s so small it wont make any appreciable difference as far as file size is concerned. Speaking of which, I’ll be using a resolution of 114X114 pixels which will ensure the image looks good on high resolution displays (others will simply render it down to the right size). Lastly, I’m assuming we’re all working in RGB mode. If you are taking an image you’ve already used and indexed (as a gif or png file) make sure you change the mode you are working in or you’ll be flummoxed.
OK, so here we go:
1) Open your file and re-size to 114X114 pixels.
2) Select your Rounded Rectangle tool. You’ll want the defaults for the tool selected in the options bar - specifically, ‘shape layers’ - and set the radius to your desired amount (I recommend 20px).
3) Draw your shape - this will create a new layer for you, with a vector mask. How convenient!
4) CMD-click on the vector mask (in History, you’ll notice this loads a new selection).
5) Click on the original background layer and press CMD-J (this copies the selected pixels to a new layer).
6) Make the original layer and the layer with the vector mask invisible, then Save for Web as a 24-bit png file with transparency.
Of course, as with anything Photoshop, there are a dozen ways to do this. I’ve just found this to be the most efficient for me. I could have made a selection, inverted it, and smoothed it out, and then deleting the pixels in that inverted selection. But I wasn’t as pleased with the edges of the corners, and I found it usually left me with additional trimming work to do. So, I think this works most efficiently.
Next entry: Limor Fried Wired Cover
Previous entry: Thoughts on Design