This is another tutorial written by popular demand - several people have asked how to create a rectangle with Rounded Corners using Photoshop. While there are already several good tutorials which demonstrate techniques for creating smooth interfaces and rounded rectangles, they only work on a flattened image layer (or channel). Also, the technique illustrated below preserves the initial dimensions of your rectangle while allowing you to control both the size and shape (circles, ovals, etc.) of the corners. Note: ImageReady 2.0 and 3.0, and Photoshop 6.0 have tools for creating rounded rectangles.

Here are a couple of notes before you begin:

• Even though this tutorial looks long, it is actually quick and painless
• I tend to prefer hotkeys (e.g. [Ctrl+D] ), but I have provided equivalent alternatives (e.g. Select > Deselect - which denotes a menu command) wherever possible
• Mac users: Ctrl = , Alt = Option (e.g. Ctrl+Alt+D = +Option+D), and right-click = Control+click

Tutorial

1. You may use any foreground / background color you wish, however, to keep things simple, this tutorial will assume the defaults (white and black). Begin by resetting the colors to their defaults [D] by clicking the icon on the toolbar. Exchange the colors [X] by clicking the icon.

2. Create a New Document [Ctrl+N] (File > New); the canvas size is not important (350 x 100 (pixels) is used for this tutorial). Be sure the Mode is set to RGB Color, and choose Background Color for the canvas color (which will be black as a result of the steps performed in Step 1, above).

3. Make sure that the following options are enabled (turned on): Rulers [Ctrl+R] (View > Show Rulers), Show Guides [Ctrl+; ] (View > Guides), and Snap to Guides [Ctrl+Shift+; ] (View > Snap to Guides).

Drag four guides (from the rulers) onto the canvas (10 pixels in from each edge) as shown below.



Here are a couple of guide tips that might help you out:

• Shift-drag a guide to snap it to the increments shown on the rulers
• Alt-drag a guide to change its orientation (i.e. make a vertical guide into a horizontal guide)

4. Starting at the intersection of the left and top-most guide, use the Elliptical Marquee [M] (Shift+M to cycle) to draw a circle (by holding down the Shift key) whose radius represents the corner radius of the final round-cornered box.



5. Fill [Alt+Backspace] (Edit > Fill) the circle with the foreground color, and drop [Ctrl+D] (Edit > Deselect) the selection. Drag two new guides to intersect with the center of the newly created circle (the guides will automatically snap to the center of the circle).



6. Using the Move tool [V], Alt+Shift-drag (Alt will duplicate the layer containing the circle, and Shift will constraint your movement horizontally while you drag) the circle to the far right; until its right edge snaps to the right-most guide.



7. Drag another new guide to intersect with the center of the newly created circle. Merge [Ctrl+E] (Layer > Merge Down) this duplicate layer with the previous layer.



8. Using the Move tool [V], Alt+Shift-drag the two merged circles down until their bottom edges snap to the bottom-most guide.

9. Drag one more guide to the center of the (bottom) two circles. Again, Merge [Ctrl+E] (Layer > Merge Down) the layers (so that the current layer now contains four circles - one for each corner).



10. Use the Rectangular Marquee [M] (Shift+M to cycle) to draw a selection from the top-center of the top-left circle to the bottom-center of the bottom-right circle. Add a selection (hold down the Shift key) spanning from the center-left of the top-left circle to the right-center of the bottom-right circle. Fill [Alt+Backspace] (Edit > Fill) the selection with the foreground color.



That's all there is to creating a (solid) rectangle with rounded corners: however, you may also complete the remaining steps to create a rounded frame.

Rounded Frame

11. Ctrl-click on the current layer's thumbnail in the Layers palette [F7] (Window > Show Layers) to Load its transparency mask (you should see the "marching ants"). From the menus choose Select > Modify > Contract. The number you enter into the contract dialog box will represent the frame thickness of your rounded frame (a thickness of 5 pixels was chosen for this example). Press the Backspace (or Delete) key to Clear (Edit > Clear) the pixels contained within the current selection.



12. Complete your frame by adding layer effects (). Right-click on the current layer in the Layers palette and select Effects; uncheck Apply for Drop Shadow and choose Color Fill [Ctrl+6] (or choose Layer > Effects > Color Fill). Enter (for example) the following settings: Color: R113,G163,B255 [#71A3FF], Mode: Normal, Opacity: 100%.

Next, choose Bevel and Emboss [Ctrl+5] (Layer > Effects > Bevel and Emboss). Check Apply and enter the following settings for Highlight: Color: R255,G255,B255 [#FFFFFF], Mode: Screen, Opacity: 100%. Enter these setting for Shadow: Color: R0,G0,B0 [#000000], Mode: Multiply, Opacity: 100%. Finally, for the rest of the values, enter: Style: Inner Bevel, Angle: 120, Depth: 1 (Up), Blur: 1.



All done! Be sure to grab the action(s), below. While the Round Corners action generates the same results as the above steps, you may also customize it to your liking. In fact, just trying to figure out how the action works is a great challenge!

I sincerely hope that you found this tutorial comprehensive and straight-forward (and, more importantly, that you learned something).