Photoshop round corners are simple to make, and they add a modern, soft look to your design projects. They're also great for designing buttons for Web pages. If you want to incorporate round corners into your Web design, you'll need to think in terms of tables or carefully mapped CSS to get the right effect.
Round Corners in Photoshop
Photoshop CS comes with a tool that lets you draw boxes with rounded corners. Right-click on the Rectangle Tool in the tools menu and select the Rounded Rectange Tool. To use it, all you need to do is drag and draw. This creates a colored shape that must be rasterized under the Layer menu before you can edit it. Simply choose Layer>Rasterize>Shape and you'll have a rounded-corner frame that you can edit normally.
There are two main adjustments you can make to the Rounded Corner Rectange Tool. The first is the color of the shape. By default, the shape will be filled with whatever color you have chosen in the Color Picker Tool at the bottom of the tools menu. You can pick any color you want, but you must do this before you draw your rectangle.
The other adjustment is the radius for the rounded corners. This is measured in pixels and can be found in the top menu bar. By default, the radius is set to 10 pixels, which creates a subtle rounding effect. Decreasing this number makes the rounded edges appear more like angles, and anything under 5 pixels will look like a square edge. Higher numbers will put full arcs of pixels on either end of the rectangle. You can use the tool to draw circles and ovals if the pixel count is high enough, although this is most useful for creating symmetrical lozenges for buttons and design elements.
Adding Round Corners to Web Designs
While creating round corners in Photoshop is simple, adding them to a Web design can be tricky, because Web layouts are built around tables that have square edges. Your round corners need to be treated as border elements to recreate the look on the Web.
To do this, you need to know the background color of your Web page, then create the rounded corners in Photoshop on the same color background. For example, let's say you want round, blue corners on a white background for sidebar text. In straight HTML, code a table with three rows and one column, making a note of the width. The middle row will have your blue color and allow you to add text. Set the background of this table cell to the blue color you want, and note the hexadecimal number. It's best to stick to the Web safe palette for this, so that you get accurate color matches in Photoshop.
Next, open Photoshop and create a new document. Set the background to white and double click the Color Picker Tool. Make sure you're in 16-bit color mode, and you'll see a field at the bottom of the popup window with a # symbol next to it. Simply type in the hexadecimal value of your Web color and you'll get an exact match. Now you can use the Rounded Corner Tool to draw the rounded borders. Make the shape the same width as your table, then rasterize the layer.
Now you can cut the rounded corners, with the blue edge in between, off the top and bottom of the rectangle. You'll have rectangular images with a white background behind the blue. Save these as JPEGs and place them in the top and bottom rows of the table on your Web page. Now you've got a sidebar with rounded corners that can expand vertically to hold as much text as you like.
Buttons can simply be added to your Web designs, as long as you make them on the right color background. You can also use CSS and layers to position these graphical elements, but you'll need to use absolute positioning throughout your design so that everything lines up.
Columns that Expand Two Ways
If you want your sidebar to expand horizontally and vertically, it gets a little trickier, but it can still be done. Create a table with three columns and three rows, and set the background color of everything to white (or whatever background color you like). In Photoshop, create your rounded-corner rectangle.
To make a table that can expand, you'll only be copying the rounded corners themselves. You need to slice these out carefully, so that the only place the background color appears is next to the rounded edge. Put these images into the four corner cells of your table, and you'll have something that can expand in two directions.
Want to learn how to use Adobe Photoshop effects? This glimpse of Photoshop's many features includes texture and surface effects, lighting effects and distortion effects.
Want to learn how to use Photoshop tools? This quick course takes you through selection, cropping, slicing and painting.