Photoshop Tutorial: Rounded Edges

These days rounded edges are on just about everything. Though nice right angles can be just as good, many people enjoy the softened feel that rounded corners can offer. This tutorial outlines a method used in older versions of Photoshop (5.5 and older) to transform the edges of squares and rectangles into rounded edges.

Note: If you are using Photoshop 6 or higher, you can skip this tutorial. As of Photoshop 6, a Rounded Rectangle tool is now included (finally!). This tip outlines how to create rounded edges in Photoshop version 5.5 and below.

Another very cool option that’s become popular is to use a CSS/Javascript-based approach to automatically generate custom rounded corners on your web site, without using any images. A good example is NiftyCorners—and many others can be found by searching.

Step 1

Open a new document and click on the Create new channel icon in the Channels Palette. Select the Rectangular Marquee tool from your toolbox and create a number of different shapes, either separate or connected to each other. Hold down the Shift key so that you can make more than one shape at a time, without deselecting others. As you do this, keep in mind the “basic” overall finished shapes you see in your mind. Once you have your shapes, go ahead and fill them with white.

Example 1

Step 2

Once you are satisfied with your shapes, press Cmd+A (PC: Ctrl+A) to Select All. Go to Filter » Blur » Gaussian Blur. Set it to 5 and click OK. If you want the corners to be less rounded then all you have to do is reduce the number, more rounded, increase the number.

Example 2

Step 3

Now, press Cmd+L (PC: Ctrl+L) to get the Levels dialogue box. Move the input levels to 120, 1.00, and 140—press OK.

Example 3

Step 4

Once you recover from your amazement, you’ll probably begin to wonder how to make your new round-edged masterpiece start looking like a “real” interface, button, etc. The answer lies in a Texture Fill.

Step 5

Open whatever texture you like (if you need some cool ones, check out the free Seamless Textures section on Absolute Cross for over 500 to choose from). Select All by pressing Cmd+A (PC: Ctrl+A) and then choose Edit » Define Pattern.

Step 6

Go to the Channels Palette and hold Command (PC: Control) and click on channel you made to load the selection. Go back to the Layers Palette and make a new layer—ensure it’s the active layer before continuing.

Step 7

Next, choose Edit » Fill » Pattern to fill the selection with the texture (in Photoshop 6, you must choose which Custom Pattern to use from the drop down). If you like what you see, then save your work… or you can use other techniques to make it look even better—such as beveling the edges or adding buttons and crazy gadgets! Have fun!

Example 4

2 comments

Add your comment

Thnks for sharing! Nice & creative tuts!

1

never worked for me :( followed every step exact

2
Please register or login to post a comment.
Back to top