Design Oahu

Web design blog from the middle of the pacific.

Rounded Corners Photoshop Tutorial

It took me forever before I learned how to make rounded corners in Photoshop using Channels. I had been using the custom shape tool for the longest time, but I became frustrated by not having the precision of roundness that I desired. Then I started fooling around with the marquee tool and using a feather to get the roundness that I desired however the edges become blurred when it is filled with color… duh, thats the point of feathering. So, here is how to do it with channels.

1. To start out, open a new file, I started with a 400 by 400 pixel white background.

2. Use the marque tool (m), and drag out the rectangle or square dimensions you desire.

3. Create a new layer (Shift + CTRL + N). Then click on the Channels tab in the Layers Window. If the Layers Window is not open press F7.

4. Create a new Channel Layer. The background will appear black. Fill in the selected marquee with white using the paint bucket tool.

5. Unselect the marquee by single clicking anywhere in the window using the marquee tool. Go to Filter -> Blur -> Gaussian Blur and set the level of roundness desired for your corners. Using around a 4.0 gives a decent sized roundness. Now go to Image -> Adjustments -> Levels (CTRL + L) and drag the outside handles toward the center until the rectangle is no longer blurry.

6. Hold the CTRL key and click on the rectangle in the preview window of the Channel layers. Now, select the layers tab in the Layers Window. Make sure your new layer is selected. You now have the rounded corner rectangle you desire, so fill free to fill it in using a gradient or the paintbrush tool.

Rounded rectangles can be used a lot in web site designs for buttons to be clicked or tabs to be selected. I find myself always using this technique to get the corners correct when I am creating a new button. Hopefully this helps you out. It may sound like a lot of steps at first, but once you get used to it, it becomes second nature, and you will never go back to fooling around with the rounded corner shape tool.

If you liked what you read you may be interested in subscribing to our RSS feed or email alerts. You may also want to read up about what RSS feeds are all about.

5 Comments

  1. Comment by Rashi on July 5, 2008

    Fabulous work!!! Thanks for your step by step tutorial. It helped me a lot!!!!

  2. Comment by ben on September 6, 2008

    did not work – followed instructions exactly but did not understand step 6?

  3. Comment by pluim on December 1, 2008

    [quote]4. Create a new Channel Layer. The background will appear black. Fill in the selected marquee with white using the paint bucket tool.[/quote]

    doesnt work with me :S

  4. Comment by PHP Web Developer on May 6, 2009

    how shall I put gradient in rounded corner box ???

  5. Comment by Kim on July 28, 2009

    Great tutorial, something I’d been trying to do for ages. Thanks!

Leave a Comment

5 Comments and Trackbacks »