Cutting Corners
We all love to cut corners… actually, we all love the elegance of photos with rounded corners.
There exists no single click solution for achieving this, even though there is an easy way to do this for photos already placed in InDesign (topic for another day).

The Need for Rounded Corners

For most designers who work in both web and graphic design software, (Adobe’s Illustrator, InDesign, Photoshop, Fireworks, Dreamweaver and the CorelDRAW Graphics Suite) there is a growing need for images with rounded corners. You can see the above photo at the Peter Njenga home page.

The advent of rounded element containers in CSS has necessitated this. See these at the Complit Communications homepage.

How to… (using Photoshop CS2)

Following is our original image:

Complit Design: Making Rounded Corners in Photoshop tutorial - Original photo

Complit Design: Making Rounded Corners in Photoshop tutorial - Original photo

Step 1: At the Layers Palette, the image is on its own layer. Create a new layer right on top of it.

Rounded Corners Tutorial - new layer

Rounded Corners Tutorial - new layer

Step 2: Next, pick the rounded rectangle tool

The rounded rectangle tool in Photoshop

The rounded rectangle tool in Photoshop

Using this tool, draw a rounded rectangle on this new layer you created. No need to worry about the fill color, but ensure this rectangle captures as much of the original photo as possible.

Draw a rounded rectangle

Draw a rounded rectangle

Your Layers Palette should now look like this:

The Layers Palette

The Layers Palette

Step 3: On the Layers Palette, select the layer you drew the rounded rectangle on, and double-click that layer. This opens the Layer Style Palette:

The Layer Style dialogue

The Layer Style dialogue

In the Advanced Blending area, slide the Fill Opacity percentage down to 0%.

Step 4: Back in the Layers palette, click on the Paths tab.

Select the current Path, click on the little arrow in the upper right corner of the Layers palette, and select “Make Selection” from the select list as shown below:

The Path tab on the Layers Palette

The Path tab on the Layers Palette

In the “Make Selection” option box, make sure Feather Radius is set to 0 pixels, and Anti–aliased is checked.

Make Selection dialogue

Make Selection dialogue

Upon clicking OK, you get a nice, smooth selection of the rounded rectangle that you created.

And finally…

With the selection still pending action, go to Edit, Copy Merged. Create a new document,  go to Edit, Paste.

Complit Design: Making Rounded Corners in Photoshop tutorial - result

Complit Design: Making Rounded Corners in Photoshop tutorial - result

You get the above beautiful photo with rounded corners.

Great Success!

Bookmark and Share