Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates (NEW)  |  Website templates  |  Privacy Policy  |  Link Exchange  |  Contact Us

Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!

Welcome To ProDesignHost.com Photoshop Tutorials Area - Rounded Corners

Rounded Corners

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 = apple, Alt = Option (e.g. Ctrl+Alt+D = apple+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 Default Colors icon on the toolbar. Exchange the colors [X] by clicking the Swap Colors 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.

New Canvas with four guides

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.

Draw the first corner

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).

Fill and add two more guides

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.

Drag a duplicate second corner

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.

Add another guide

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).

All four corners

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.

Fill the box

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.

Cut out the center

12. Complete your frame by adding layer effects (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.

Rounded Corners Tutorial: Final Result

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).

Advertisements

Premium Partners

  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Website Design Tutorials - Web site design is an area that simply takes experience to perfect. Get started with these tutorials covering everything from page layout to content tips. At Webdesigntutorials.net you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.

Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website templates  |  Privacy Policy  |  Contact Us

All Right Reserved by ProDesignHost.com