Making round corners in Photoshop
Rounded corners is a nice effect that can be added to every picture giving in the end a pleasant image. A rounded rectangle picture looks better than an usual one. Everyone likes to have a component in the website that looks like made by professionals. All you have to do is imagine how to combine CSS with little pictures made in Photoshop. But even if don’t know how, you can read our CSS sections.
Let’s try to do this box.
If we need just an image like the previous we can simple draw a rectangle with a green border and then, put up a green tabbed rectangle. This is easy when we need something like that for a picture, but if we need to put into HTML code things are different because we may need to put text on that image.
Drawing corners
Let’s look into these steps:
Step 1
We used here the Adobe ImageReady image editor. You can use one at your convenience. Is not really important. This tutorial here is not meant to teach you use Adobe’s software but to help you get the idea of doing it. Having that is not that hard to draw the rectangle in other than ImageReady.
Open a new document giving 12 pixels for width and 4 pixels for height. For a success draw use Zoom Tool.
Step 2
Select Tab Rectangle Tool, set a radius for its rounded corners (usually a radius of four pixels looks awesome; bigger radius make the picture look funny; If you want a bigger radius you have to make the entire image higher so the whole corner fits into it) and draw the rectangle from margin to margin.
Step 3
Now select Slice Tool, then go to Slices Menu and choose Divide Slice. We will divide vertically the image in three slices where the width is four pixels. See the image below:
Step 4
Go to File Menu and choose Save Optimized As. After saving you will find one folder containing three little images: one left corner, a sqare and a right corner and one HTML file. With this three images and using CSS we can make the rounded part of our initial picture. To find out how to combine CSS classes read this full article.
Using Slice Tool we will cut precisely little images and having all of them we can put together to obtain what we need. Don’t forget that a web page who has “big” pictures won’t give the user a quick feedback… and a website that displays the content in a few seconds (2-3 secs) is much better than waiting 20 secs. Some dexterity with Adobe Photoshop/ImageReady will save us from trouble! 
One Comment for “Making round corners in Photoshop”
Post a comment
RSS/XML
September 27th, 2008 at 7:09 pm
Thanks for the info. Here is the easiest way to generate round corner: http://www.roundz.net/