About vector graphics and raster
images

Vector graphics are made up of lines and curves defined
by mathematical objects called vectors, which describe
an image according to its geometric characteristics. Examples of
vector graphics elements within After Effects include mask paths,
shapes on shape layers, and text on text layers.

Raster images (sometimes called bitmap images) use
a rectangular grid of picture elements (pixels) to represent images.
Each pixel is assigned a specific location and color value. Video
footage, image sequences transferred from film, and many other types
of images imported into After Effects are raster images.

Vector graphics maintain crisp edges and lose no detail when
resized, because they are resolution-independent. This resolution-independence
makes vector graphics a good choice for visual elements, such as
logos, that will be used at various sizes.

Example of a vector graphic at different levels of magnification

Raster images each consist of a fixed number of pixels, and are
therefore resolution-dependent. Raster images can lose detail and
appear jagged (pixelated) if they are scaled up.

Example of a raster image at different levels of magnification

Some images are created as vector graphics in another application
but are converted to pixels (rasterized) when they
are imported into After Effects. If a layer is continuously rasterized,
After Effects reconverts the vector graphics to pixels when the
layer is resized, preserving sharp edges. Vector graphics from SWF,
PDF, EPS, and Illustrator files can be continuously rasterized.

Aharon Rabinowitz’s “What are Raster and Vector Graphics?” video
tutorial—part of the Multimedia 101 series on the Creative
COW website—provides a general introduction to raster images and
vector graphics.

About paths

Several features of After Effects—including masks, shapes,
paint strokes, and motion paths—rely on the concept of a path.
Tools and techniques for creating and editing these various kinds
of paths overlap, but each kind of path has its own unique aspects.

A path consists of segments and vertices.
Segments are the lines or curves that connect vertices. Vertices
define where each segment of a path starts and ends. Some Adobe
applications use the terms anchor point and path
point to refer to a vertex.

You change the shape of a path by dragging its vertices, the direction
handles at the end of the direction lines (or tangents)
of each vertex, or the path segment itself.

As a path exits a vertex, the angle and length of the outgoing
direction line for that vertex determine the path. As the path approaches
the next vertex, the path is less influenced by the outgoing direction
line of the previous vertex and more influenced by the incoming
direction line of the next vertex.

Paths can have two kinds of vertices: corner points and smooth
points. At a smooth point, path segments are connected
as a smooth curve; the incoming and outgoing direction lines are
on the same line. At a corner point, a path abruptly changes
direction; the incoming and outgoing direction lines are on different lines.
You can draw a path using any combination of corner and smooth points.
If you draw the wrong kind of point, you can change it later.

When you move a direction line for a smooth point, the curves
on both sides of the point adjust simultaneously. By contrast, when
you move a direction line on a corner point, only the curve on the
same side of the point as the direction line is adjusted.

Adjusting the direction lines on a smooth point (left) and
a corner point (right)

A path can either be open or closed. An open path has a beginning point that is not the same as its end point; for example, a straight line is an open path. A closed path is continuous and has no beginning or end; for example, a circle is a closed path.

You can draw paths in common geometric shapes—including polygons, ellipses, and stars—with the shape tools, or you can use the Pen tool to draw an arbitrary path. Paths drawn with the Pen tool are either manual Bezier paths or RotoBezier paths. The main difference between RotoBezier and manual Bezier paths is that direction lines are calculated automatically for RotoBezier paths, making them easier and faster to draw.

When you use the shape tools (Rectangle, Rounded Rectangle, Ellipse, Polygon, or Star) to draw a shape path on a shape layer, you can create one of two kinds of paths: a parametric shape path or a Bezier shape path. (See About shapes and shape layers.)

For shape paths, you can use the Merge Paths path operation (similar to the Pathfinder effects in Adobe Illustrator) to combine multiple paths into one path. (See Merge Paths options.)

When you want text or an effect to follow a path, the path must be a mask path.

A path itself has no visual appearance in rendered output; it is essentially a collection of information about how to place or modify other visual elements. To make a path visible, you apply a stroke to it. In the case of a mask path, you can apply the Stroke effect. In the case of a path for a shape layer object, the default is for a path to be created with a stroke property group (attribute) after the path property group in the Timeline panel.

A color or gradient applied to the area inside the area bounded by a path is a fill.

Not:

To specify the size of Bezier direction handles and vertices
for masks and shapes, choose Edit > Preferences > General
(Windows) or After Effects > Preferences > General (Mac OS),
and edit the Path Point Size value.

About shapes and shape layers

You create shape layers by drawing in the Composition panel with the shape tools or the Pen tool. (See Creating shapes and masks.)

Shape paths have two varieties: parametric shape paths and Bezier shape paths. Parametric shape paths are defined numerically, by properties that you can modify and animate after drawing, in the Timeline panel. Bezier shape paths are defined by a collection of vertices (path points) and segments that you can modify in the Composition panel. You work with Bezier shape paths in the same way that you work with mask paths. All mask paths are Bezier paths.

Shape paths, paint operations, and path operations for shapes are collectively called shape attributes. You add shape attributes using the Add menu in the Tools panel or in the Timeline panel. Each shape attribute is represented as a property group in the Timeline panel, with properties that you can animate, just as you do with any other layer property. (See About animation, keyframes, and expressions.)

Shape layers are not based on footage items. Layers that are not based on footage items are sometimes called synthetic layers. Text layers are also synthetic layers and are also composed of vector graphics objects, so many of the rules and guidelines that apply to text layers also apply to shape layers. For example, you can’t open a shape layer in a Layer panel, just as you can’t open a text layer in a Layer panel.

Chris Zwar provides an animation preset on his website that creates a target cross-hair using a single shape layer, with a wide variety of custom properties that make controlling and modifying the cross-hair animation easy and obvious.

Groups and render order for shapes
and shape attributes

Though the default is for a shape to consist of a single
path, a single stroke, and a single fill—arranged from top to bottom
in the Timeline panel—much of the power and flexibility of shape
layers arises from your ability to add and reorder shape attributes
and create more complex compound shapes.

You can group shapes or shape attributes that are at the same
grouping level within a single shape layer.

A group is a collection of shape attributes: paths,
fills, strokes, path operations, and other groups. Each group has
its own blending mode and its own set of transform properties. By
assembling shapes into groups, you can work with multiple shapes
simultaneously—such as scaling all shapes in the group by the same
amount or applying the same stroke to each shape. You can even place individual
shapes or individual shape attributes within their own groups to isolate
transformations. For example, you can scale a path without scaling
its stroke by grouping the path by itself.

When you add a shape attribute using the Add menu in the Tools
panel or Timeline panel, the attribute is added within the group
that is selected. You can drag groups and attributes to reorder
them in the Timeline panel. By reordering and grouping shapes and
shape attributes, you can affect their rendering order with respect
to other shapes and shape attributes.

A. Two shapes in a group B. Two paths
in a compound shape C. Circle
path with Wiggle Paths applied D. One stroke
applied to all paths above it E. Star path
in a group by itself F. One fill
applied to all paths above it G. One path
with two strokes

Render order for shapes within a shape layer

The
rules for rendering a shape layer are similar to the rules for rendering
a composition that contains nested compositions:

Within a group, the shape at the bottom of the Timeline panel
stacking order is rendered first.

All path operations within a group are performed before paint
operations. This means, for example, that the stroke follows the
distortions in the path made by the Wiggle Paths path operation.
Path operations within a group are performed from top to bottom.
(See Alter
shapes with path operations.)

Paint operations within a group are performed from the bottom
to the top in the Timeline panel stacking order. This means, for
example, that a stroke is rendered on top of (in front of) a stroke
that appears after it in the Timeline panel. To override this default
behavior for a specific fill or stroke, choose Above Previous In
Same Group for the Composite property of the fill or stroke in the
Timeline panel. (See Strokes
and fills for shapes.)

Path operations
and paint operations apply to all paths above them in the same group.

Transform properties for shape groups and shape
paths

Each group has its own Transform property group. This Transform property group is represented in the Timeline panel with a property group named Transform: [group name] and in the Composition panel as a dashed box with handles. You can group a path by itself and transform only the path using its new Transform property group.

Introducing an additional Transform property group for a single path is useful, for example, for creating complex motion—such as spinning about one anchor point while also revolving along an orbit. The transformations of a group affect all shapes within the group; this behavior is the same as the behavior of layer parenting. (See Parent and child layers.)

Each shape path also has intrinsic properties that affect the position and shape of the path. For parametric shape paths, these properties (such as Position and Size) are parameters visible in the Timeline panel. For Bezier shape paths, these properties are defined for each vertex but are contained within the Path property. When you modify a Bezier path using the free-transform bounding box, you modify these intrinsic properties for the vertices that constitute that path. (See About shapes and shape layers.)

Group shapes or shape attributes

Select one or more shapes or shape attributes,
and do one of the following:

Choose Layer > Group Shapes.

Press Ctrl+G (Windows) or Command+G (Mac OS).

When you group shapes, the anchor point for the group
is placed in the center of the bounding box for the group.

Ungroup shapes or shape attributes

Select a single group, and do one of
the following:

Choose Layer > Ungroup Shapes.

Press Ctrl+Shift+G (Windows) or Command+Shift+G
(Mac OS).

Create an empty shape group

Choose Group (Empty) from the Add menu
in the Tools panel or in the Timeline panel.