Wednesday, October 27, 2010

Make Amazing Looking Images With Round Corners

There are many ways to make your web site stand out from the others. If you have been viewing other web sites to get ideas of what you want to do with your own web site, you may have ran across these cool looking images that have rounded corners. These images have become very popular in the Web 2.0 world and they can be generated using a script on your web site to make a mask over the image, but there is a much easier way if you have Photoshop.

Creating these very attractive Web 2.0 images using Photoshop only takes a couple of steps and if you want to make your own unique images that can be used anywhere this is the way to go. You can learn more about making easy round corner images here or by checking out the source of this information here : Photoshop Round Corner Image Tutorial

So if you are ready to get started, just open up Photoshop and follow along with the guide below that was originally posted here : http://matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop


How To Create Your Own Images With Round Corners

Within Photoshop, take a look at the Layers palette. The photo should be on it’s own layer, and we’re going to create another layer right on top of that.
Create another layer on top of the photo layer
On this layer, we are going to draw a rectangle, with the rounded rectangle tool.
The rounded rectangle tool
Draw the rectangle on the new layer you created.
Draw the rectangle
It doesn’t matter what the fill color is right now. Just try to center the rounded rectangle as best you can. Essentially, whatever falls inside this rectangle will be included in the picture.
Now, go back to the Layers palette, and select the layer that you just drew the rounded rectangle on. Double click on that layer.
The Layer Style palette should open up.
The Layer Style palette
In the Advanced Blending area, slide the Fill Opacity percentage down to 0%.
Slide the Fill Opacity percentage down to 0
Back in the Layers palette, click on the Paths tab.
In the Layers palette, select the Paths tab
With the current Path selected, click on the little arrow button, in the upper right corner of the Layers palette, and select "Make Selection..." from the select list.
Make Selection...
In the "Make Selection" option box, make sure Feather Radius is set to 0 pixels, and Anti–aliased IS checked.
Make Selection option box
Hit OK. You should get a nice, smooth selection of the rounded rectangle that you created.

Almost done

Now, with the selection still pending action, go to Edit, Copy Merged. Create a new document, and leave the dimensions alone (they should reflect the copy you just made). In the new document, go to Edit, Paste. There you go!

The image should now have nice, smooth corners, instead of the sharp, boxy ones it had before.

No comments:

Post a Comment