• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. PATH TOOLS > Creating Basic Shapes

Creating Basic Shapes

There are four tools that allow you to quickly make a variety of basic shapes: rectangles, ellipses, polygons, stars, and straight lines.

Both the Rectangle tool and the Rounded Rectangle tool create rectangles, squares, and rounded-corner rectangles. One of the most common uses for these tools is to create the shapes for buttons and banners for your Web graphics.

To create a rectangle:

1.
Click the Rectangle tool in the Tools panel 1. If the Rectangle tool is not visible, press the triangle for the pop-up group in the Tools panel to choose the Rectangle tool.

Figure 1. The Rectangle tool and Rounded Rectangle tool in the Tools panel.


2.
Move the pointer to the Canvas area. The cursor changes to a plus sign (+) indicating that you can draw the rectangle.

3.
Press and drag diagonally from one corner to the other of the rectangle you want to draw.

Tip

Hold the Shift key as you press and drag to constrain the Rectangle tool into creating a square 2.

Figure 2. Holding the Shift key constrains the Rectangle tool to create a square. As long as you hold the Shift key down, the sides will remain equal.


Tip

Hold the Option/Alt key as you press and drag to draw from the center point outward.

4.
Release the mouse button to create the rectangle.

Rectangle or Rounded Rectangle?

All rectangles created by either the Rectangle tool or the Rounded Rectangle tool can have a roundness setting applied to them from the Object panel.

The Rounded Rectangle tool remembers the last setting of roundness. If you create a rectangle and change its roundness to 80, the next time you draw a Rounded Rectangle, its roundness will be 80. The Rectangle tool does not remember the roundness. If you set the roundness to 0, the next rectangle drawn by the Rounded Rectangle tool will be 30%—its default setting.


A rectangle with rounded corners is a very popular look for buttons and other interactive Web elements.

To create a rounded-corner rectangle:

1.
Use either the Rounded Rectangle or the Rectangle tool to create a rectangle as described in the previous exercise.

2.
Choose Window > Object to display the Object panel 3.

Figure 3. The Roundness slider lets you round the corners of a rectangle. You can also enter a precise number in the Roundness field.


3.
Use the Roundness slider to change the corners of the rectangle. The corners are rounded according to the percentage set for the corner radius 4.

Figure 4. Squares drawn with different percentages for the corner radius.


Tip

You can change the roundness interactively as you drag by pressing the up or down arrow keys on the keyboard.

Tip

You can select the rectangle and use the Object panel to change the roundness of the rectangle at any time as long as you don't ungroup the rectangle.

You can create ellipses, ovals, and circles using the Ellipse tool.

To create an ellipse:

1.
Click the Ellipse tool in the Tools panel 5. If the Ellipse tool is not visible, click the pop-up group to choose the Ellipse tool.

Figure 5. The ellipse tool in the tools panel.


2.
Move the pointer to the Canvas area.

3.
Press and drag a line that defines the diameter of the ellipse.

Tip

Hold the Shift key as you drag to constrain the ellipse into a circle.

Tip

Hold the Option/Alt key as you drag to draw from the center point outward.

4.
Release the mouse button to complete the ellipse.

You can use the Line tool to quickly create straight line segments.

To create a line:

1.
Click the Line tool in the Tools panel 6.

Figure 6. The Line tool in the Tools panel.


2.
Move the pointer to the Canvas area. The cursor changes to the plus sign.

3.
Drag to set the length and direction of the line.

Tip

Hold the Shift key to constrain the angle of the line to 45° increments 7.

Figure 7. The results of holding the Shift key while drawing with the Line tool.


4.
Release the mouse button to complete the line.

Polygons give your Web graphics a special look. The Polygon tool can create both polygons and stars.

To create a polygon:

1.
Click the Polygon tool in the Tools panel 8. If the Polygon tool is not visible, press the pop-up group to choose the Polygon tool.

Figure 8. The Polygon tool in the Tools panel.


2.
Double-click the Polygon tool to display the Polygon Options panel 9.

Figure 9. The Polygon tool Options panel.


3.
Choose Polygon from the pop-up list.

4.
Use the slider or enter a number from 1 to 360 in the field to set the number of sides for the polygon.

Tip

The more sides to the polygon, the closer it gets to a circle.

5.
Move the pointer to the Canvas area and press and drag. The point where you start the drag is the center of the polygon.

6.
Release the mouse button to create the polygon.

The same tool that you use to create polygons can be used to create stars. Stars with many points are sometimes called bursts and are useful for calling attention to special information.

To create a star:

1.
Click the Polygon tool in the Tools panel. If the Polygon tool is not visible, open the pop-up group to choose the Polygon tool.

2.
Double-click the Polygon tool in the Tools panel to display the Polygon tool Options panel.

3.
Choose Star from the pop-up list in the Polygon Options. This adds the Angle controls to the panel 10.

Figure 10. The Polygon tool set for the Star options.


4.
Use the slider or enter a number from 1 to 360 in the sides field to set the number of external points for the star.

5.
Check Automatic to create stars with parallel line segments 11.

Figure 11. The two black segments are parallel as a result of setting the star to Automatic.


or

Use the slider to set the angle of the points. Low settings create acute angles. High settings create obtuse angles 12.

Figure 12. Choose low angle values to create acute-angled stars with sharp points. Choose high angle values to create obtuse-angled stars with broad points.


  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint