Web Studio Site

Main Menu

Graphics

Web Studio Forums

Making Basic Curved Corners in Photoshop

Make the starting circle for the corners ...
-  Start off with a new project in Photoshop. The size (H x W) of the project will depend on how large of an object you want to make. The standard resolution
   for web graphics is 72 dpi.
-  Using the Elliptical tool, make a circle with the radius you want for the corners. Use the Info window to see the size of the object.

Fill the circle with a color ...
-  Use the Paint Bucket tool to fill the area with a color different than that of the background.
   To select a color, you can click on the foreground and background color tool:

                  
                             The result:

Cut the circle into quarters ...
-  The object now is to copy a quarter of the circle.
-  Zoom in until you can clearly see the pixels of the circle, and determine where the center points are on the top and sides of the circle.

-  Use the Rectangular selection tool to select a quarter of the circle. Be as accurate as you can on on selecting the center sections.

-  Copy and then paste the selected area. This will make a new layer of that section. To see just that section, turn off visibilty of the main layer by clicking on the Eye Icon in the Layers Window.

-  Duplicate the layer with the quarter of the circle three times. As each new layer is created, move it away from the original.
-  Select the three new layers (one at a time), and using the Edit / Transform / Rotate controls, rotate each image to become one of the four corners.

-  Align the four corners so that they are level and even with each other.

-  Create a new layer to use for filling in the blank spaces.
-  In that new layer, use the Rectangular tool to begin filling in the blank areas. Using the Zoom tool can be helpful in getting the edges properly aligned.

-  Use the Paint Bucket tool to fill the area.
-  Use the same method to fill the remainder of the space.

Now to Combine the layers together to form a single object ...
-  Going back to the Eye Icon ... with one of the layers of the object selected, click on the little box to the right of the Eye Icon of all of the remaining layers.
   This will "link" the objects together.

-  Use the Layer / Merge Linked command from the menu to merge the layers together.
-  You now have a single object that can be moved around as a single item.

Some Tips
-  If you use the Magic Wand Tool, you can select the outline of the new object. Create a new layer, then use the existing outline to add the same item with
   a different color, etc.

-  To add effects, copy the outline of the object with the Magic Wand to a new layer that is the same color as the background. Then use the "Delete"
   command. You'll see a layer with all of the same color. Deselect the outline by clicking on it again with the Magic Wand tool.
-  With the new layer still selected, use the layer effects function (Right-Click / Blending Options in Photoshop 7), and select from the items available.
   Here's a quick item using the Drop Shadow tool:

-  Experiment with the settings to see what results you are able to achieve.

-  Once you have an area selected, you can also use the Select / Modify tool to change the size of the area selected.
-  Below is an area 10 pixels smaller (contracted) from the original outline.

-  Here's the same item with that inner (selected) area deleted:

Site Map