Visit DynamiX Web Design! E-Mail DynamiX Web Design!

design: creating rounded edges on images

We’ve all seen them, images with cleanly rounded edges. But, if you haven’t spent some time in photoshop, you may not know exactly how to go about creating these effects yourself in a way that’s straightforward, and doesn’t require the use of a plug in or action.

We’ll start with an image. Now, we have scaled this one down a little so that it will fit on our page, but yours can be any size.

Here is ours:
Odie, the DynamiX Labs mascot

Next, we will (using photoshop) select the Rounded Rectangle Tool. You can select anything you want for the radius (this controls how rounded your edges are), we chose 30px. Drag and create your rectangle over the area you would like to make rounded. If you are trying to create a perfect square, you can hold down shift as you drag to keep the proportions intact.

Here’s where we are now:
Where'd Odie go?

Next, making sure that the vector layer is selected (click on your shape in the toolbar until you see the small white border around it, as in our image above) click on “Fill” and change this value to 0. You should now see nothing but a thin white outline where the box once was visible. Move the box around a little if desired to get it perfectly around the area you wish to copy.

Here’s how it should look:
Odie's back.

Next, select the “Paths” tab, you’ll find it just to the right of “Layers” and “Channels” on your toolbar. You’ll see a small icon on the right hand side with three horizontal lines. Click on that icon and select “Make Selection.”

Odie's not even in this picture.

Press OK at the next screen prompt.

Next, click “Edit” in the header menu and select “Copy Merged.” Open a new document and press paste, or paste directly into the current document. Your end result should be a nice, clean and clear rounded image.

Here’s what we have to show for our work:

Odie's happy, and now he's in a rounded box.

Compatibility:
This method requires Adobe Photoshop or similar.

That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an a

del.icio.us Reddit Slashdot Digg Facebook Technorati Google StumbleUpon Furl Netscape Yahoo BlinkList Feed Me Links Bloglines Ask Mister Wong Newsvine Wink Squidoo Fark Blogmarks Sphere

We want your feedback! Leave us your thoughts below.



Interested in hiring the DynamiX Web Design team for one of your projects? Give us a ring!
Add to Technorati Favorites

Copyright © 2008 DynamiX Web Design, LLC.  |  DynamiX Labs is proudly powered by WordPress

Entries (RSS) & Comments (RSS).  |  thanks & about.
The DynamiX Mascot button submit it!
hire dynamix!