Feb 17, 2010

Rounded Corners Part 2

In the first tutorial we went over how to use an action to create rounded corners in Photoshop. The action used 6 guides to create a grid and then formed a selection with one rounded edge and 3 sharp corners. From there you can simply copy the layer 3 times and form a box with all 3 rounded edges. It can be a perfect square or a rectangle, but beware: once you have form the box there is a trick to editing the size.

Lets say that you have created a rectangle with the 4 layers of rounded corners. Then you merged the layers together and used it in your design. As always, your client will want to change something and give you 3 more sentences to fit inside the rectangle. The normal reaction would be to transform (cntrl + T) the rectangel. DO NOT DO THIS. If you transform the merged cornered box the rounded edges will "warp" or sag. I will now go over how to correctly and quickly transform the rectangle instead of using the free transform tool.

Select the rectangular marque tool (M). Use the marque tool to cut the box in half by simply selecting half of the box and then select the Move tool (V) while the box is still selected. Nudge the selection to the right or left or grab it and move it. If you would like to keep it clean, hold down the shift key to keep the two halfs aligned. Now you have a large gap in the box. Not a problem at all. Use the marque tool again to select a flat section of the box (not the rounded portion!) and again select the Move tool. Now you will use the transform option (cntrl + T) and stretch the selection without warping the edges.

Now that you have rounded edges, you can make pill sized jelly buttons or content windows. I'll leave jelly buttons for a different tutorial.

No comments:

Post a Comment