Pixelmator : Image rounded corners

Over the years, websites have gotten a much more refined appearance. This is mainly due to the death of Microsoft Frontpage and the end of the <table> tag which used to be holding the whole website content. Nowadays people are using <div> sections customized with a CSS stylesheet. This is much more flexible and allows, in webkit and gecko-based browsers, to get rounded corners. But how to apply rounded corners to images ? For now, this has to be done the old-fashion way, that is with a graphic editor.

There are several graphic tools but the choice on Mac OS X is rather limited. Because I am not a graphic ninja, I have decided to invest in a more simple solution : Pixelmator. The software is actually very light, super responsive and full of features. Most importantly Pixelmator is very easy to use.

To edit an image, simply open it with Pixelmator. Then follow the steps below my short screencast. Choose the full screen mode for a better view.

1- Select the picture you want to modify and open it with Pixelmator
2- Press Command+A or choose Select All from the Edit menu.
3-Choose “Refine Selection” from the Edit menu
4- Move the lowest slider to the left according to the radius you want for the image corners. Click OK.
5-Again, choose “Refine Selection” from the Edit menu.
6- This time, move the lowest slider to the right. Click OK.
7- Choose “Inverse” from the Edit menu to inverse the selection. Press Backspace to delete that part of the image.
8- Export your photo in a format that support transparency (PNG is good).

Hope this helped!