Complex Rounded Boxes in Photoshop Under a Minute

Sometimes it’s not “hip to be square!”

Quite a few times I have wanted to quickly sketch-up a site design using complex rounded corner boxes but didn’t have time to grab illustrator and do all the path finder operations necessary. So I discovered this nifty little trick that may save you some time the next time the need arises.

First, this is the look that we will achieve:

This is the end result with rounded complex corners everywhere

This is the end result with rounded complex corners everywhere

First create a new document in photoshop, I used 1000 x 650 pixel dimensions. Create the general shape that you would like to be rounded with the marquee tool.Photoshop's Marquee Tool Here is an example of what I created using the marquee tool:

My initial selection in photoshop

My initial selection in photoshop

I used the shift button to add to selection and the option (alt) button to remove from selection.

Now enter quick mask mode by typing the q key or clicking the quick mask mode button:

quickMaskTool

Now your document should look something like this (unless you have chosen another color for quick mask):

selectionQuickMas

Go to filters>>blur>>gaussian blur enter the amount your prefer. The more blur the more the corners will be rounded. I used 9.7

gaussianBlur

Now the fun part! Open up the levels tool by going to image>>adjustments>>levels or command-l on the mac and drag the highlight and shadow handles to the mid-tone handle. Essentially just dragging them together. You can also move the mid-tone handle left or right before dragging the highlight and shadow handles to the mid-tone handle to “open-up” or “shrink-down” the size of your boxes.

Here is the result with all the handles drug close to the left:

levelsLeft

Here is the exact same selection with all the handles drug closer to the right.

levelsRight

Now, after applying the levels of your choice, exit quick mask mode by clicking the quick mask button again or by just typing the q key. You will now have a rounded selection of the square one you created! Fill with your color of choice and voila! Complex rounded corners!

Tags: , , , , ,

Tuesday, August 18th, 2009 Bill May Photoshop

Leave a Reply

 
  • *nix (1)
  • 3D (1)
  • Flash (1)
  • Photoshop (1)
  • PHP (2)
  • Wordpress (1)