Paths build shape using anchor points, bezier curves, and creation tools, while the animation of paths develops narrative. Custom shapes have editable paths to enable design and animation freedom.
To create a custom shape:
Convert a basic shape–double-click the layer and confirm the prompted conversion. Converting a shape removes shape-specific properties (i.e. width, height) and any associated keyframes. Therefore, it is best to convert a shape before animating it if you plan to make customizations.
Or, draw an original shape with the Pen tool.
Select the Pen Tool in the Toolbar.
Click anywhere on the canvas to create your first point.
Move the cursor and click to place your next point.
Click, hold, and drag for curved connections.
Click and drop for straight connections.
Repeat until all points are placed.
Click your first point to close the path.
Enterbefore returning to your first point to create an open path.
Each custom shape has the same set of controls on the Inspector. These can be found on the shape layer's properties panel under Layer Blend Mode and above Fill.
Corner Radius: Used to shape and animate rounded corners.
Edit Shape: Clicking icon allows you to further customize–adjust, draw, and animate paths in Edit Path mode.
In Edit Path mode, select the Pen tool to continue drawing. The Pen tool picks up from the last placed point or an open path's right point.
To draw from a specific point within a shape:
Click the point directly left-adjacent.
Select "Open path" in the properties panel.
Select the Pen tool.
Edit Path Mode
Edit Path mode lets you select, adjust, or change properties of individual points, lines, or entire shapes. When you're editing a layer, you can interact with the existing points and the lines between them. You can also use the Pen tool to plot additional points and manipulate those as well.
There are two ways to enter Edit Path mode:
With a layer selected, click the Edit Shape icon in your inspector.
Or, double-click the custom shape layer. Click on the paths circles to open Edit Path mode for each point.
To exit Edit Path mode, press
Enter, double-click the layer, or select "Done Editing".
1. Animating Paths
A keyframe placed in Edit Path mode marks the properties of every existing point on the path.
To create a path of animation:
Select a custom shape layer.
Select "Edit path" within the properties panel.
Click the diamond icon ◇ in the Edit Path properties panel to place keyframes along the Timeline.
Select a keyframe to:
Modify its path properties
Or, view the easing panel
2. Rounded Corners:
To be updated
3. Modify Path:
To be updated
4. Bézier Curves
To access a point's Bézier handles:
Click any point on the path so it is highlighted blue. If it is a curve, the handles will already be showing. If it is a corner with no handles, select "Add bezier" in the toolbar or hold ⌘
Controland click the point to show the handles and create a mirrored curve.
Click and drag the handles to adjust the path's curve.
To remove a bezier, hold ⌘
Controland click the point, or select "Remove bezier" in the properties panel.
5. Opening / Closing Paths
Opening and closing paths allow for precise editing and easy adjustment.
To open a path between two specific points, click the left point and select "Open path" in the properties panel.
To remove a point and open a path between its two neighboring points, click the point and press
To remove a point without opening the path, click the point and press "Remove points" within the properties panel.