Asset Preparation: Building Vectors, Organizing Files, and Naming for Animation

Why Asset Preparation Matters for Animation

Animation stays smooth and editable when your artwork is built to move: shapes are simple, parts are separated, pivots are intentional, and files are organized so you can find and update anything quickly. Poorly prepared assets cause common problems: jittery motion from messy paths, awkward rotations from wrong pivots, hard-to-edit “all-in-one” layers, and time lost hunting for the latest version.

Creating Simple Vector Shapes and Icons

Build from Basic Geometry

Start icons and graphic elements with primitive shapes (rectangles, circles, polygons). Primitives are predictable to animate because they have clean edges and fewer points. Keep shapes as editable vectors as long as possible (avoid flattening/rasterizing early).

• Use consistent corner logic: decide whether corners are sharp, rounded, or chamfered and apply consistently across the icon set.
• Prefer symmetry: mirror shapes instead of drawing both sides by hand to reduce point mismatch.
• Keep strokes intentional: if your animation tool treats strokes differently than fills, decide early whether the icon is stroke-based or fill-based and stick to it.

Boolean Operations (Combine, Subtract, Intersect)

Boolean operations let you build complex icons from simple shapes while keeping geometry clean. Typical operations include: Unite/Add (merge shapes), Minus Front/Subtract (cut holes), Intersect (keep overlap), and Exclude (remove overlap).

Step-by-step: Build a “Location Pin” Icon with Booleans

1. Create the outer pin: start with a circle for the top. Add a rotated square (diamond) beneath it to form the point.
2. Unite: use Unite/Add to merge the circle and diamond into one silhouette.
3. Create the hole: place a smaller circle centered in the top area.
4. Subtract: subtract the smaller circle from the silhouette to create a clean cutout.
5. Clean up: remove hidden shapes, confirm the final icon is a single clean path (or a small set of paths if needed).

This approach yields a minimal, editable icon that scales cleanly and animates predictably (e.g., bounce, squash, rotate).

Keep Paths Clean (Fewer Points, Smoother Curves)

Animation tools interpolate between points. Extra points create uneven easing, wobble, and artifacts during shape morphs. Aim for the fewest points that describe the form.

Continue in our app.

You can listen to the audiobook with the screen off, receive a free certificate for this course, and also have access to 5,000 other free online courses.

Or continue reading below...

Download the app

• Remove redundant points: if three points lie on a straight line, you usually only need two.
• Prefer smooth handles: for curves, use smooth points with balanced handles rather than many corner points.
• Avoid micro-segments: tiny segments can cause flicker when scaled or when motion blur is enabled.

Separating Elements into Animatable Parts

Think in “What Needs to Move?”

Before exporting or importing into your animation software, split artwork into logical parts that will transform independently. If something will rotate, scale, blink, or slide separately, it should be its own layer/group.

Common Separation Patterns

• Characters: head, torso, upper arm, forearm, hand, thigh, shin, foot; separate facial features (eyes, pupils, brows, mouth) for expression.
• Objects: lid vs. base, button vs. body, screen vs. bezel, wheels vs. chassis.
• UI elements: background card, icon, label text, highlight/underline, toggle knob vs. track.
• Text animations: separate by word, line, or letter when you need staggered timing or per-letter motion.

Step-by-step: Split a Simple “Envelope” Icon for Animation

1. Identify motions: the flap might open, the body might bounce, and a letter might slide out.
2. Create layers/groups: make separate groups for env_body, env_flap, and env_letter.
3. Ensure overlap: extend the flap slightly under the body edge so gaps don’t appear during rotation.
4. Check stacking order: flap should sit above the body when closed, but may need to go behind during opening—plan for this with duplicate layers or a precomp/group strategy.
5. Test transforms: rotate the flap and move the letter to confirm nothing breaks or reveals unwanted edges.

Separating Individual Letters (When Needed)

Only split text into letters when the animation requires it. Otherwise, keep text editable to avoid rework when copy changes.

• When to split: kinetic typography with per-letter offsets, wave motion, scatter, or custom reveals.
• When not to split: simple fades, slides, or scale-in where a single text layer is enough.
• Practical compromise: split by word for many typography animations—less setup than letters, more control than a single line.

Setting Anchor Points / Pivots Intentionally

Anchor Points Control Rotation and Scale Behavior

The anchor point (pivot) is where rotation and scaling originate. A correct pivot makes motion feel natural; a wrong pivot creates sliding, drifting, or “hinges” in the wrong place.

Typical Pivot Placements

• Hinges: doors, lids, flaps → pivot on the hinge edge.
• Wheels: pivot at exact center for clean spin.
• Arms/legs: pivot at joints (shoulder, elbow, hip, knee, ankle).
• UI toggles: pivot at the knob center if it scales, or at an edge if it swings.
• Text: pivot often at baseline-left for type-on/slide-in, or center for pop/bounce.

Step-by-step: Set a Flap Pivot for a Clean “Open” Animation

1. Select the flap layer/group.
2. Move the anchor point: place it on the flap’s fold line (the edge that should stay fixed).
3. Verify alignment: rotate 10–20 degrees and confirm the flap rotates without shifting away from the envelope body.
4. Adjust artwork overlap: if a gap appears, extend the flap under the body edge slightly.
5. Lock it in: once correct, avoid changing the flap’s internal geometry; edit the shape carefully so the pivot remains meaningful.

Parenting-Friendly Pivots

If you plan to parent layers (e.g., hand to forearm, forearm to upper arm), set pivots before parenting. This prevents unexpected offsets and reduces the need for corrective nulls or extra transform layers.

File Organization for Motion Graphics Projects

Recommended Folder Structure

A consistent structure prevents missing links, speeds up handoff, and makes renders reproducible.

project_root/ assets/   vectors/   images/   audio/   fonts/ comps_scenes/   scene_01/   scene_02/ renders/   previews/   finals/ exports/   delivery/   social_cuts/

• assets/: source artwork and media (keep originals here).
• comps_scenes/: working project files or scene-specific subprojects.
• renders/: output from the animation tool (previews and finals separated).
• exports/: client-ready deliverables, reformats, and platform variants.

Naming Conventions for Layers and Precomps

Names should describe function, not appearance alone. Good naming makes timelines searchable and reduces mistakes when duplicating or reusing parts.

• Use left/right suffixes: _L and _R (or _Left/_Right) consistently.
• Avoid spaces and special characters: underscores are safer across tools.
• Keep names stable: renaming after animation begins can break references in some pipelines.

Versioning (So You Can Always Go Back)

Versioning protects you from destructive edits and makes collaboration safer. Use incremental versions for project files and key assets.

• Project files: projectName_scene01_v001, projectName_scene01_v002
• Assets: icon_set_v003, char_main_v012
• Renders: include date or version: scene01_preview_v004_2026-01-21

Practical rule: increment the version when you make changes you wouldn’t want to redo (layout shifts, asset rebuilds, timing passes). Don’t overwrite finals—create a new version.

Practical Import-Readiness Checklist

Geometry and Paths

• Clean paths: remove unnecessary points; avoid tiny segments and accidental overlaps.
• Consistent direction: if your tool is sensitive to path direction for trims/morphs, keep similar shapes oriented consistently.
• No hidden clutter: delete unused shapes, guides, and stray points.

Scale and Consistency

• Consistent scale: icons and elements should share a common visual size and stroke weight (if stroke-based).
• Work at intended resolution: build vectors with the target frame size in mind so you’re not scaling everything 400% later.
• Pixel alignment (when needed): for UI-style graphics, align edges to whole pixels to reduce shimmer.

Layering and Grouping

• Grouped for predictable transforms: each animatable part is grouped so position/scale/rotation affects only what you expect.
• Logical hierarchy: parts nested under their parent (e.g., char_hand_L inside char_arm_forearm_L group).
• Overlap for motion: extend shapes under neighbors to avoid gaps during rotation or scaling.

Anchor Points / Pivots

• Pivots set before animation: hinges at edges, rotations at centers, joints at joints.
• Test transforms: rotate/scale each part slightly to confirm it behaves naturally.
• Consistent pivot logic: similar assets (all icons, all buttons) should share pivot conventions for reuse.

File and Naming Hygiene

• Folder structure in place: assets separated from working files and renders.
• Names are searchable: no “Layer 47” or “Group copy copy”.
• Versioned saves: increment versions before major edits and before sending to others.