Vous êtes sur la page 1sur 10

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 Rabinowitzs What are Raster and Vector Graphics? video
tutorialpart of theMultimedia 101 series on the Creative COW
websiteprovides a general introduction to raster images and vector
To the top
About paths
Several features of After Effectsincluding masks, shapes, paint
strokes, and motion pathsrely 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 thedirection 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.

Components of a path
A. Selected vertex B. Selected vertex C. Unselected vertex D. Curved path
segment E. Direction line (tangent) F. Direction handle
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.

Points on a path
A. Four corner points B. Four smooth points C. Combination of corner and smooth
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 shapesincluding
polygons, ellipses, and starswith 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.)
You can link mask paths, paint stroke paths, and Bezier shape paths
using expressions. You can also copy and paste between mask paths,
paint stroke paths, Bezier shape paths, motion paths, and paths from
Adobe Illustrator, Photoshop, and Adobe Fireworks. (See Creating
shapes and masks.)
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.
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.
To the top
About shapes and shape layers
Shape layers contain vector graphics objects called shapes. By default,
a shape consists of a path, a stroke, and a fill. (See About
paths and Strokes and fills for shapes.)
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.
You can modify a shape path by applying path operations, such as
Wiggle Paths and Pucker & Bloat. You apply a stroke to a path or fill
the area defined by a path with color by applying paint operations.
(See Shape attributes, paint operations, and path operations for shape
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.)
The color bit depth of a shape layer is the same as the project as a
whole: 8, 16, or 32 bpc. (See Color depth and high dynamic range
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 cant open a shape layer in a Layer
panel, just as you cant open a text layer in a Layer panel.
You can save your favorite shapes as animation presets. (See Save an
animation preset.)
Online resources for shape layers
For a video tutorial introducing shape layers, visit the Adobe website.
Trish and Chris Meyer provide an introduction to shape layers in a PDF
excerpt from the Shape Layers chapter of their book Creating Motion
Graphics with After Effects (5th Edition). Trish and Chris Meyer also
provide a video introduction to shape layers on the ProVideo Coalition
websiteand tips about shape layers on the ProVideo Coalition website.
You can download additional animation presets that take advantage of
per-character 3D text animation from the After Effects Exchange on the
Adobe website.
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.
To the top
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 fillarranged from top to bottom in the Timeline
panelmuch 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 simultaneouslysuch 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 motionsuch 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. (SeeAbout shapes
and shape layers.)
Group shapes or shape attributes
Select one or more shapes or shape attributes, and do one of the
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).