about vector graphics and raster images

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  

Upload: fatieyhahraniesyasuffian

Post on 02-Jun-2018

234 views

Category:

Documents


0 download

TRANSCRIPT

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 1/10

About vector graphics and raster images

Vector graphics are made up of lines and curves defined bymathematical objects called vectors , which describe an imageaccording to its geometric characteristics. Examples of vector graphicselements within After Effects include mask paths, shapes on shapelayers, and text on text layers.

Raster images (sometimes called bitmap images ) use a rectangular gridof picture elements (pixels) to represent images. Each pixel is assigneda specific location and color value. Video footage, image sequencestransferred 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-independencemakes 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 aretherefore resolution-dependent. Raster images can lose detail andappear jagged ( pixelated ) if they are scaled up.

Example of a raster image at different levels of magnification

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 2/10

Some images are created as vector graphics in another application butare converted to pixels ( rasterized ) when they are imported into AfterEffects. If a layer is continuously rasterized, After Effects reconvertsthe 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?” videotutorial — part of th eMultimedia 101 series on the Creative COWwebsite — provides a general introduction to raster images and vectorgraphics.

To the top

About paths

Several features of After Effects — including masks, shapes, paintstrokes, and motion paths — rely on the concept of a path . Tools andtechniques 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 orcurves 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 directionhandles at the end of the direction lines (or tangents ) of each vertex, orthe path segment itself.

As a path exits a vertex, the angle and length of the outgoing directionline for that vertex determine the path. As the path approaches the nextvertex, the path is less influenced by the outgoing direction line of the

previous vertex and more influenced by the incoming direction line ofthe next vertex.

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 3/10

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; theincoming and outgoing direction lines are on the same line. At a corner

point , a path abruptly changes direction; the incoming and outgoingdirection lines are on different lines. You can draw a path using anycombination of corner and smooth points. If you draw the wrong kindof point, you can change it later.

Points on a path A. Four corner points B. Four smooth points C. Combination of corner and smooth

points

When you move a direction line for a smooth point, the curves on bothsides of the point adjust simultaneously. By contrast, when you move adirection line on a corner point, only the curve on the same side of the

point as the direction line is adjusted.

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 4/10

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 5/10

of a path for a shape layer object, the default is for a path to be createdwith a stroke property group (attribute) after the path property group inthe Timeline panel.

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

Note: To specify the size of Bezier direction handles and vertices for masksand shapes, choose Edit > Preferences > General (Windows) or After

Effects > Preferences > General (Mac OS), and edit the Path PointSize 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 theshape 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 definednumerically, by properties that you can modify and animate afterdrawing, in the Timeline panel. Bezier shape paths are defined by acollection of vertices (path points) and segments that you can modify inthe Composition panel. You work with Bezier shape paths in the sameway that you work with mask paths. All mask paths are Bezier paths.You can modify a shape path by applying path operations , such asWiggle Paths and Pucker & Bloat. You apply a stroke to a path or fillthe area defined by a path with color by applying paint operations .

(See Shape attributes, paint operations, and path operations for shapelayers .)Shape paths, paint operations, and path operations for shapes arecollectively called shape attributes . You add shape attributes using theAdd menu in the Tools panel or in the Timeline panel. Each shapeattribute is represented as a property group in the Timeline panel, with

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 6/10

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 awhole: 8, 16, or 32 bpc. (See Color depth and high dynamic range

color .)Shape layers are not based on footage items. Layers that are not basedon footage items are sometimes called synthetic layers. Text layers arealso synthetic layers and are also composed of vector graphics objects,so many of the rules and guidelines that apply to text layers also applyto 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.

You can save your favorite shapes as animation presets. (See Save ananimation 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 PDFexcerpt from the “Shape Layers” chapter of their book Creating MotionGraphics with After Effects (5th Edition) . Trish and Chris Meyer also

provide a video introduction to shape layers on the ProVideo Coalitionwebsite and 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 theAdobe website.Chris Zwar provides an animation preset on his website that creates atarget cross-hair using a single shape layer, with a wide variety ofcustom properties that make controlling and modifying the cross-hairanimation 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 singlestroke, and a single fill — arranged from top to bottom in the Timeline

panel — much of the power and flexibility of shape layers arises from

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 7/10

your ability to add and reorder shape attributes and create morecomplex compound shapes.

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

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

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

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 8/10

A. Two shapes in a group B. Two paths in a compound shape C. Circle path with Wiggle

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 9/10

Paths applied D. One stroke applied to all paths above it E. Star path in a group byitself 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 forrendering a composition that contains nested compositions:

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

All path operations within a group are performed before paint operations. Thismeans, for example, that the stroke follows thedistortions in the path made by the Wiggle

Paths path operation. Path operations within agroup are performed from top to bottom.(See Alter shapes with path operations .)

Paint operations within a group are performedfrom 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 PreviousIn Same Group for the Composite property ofthe fill or stroke in the Timeline panel.(See Strokes and fills for shapes .)

Path operations and paint operations apply to all paths above them inthe 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 propertygroup named Transform: [group name] and in the Composition panelas a dashed box with handles. You can group a path by itself andtransform only the path using its new Transform property group.Introducing an additional Transform property group for a single path isuseful, for example, for creating complex motion — such as spinning

8/10/2019 About Vector Graphics and Raster Images

http://slidepdf.com/reader/full/about-vector-graphics-and-raster-images 10/10

about one anchor point while also revolving along an orbit. Thetransformations of a group affect all shapes within the group; this

behavior is the same as the behavior of layer parenting. (See Parent andchild layers .)

Each shape path also has intrinsic properties that affect the position andshape of the path. For parametric shape paths, these properties (such asPosition and Size) are parameters visible in the Timeline panel. ForBezier shape paths, these properties are defined for each vertex but arecontained within the Path property. When you modify a Bezier pathusing the free-transform bounding box, you modify these intrinsic

properties for the vertices that constitute that path. (See About shapesand 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) orCommand+G (Mac OS).

When you group shapes, the anchor point for the group is placed in thecenter 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) orCommand+Shift+G (Mac OS).