How to Create Great Rounded Corners on Images with an Alpha Mask and Paint.Net

For a recent website I was working on I wanted to have some nice looking rounded borders for the main body of the page and some of the images.  Since I’m an avid jQuery user it was a no-brainer to use the jquery.corner plugin.  It looks great and works across multiple browsers.  It defaults to using more modern CSS styles for newer browsers but falls back on some neat tricks for older browsers.

Unfortunately the tricks don’t always come out perfect and some users with older browsers complained the image corners were “jaggy”. Rather than tell any users they need a newer browser I decided to make it look nice without the hack, by actually creating images with rounded corners. Yeah, we’re still in the early 2000’s sometimes. Smile

Paint.Net is a great tool that meets many of the needs for web developers.  Naturally this was my first stop.  There are several great tutorials for corners and even some nice plug-ins already created, however, none of them seemed simple or did what I wanted.

For instance, here’s a great tutorial from Micah Sewell on manually creating rounded corners but, unfortunately, it forces you to use the rounded rectangle tool, which has no options for changing the corner size or getting it positioned exactly, nor does the process described create antialiased corners, an absolute must.

Here’s a great plugin by Tim Mathais for creating rounded rectangles for things like buttons, but this doesn’t work on an image that already has a background.

What I would rather do is draw upon the power of alpha masks.  If you don’t know what these are take a look at this great Wikipedia article.  In essence you use a grayscale image to change portions of your desired image opaque or transparent.  If you have a grayscale gradient from the top to the bottom and apply it as an alpha mask to your image your image will go from opaque to transparent from the top to the bottom or vice-versa.

Using Tim’s plugin and the Alpha Mask Import Plugin we can get exactly what we want: user customizable rounded corners on images with antialiasing.  Tim’s plugin allows great control over your borders and the coloring used for the mask.  The Alpha Mask plugin allows great easy features like pulling in the mask from the clipboard rather than having to save it first, which is exactly what we’ll do.

To do this simply:

  1. Load the Rounded Rectangles and Alpha Mask Import plugins into Paint.Net.
  2. Open your desired image in Paint.Net.
    image
  3. Create a new layer and switch to that layer for drawing.
    image
  4. Using the Rounded Rectangle plugin create a new rectangle with your desires properties.  To make this an alpha mask it needs to be grayscale so make sure you don’t use color.
    image
    SNAGHTML3f215674
  5. This should place a rectangle with your desired settings on the second layer.  My rectangle is simply black with with a radius of 20 and antialiased.
    test mask2
  6. Select the entire layer and copy it to the clipboard.  Now that the mask is in memory you can either delete the mask layer or simply hide it.  I sometimes make mistakes and hate redoing work so I just hide mine until I am sure that I’ve got what I need.
  7. Now, on your original image simply use the Alpha Mask plugin and it will default to pulling the mask you copied into the clipboard.  You may need to check the Invert Mask option depending on how you created the mask:
    SNAGHTML3f1e0430
  8. Hit OK and you’re all set with great results!  This process only takes a few seconds once you get it down and it is very customizable. 
    test mask

Enjoy! Winking smile

About Author

Matt Penner

2 thoughts on “How to Create Great Rounded Corners on Images with an Alpha Mask and Paint.Net

  1. This is a great, clear explanation. Thanks. It was a big help when I wanted to create an icon for my Android game with transparent rounded corners.

Leave a Reply

Your email address will not be published. Required fields are marked *