Draw a shape or path in your project

You can draw shapes, paths, and controls to design the user interface of your application. Items that you draw become objects in your application.

You can also add a variety of common shapes such as rectangles, stars, rings, and arrows directly from the Assets panel by clicking Shapes, and then clicking the shape that you want. You can then resize the shape using the on-object handles that appear when you move the pointer over the corners of the blue bounding box of the shape.

For more information about adding or modifying objects on the artboard, see Add or modify an object.

To draw a shape

1. In the Tools panel, select one of the shape tools: Rectangle  or Ellipse .

   Tip

   To view all the drawing tools, right-click the tool that is visible in the Tools panel. The Line tool creates a path object, which is covered later in this topic.

   

2. On the artboard, draw the shape by dragging with your mouse.

   Notice that as you draw the shape, the width and height dimensions appear as follows:

   

   Tip

   Holding down SHIFT while you drag will keep the height and width the same. Doing this will produce a square when you draw a rectangle, or a circle when you draw an ellipse.

   Tip

   Holding down ALT while you drag will put the center point at the first point where you click, instead of making the top-left corner of the shape the first point that you click.

   After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the shape object. Your pointer changes to indicate which action you can perform, as shown in the following figure.

   

3. Save your changes (CTRL+S).

Next steps

• Apply a solid color or gradient brush to an object's fill or stroke

• Round the corners of a rectangle

• Convert a shape to a path

• Combine shapes or paths

• Make or release a compound path

• Apply, modify, or remove a clipping path

• Reposition or translate an object

To draw a path

1. In the Tools panel, select one of the path tools: Pen  or Pencil .

   Tip

   To view all the path tools, right-click the tool that is visible in the Tools panel.

   

2. On the artboard, draw a path by doing one of the following:

   • With the Pencil tool, drag on the artboard to produce a pixel everywhere that your pointer touches.

   • With the Pen tool, click the artboard to produce points (or vertices) that will make up a path object. Optionally, drag to produce curves at each point. To close the path, click the first point. To exit the Pen tool without closing the path, select another tool or select an object in the Objects and Timeline panel.

   After you finish drawing the path, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the path object. Your pointer changes to indicate which action you can perform with the Selection tool .

   

   To modify individual points on the path, click Direct Selection . The path object displays individual points and line segments that you can click and move.

   For a list of ways to modify paths, see Pen tool modifier keys and Direct Selection tool modifier keys.

   

3. Save your changes (CTRL+S).

Next steps

• Apply a solid color or gradient brush to an object's fill or stroke

• Draw a straight line

• Draw a curve

• Draw a free-form path

• Delete part of a path

• Add or remove a point on a path

• Change the shape of a curve

• Convert a shape to a path

• Combine shapes or paths

• Make or release a compound path

• Apply, modify, or remove a clipping path

• Reposition or translate an object

• Animate the points on a path or clipping path

To draw a line

1. In the Tools panel, select Line .

   Tip

   If you can't see the Line tool, right-click the tool container in the Tools panel, and then select the Line tool.

   

2. On the artboard, draw the line by dragging with your mouse.

   Tip

   Holding down SHIFT while you drag will constrain the line to angles that are multiples of 15 degrees.

   Tip

   Holding down ALT while you drag will make the first point that you click the center point, instead of making the middle of the line the center point.

   After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform. Your pointer changes to indicate which action you can perform with the Selection tool .

   To modify the starting or ending point of the line, click Direct Selection . The line, which is a path object, displays individual points that you can click and move.

   For a list of ways to modify paths, see Pen tool modifier keys and Direct Selection tool modifier keys.

3. Save your changes (CTRL+S).

Next steps

• Add or remove a point on a path

• Change the shape of a curve

• Reposition or translate an object

• Animate the points on a path or clipping path

See also

Tasks

Draw a control in your project

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.