Export (0) Print
Expand All

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.

Shapes category on the Assets panel

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 Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.40).png or Ellipse Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.40).png.

    tip noteTip

    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.

    Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(en-us,Expression.40).png

  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:

    Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,Expression.40).png
    tip noteTip

    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 noteTip

    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.

    Dd185502.84261e83-3091-4490-ab58-4218b188439e(en-us,Expression.40).png
  3. Save your changes (CTRL+S).

Next steps

To draw a path

  1. In the Tools panel, select one of the path tools: Pen Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.40).png or Pencil Dd185502.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.40).png.

    tip noteTip

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

    Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(en-us,Expression.40).png

  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 Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.40).png.

    Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(en-us,Expression.40).png

    To modify individual points on the path, click Direct Selection Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.40).png. 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.

    Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(en-us,Expression.40).png
  3. Save your changes (CTRL+S).

Next steps

To draw a line

  1. In the Tools panel, select Line Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(en-us,Expression.40).png.

    tip noteTip

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

    Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(en-us,Expression.40).png

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

    tip noteTip

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

    tip noteTip

    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 Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.40).png.

    To modify the starting or ending point of the line, click Direct Selection Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.40).png. 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

See also

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