ANIMATION NOTES (VOC)

UNIT 1
 Introduc on to 2D Anima on: Basic of sketching, s ll life and assignment of basic
drawing, Composi on of basic elements,

 Introduc on to 2D Anima on
1. Meaning of 2D Anima on
 Defini on:
2D Anima on is the art of crea ng movement in a two-dimensional space, where characters, objects, and
backgrounds exist only in height and width (no depth).
It is one of the earliest forms of anima on, used in tradi onal cartoons, adver sements, and educa onal
videos.
 Key Idea:
Anima on means bringing life to s ll images. In 2D, this is achieved by sequencing mul ple hand-drawn or
digitally created images to create the illusion of mo on.
 Applica ons:
o Entertainment industry (cartoons, anime, movies)
o Adver sing and marke ng
o Educa onal anima ons
o Web & game graphics

2. Basics of Sketching
What is Sketching?
Sketching is the founda on of all drawing and anima on. It is the raw, quick representa on of an idea,
focusing on propor ons, shapes, and movement rather than detailed perfec on.
Importance in Anima on:
 Helps capture ideas quickly.
 Forms the blueprint for characters, props, and backgrounds.
 Improves observa on skills (animators must no ce posture, balance, and gesture).
 Trains the eye-hand coordina on essen al for fluid anima on.
Types of Sketches in Anima on:
1. Gesture Drawing – Fast sketches capturing the movement or ac on.
2. Contour Sketching – Outlining shapes with smooth lines.
3. Structural Sketching – Breaking down complex objects into simple geometric forms.
4. Value Sketching – Using light and shade to give volume.

3. S ll Life Drawing
What is S ll Life?
S ll life is the prac ce of drawing inanimate objects arranged in a composi on, such as fruits, vases, bo les, or
furniture.
Why S ll Life in Anima on?
 Trains the animator to see shapes, light, and propor ons correctly.
 Develops pa ence and a en on to detail.
 Improves shading and texturing skills.
  Builds understanding of perspec ve and depth (which even in 2D must be suggested through light and
composi on).
Techniques:
1. Observa on First: Study the subject carefully before star ng.
2. Basic Shapes: Reduce objects to spheres, cubes, cones, and cylinders.
3. Outline: Use light strokes for structure.
4. Shading: Iden fy the light source; add highlights and shadows.
5. Detailing: Refine textures and minor features.

4. Assignment of Basic Drawing

Assignments are prac ce tasks given to students to strengthen drawing fundamentals.
In anima on, such assignments prepare you for complex tasks like character design and mo on.
Common Assignments:
 Drawing lines, curves, and geometric pa erns for hand control.
 Copying simple shapes and gradually moving to complex figures.
 Sketching human anatomy (face, hands, torso, movement).
 Drawing natural objects (trees, rocks, landscapes).
 Replica ng classical anima on poses (jumping, si ng, running).

5. Composi on of Basic Elements

What is Composi on?
Composi on is the arrangement of visual elements (shapes, colors, objects, characters) in a frame to make it
appealing, balanced, and communica ve.
Elements of Composi on:
1. Line – Guides the eye; can suggest mo on or emo on.
2. Shape – Organic vs. geometric; builds structure.
3. Form – 3D sugges on in 2D space (through shading).
4. Color – Conveys mood and atmosphere.
5. Texture – Surface quality (smooth, rough).
6. Space – Posi ve (objects) and nega ve (background).
7. Value – Light and dark areas to create focus.
Principles of Composi on:
 Balance: Symmetrical or asymmetrical distribu on.
 Contrast: Use of differences (light/dark, big/small).
 Rhythm & Movement: Repe on that leads the eye.
 Emphasis (Focus): Highligh ng the main subject.
 Unity: All elements should feel part of one whole.
Applica on in Anima on:
 Deciding how a character is placed in the scene.
 Direc ng the viewer’s a en on to the important ac on.
 Designing backgrounds that support (not distract from) the story.

6. Why These Basics Ma er in Anima on

 Without sketching, animators cannot express ideas quickly.
 Without s ll life, they miss realism in propor ons and ligh ng.
 Without basic drawing assignments, hand-eye discipline is weak.
 Without composi on knowledge, anima ons look flat and unappealing.
This founda on is what separates amateur anima on from professional storytelling.
 Crea ng Digital Layout, Working with visual images, Paint & animate (scanning, tracing,
ink & Paint).

1. What is a Digital Layout?

 Defini on:
A digital layout is the arrangement of text, images, colors, and design elements on a digital canvas using
so ware (like Photoshop, Illustrator, or CorelDRAW). It is the blueprint of a design or anima on scene,
deciding how content appears visually.
 Importance in Anima on & Design:
o Provides structure to visual storytelling.
o Ensures balance, readability, and aesthe c appeal.
o Acts as the founda on for anima on backgrounds, posters, ads, and scenes.
o Helps in visual hierarchy (deciding what the audience sees first).

2. Key Principles of a Good Layout

1. Hierarchy: Important elements (like main character) must stand out.
2. Alignment: Everything should be placed logically (grid-based design).
3. Balance: Symmetrical or asymmetrical placement to avoid clu er.
4. Contrast: Use differences in size, color, and shape to highlight.
5. White Space: Empty areas give breathing space and focus.
6. Consistency: Same style, font, and spacing throughout.

3. Steps for Crea ng a Digital Layout

Here is a step-by-step workflow (exam-style answer):
1. Understand the Purpose
o Is it for anima on background, poster, website, or storyboard?
o Example: An anima on scene layout needs more focus on character space, while an ad layout
needs strong typography.
2. Decide Canvas Size & Resolu on
o Standard (1920x1080 pixels, 72 dpi for screen, 300 dpi for print).
o Choose color mode: RGB (digital) or CMYK (print).
3. Set Up a Grid or Guide
o Grids help maintain alignment.
o Example: Rule of thirds (dividing frame into 3x3 for balance).
4. Add Background Elements
o Solid colors, textures, or images.
o Should support, not overpower, the main subject.
5. Place Visual Elements (Images, Text, Characters)
o Follow hierarchy: tle > main image > suppor ng text > decora ve elements.
o Maintain balance and contrast.
6. Apply Typography (if needed)
o Choose readable fonts.
o Limit to 2-3 font styles.
7. Check Color Scheme
o Use color theory (complementary, analogous).
o Example: Warm colors for energy, cool colors for calm mood.
8. Refine & Review
o Adjust spacing, alignment, and contrast.
 o Make sure the layout communicates clearly.
9. Export Final Layout
o Save in editable format (.PSD, .AI, .CDR).
o Export to required output (.JPEG, .PNG, .PDF).

4. Working with Visual Images

Visual images are photographs, drawings, or illustra ons used in digital design/anima on. They are the core
storytelling elements.
Why Important?
 Images create emo onal connec on.
 They carry visual weight in composi on.
 In anima on, they define characters, backgrounds, and props.

5. Steps for Working with Images

Here’s a clear step-by-step workflow (can be directly wri en in exams):
Step 1: Import / Insert Image
 Open your so ware (Photoshop, Illustrator, CorelDRAW).
 Use File → Import/Open to bring an image onto the canvas.
Step 2: Organize Image Layers
 Place each image on a separate layer.
 Rename layers (e.g., “Background,” “Character,” “Logo”).
Step 3: Adjust Size & Posi on
 Use Transform Tools (Ctrl+T in Photoshop).
 Maintain aspect ra o while resizing.
 Posi on according to layout balance.
Step 4: Crop & Clean Up
 Use Crop Tool to remove unwanted areas.
 Use Eraser / Masking to blend images smoothly.
Step 5: Adjust Image Quality
 Brightness/Contrast
 Levels/Curves for tone
 Color Balance for mood
Step 6: Apply Filters & Effects
 Blur for background focus.
 Sharpen for details.
 Ar s c filters for unique styles.
Step 7: Combine Mul ple Images (if needed)
 Use clipping masks to blend textures.
 Experiment with opacity and blending modes.
Step 8: Save & Export
 Save editable version (.PSD, .AI).
 Export final image in required format (.JPG for web, .PNG for transparent, .TIFF for high quality).
Paint & Animate (Scanning, Tracing, Ink & Paint)
1. What is Paint & Animate?
 Paint & Animate is the process of taking hand-drawn sketches (tradi onal drawings), cleaning them up
digitally, applying ink and colors, and finally preparing them for anima on.
 It is the bridge between raw drawings and final animated frames.

2. Scanning
  Defini on: Conver ng hand-drawn sketches into digital form using a scanner or camera.
 Purpose: To digi ze rough paper drawings so they can be edited and animated on a computer.
 Steps:
1. Place drawings on a flatbed scanner.
2. Scan at 300–600 dpi for clarity.
3. Save as TIFF/PNG (lossless quality).
4. Import into anima on so ware (e.g., Toon Boom, Adobe Animate).

3. Tracing
 Defini on: Redrawing the scanned sketches digitally to clean up rough lines.
 Purpose: To create smooth, consistent outlines for anima on.
 Tools:
o Digital tablets (Wacom, iPad with stylus).
o So ware: Adobe Animate, Toon Boom, Krita.
Steps:
3. Import scanned image.
4. Lower opacity of sketch.
5. Trace using digital pen/brush tool.
6. Create neat line art ready for inking.

4. Ink
 Defini on: Final clean outline of the drawing with uniform, smooth strokes.
 Purpose: To give professional clarity and prepare for coloring.
 Techniques:
o Use vector tools for sharp lines.
o Vary line thickness (thick outlines for characters, thin lines for details).

5. Paint
 Defini on: Filling color into the inked drawings.
 Purpose: To add life, mood, and personality to characters/objects.

Steps:
1. Choose a color pale e.
2. Fill closed areas with base colors.
3. Add shading, highlights, and textures.
4. Keep consistency across frames.

Unit 2
 Drawing concept, Work in different media, such as drawing, collage, and pain ng.

1. Introduc on: Drawing in Anima on & Design

 Defini on: Drawing is the visual language of ideas. It converts imagina on into visible form using lines,
shapes, and shades.
 In anima on, drawing is the first step of storytelling: character design, background crea on,
storyboarding, and scene planning.
 Without drawing, anima on becomes mechanical — drawing provides life, expression, and style.
2. Drawing Concept
A. Meaning
 “Drawing Concept” refers to the basic principles, methods, and crea ve understanding behind making
drawings.
 It’s not just copying reality; it’s about interpre ng and simplifying objects into clear visual forms.
B. Key Concepts in Drawing:
1. Line: Founda on of drawing (straight, curved, thick, thin).
2. Shape: 2D area defined by lines (circle, square, organic).
3. Form: Crea ng 3D effect on 2D surface (cube, sphere).
4. Propor on: Correct size rela on among objects.
5. Perspec ve: Crea ng depth (one-point, two-point perspec ve).
6. Value: Light and dark tones that create volume.
7. Texture: Surface feel (rough, smooth, pa erned).
8. Composi on: Arrangement of elements for balance and clarity.

3. Working in Different Media

Ar sts and animators use mul ple media (materials and techniques) to develop crea vity, flexibility, and
unique styles.
A. Drawing as a Medium
 Defini on: Using pencil, charcoal, ink, or pen to make sketches and line drawings.
 Tools: Graphite pencils, charcoal s cks, ink pens, digital stylus.
 Advantages:
o Quick to produce.
o Best for prac ce (gesture, anatomy).
o Easy to correct (eraser/digital undo).
 Uses in Anima on:
o Character sketches.
o Storyboard frames.
o Rough anima on poses.

B. Collage as a Medium
 Defini on: Art technique of assembling cut-out pieces of paper, photos, fabric, or textures onto a
surface to create a new composi on.
 Origin: Comes from French word coller (to glue).
 Tools: Paper, glue, scissors, magazines, digital collage so ware.
 Advantages:
o Encourages experimenta on.
o Creates abstract, layered visuals.
o Useful for mixed-media backgrounds in anima on.
 Uses in Anima on & Design:
o Title sequences with cut-out style (e.g., Monty Python anima ons).
o Mixed media adver sements.
o Conceptual artwork.

C. Pain ng as a Medium
 Defini on: Applica on of colors (watercolor, acrylic, oil, digital) to a surface for expressive, realis c, or
stylized visuals.
 Tools: Brushes, paints, canvas, or digital tablets (Photoshop, Krita).
  Advantages:
o Adds depth and richness of color.
o Allows blending, shading, and mood crea on.
o Useful for background design and concept art.
 Types:
o Tradi onal: Watercolor (so , transparent), Acrylic (fast, vibrant), Oil (rich, slow-drying).
o Digital: Photoshop, Procreate, Corel Painter.
 Uses in Anima on:
o Backgrounds in films (Disney classics used hand-painted backgrounds).
o Ma e pain ngs for cinema c scenes.
o Color keys for atmosphere.

4. Compara ve Study of Media

Medium Tools & Material Strengths Limita ons Use in Anima on
Pencil, charcoal, Character sketches,
Drawing Quick, versa le, precise Limited in color
pen storyboards
Paper, fabric, Crea ve, abstract, Can look messy if not Cut-out anima ons, visual
Collage
photos experimental planned concepts
Brush, paint, Time-consuming, Backgrounds, concept art,
Pain ng Rich, expressive, realis c
digital requires skill color design

6. Applica ons in Anima on Industry

 Drawing: Disney’s tradi onal 2D anima ons (e.g., Snow White, Lion King).
 Collage: Terry Gilliam’s cut-out anima ons.
 Pain ng: Studio Ghibli’s hand-painted backgrounds (Spirited Away).

 Professional image edi ng (PHOTOSHOP) and right step, what is Story Boarding,
Understanding Background composi on.

1. Professional Image Edi ng (Photoshop)

A. Introduc on
 Defini on: Professional image edi ng refers to the process of enhancing, retouching, manipula ng, and
op mizing digital images using advanced tools like Adobe Photoshop.
 Purpose: To make images visually appealing, correct flaws, and prepare them for print, anima on,
films, or adver sing.

B. Features of Photoshop Useful for Anima on & Design

1. Layers: Work with mul ple elements separately.
2. Selec on Tools: Magic wand, lasso, quick selec on.
3. Adjustment Tools: Brightness, contrast, levels, curves.
4. Filters & Effects: Sharpen, blur, ar s c filters.
5. Retouching Tools: Healing brush, clone stamp.
6. Text & Shape Tools: For tles and cap ons.
7. Smart Objects: Non-destruc ve edi ng.

C. Steps for Professional Image Edi ng (Exam-Style)

1. Import Image
 o File → Open → Select image.
o Duplicate the original layer (non-destruc ve edi ng).
2. Crop & Straighten
o Use Crop Tool to adjust framing.
o Straighten lted images.
3. Correct Colors & Exposure
o Image → Adjustments → Levels / Curves.
o Fix white balance and ligh ng.
4. Retouch & Clean Up
o Healing Brush for spots.
o Clone Stamp for unwanted areas.
5. Enhance Details
o Sharpen edges slightly.
o Apply filters carefully.
6. Work with Layers
o Add background replacement.
o Adjust opacity & blending modes.
7. Add Text / Graphics (if required)
o Titles, watermarks, cap ons.
8. Final Check & Export
o Save as PSD (editable).
o Export to JPEG/PNG/TIFF depending on use.

2. Storyboarding
A. Defini on
 A storyboard is a sequence of drawings/frames arranged in order to visualize a story before anima on
or film produc on.
 It is like a comic strip version of a movie/anima on, showing camera angles, ac ons, dialogues, and
scene transi ons.
B. Importance in Anima on
 Acts as a blueprint of the film/anima on.
 Saves me and cost by detec ng problems early.
 Helps directors, animators, and designers stay on the same vision.
 Communicates ideas clearly to the team.

C. Steps in Storyboarding
1. Script Breakdown
o Read script → Iden fy key scenes.
2. Create Frames
o Use paper or so ware (Toon Boom Storyboard Pro, Photoshop).
3. Draw Ac on & Characters
o Simple sketches showing character posi ons and movements.
4. Add Notes
o Dialogue, sound effects, or camera movements.
5. Sequence & Timing
o Arrange frames in order.
o Decide dura on of each shot.
6. Review & Revise
o Show to director/team → Edit if necessary.
3. Understanding Background Composi on
A. Defini on
 Background composi on refers to the arrangement of visual elements in the environment or se ng
where characters and ac ons take place in anima on.
 It gives context, depth, and mood to the scene.

B. Role of Background in Anima on

 Creates atmosphere (happy, sad, suspenseful).
 Provides scale and depth (mountains vs. cityscape).
 Guides viewer’s focus (foreground vs. background).
 Complements the ac on (not overpowering characters).

C. Principles of Background Composi on

1. Rule of Thirds: Divide frame into 3x3 grid → place main elements at intersec ons.
2. Foreground, Middleground, Background: Layering creates depth.
3. Perspec ve: One-point, two-point, or aerial perspec ve.
4. Balance: Symmetry or asymmetry depending on mood.
5. Color & Ligh ng: Warm colors = energy, cool colors = calmness.
6. Nega ve Space: Empty areas to highlight the subject.

D. Steps for Designing Backgrounds

1. Understand Scene Requirement
o Indoor, outdoor, fantasy, realis c?
2. Sketch Rough Composi on
o Place horizon line, vanishing points.
3. Add Major Elements
o Buildings, trees, props, furniture.
4. Refine with Details
o Textures, light sources, shadows.
5. Color & Mood Se ng
o Use pale e matching the story.
6. Test with Characters
o Place characters in background to check readability.

UNIT 3
 Colour theory & basics, Explore the rela onship between elements and principal.

1. Introduc on to Colour Theory

Colour theory is the science and art of using colours. It explains how colours interact, how they can be
combined, and what effects they create in visual composi ons. Ar sts, animators, and designers use colour
theory to evoke emo ons, set mood, guide viewers’ a en on, and create harmony.

In 2D anima on, colour choices directly affect how characters, backgrounds, and emo ons are perceived.
For example, warm colours (red, orange, yellow) can convey energy or danger, while cool colours (blue,
green, violet) can show calmness or sadness.
2. Basics of Colour Theory

(a) Primary Colours

 Red, Blue, Yellow → These cannot be created by mixing other colours.
 They are the founda on of all other colours.
(b) Secondary Colours
 Green, Orange, Purple → Created by mixing two primaries.
o Red + Blue = Purple
o Blue + Yellow = Green
o Red + Yellow = Orange
(c) Ter ary Colours
 Made by mixing a primary with a secondary.
 Example: Red + Orange = Red-Orange
(d) Colour Wheel
 A circular diagram that shows the rela onship between colours.
 Developed by Sir Isaac Newton (1666).
 It helps in iden fying complementary, analogous, and triadic colour schemes.
Tool: Adobe Color Wheel

3. Colour Proper es
1. Hue → The name of the colour (red, blue, green).
2. Value → The lightness or darkness of a colour.
3. Satura on (Intensity) → The purity of the colour (bright vs dull).

4. Colour Harmonies (Schemes)

1. Monochroma c → One colour + its nts & shades. (Calm, unified look).
2. Complementary → Opposite colours on the wheel (red-green, blue-orange). Creates strong contrast.
3. Analogous → Colours next to each other on the wheel (blue, blue-green, green). Feels natural and
harmonious.
4. Triadic → Three evenly spaced colours (red-yellow-blue). Balanced but vibrant.
5. Split Complementary → A base colour + two adjacent to its complement.
6. Tetradic (Double Complementary) → Two complementary pairs.

5. Colour Psychology in Anima on

 Red → Energy, passion, aggression.
 Blue → Trust, sadness, calmness.
 Yellow → Happiness, crea vity, warmth.
 Green → Growth, freshness, safety.
 Black → Mystery, elegance, evil.
 White → Purity, simplicity, peace.

6. Rela onship Between Elements & Principles of Design

Elements of Design (Building Blocks)
1. Line – Defines shape and direc on.
2. Shape – Geometric or organic forms.
3. Colour – Hue, value, satura on.
4. Texture – Surface quality (smooth/rough).
5. Space – Posi ve & nega ve areas.
6. Form – 3D representa on.
 7. Value – Lightness/darkness.

Principles of Design (How to Use Elements)

1. Balance – Equal distribu on (symmetrical/asymmetrical).
2. Contrast – Difference in colour, size, shape.
3. Emphasis – Focus on the main subject.
4. Movement – Leads the viewer’s eye.
5. Rhythm – Repe on to create flow.
6. Unity/Harmony – Elements working together.
7. Propor on/Scale – Rela onship between sizes.

7. Steps for Applying Colour Theory in Anima on

1. Iden fy mood/goal → Decide what feeling the scene should convey.
2. Select base pale e → Use colour wheel to choose schemes.
3. Apply hierarchy → Stronger colours for focus, muted tones for background.
4. Check harmony/contrast → Ensure readability and mood alignment.
5. Test with audience → Some mes cultural meaning differs (e.g., white = purity in West, mourning in
India

 Adver sing and relevant case ,Graphics and illustra on (Corel Draw, Paint).

1. Introduc on to Adver sing

Adver sing is a form of communica on designed to persuade an audience to take ac on, usually to buy a
product, service, or idea. In the context of anima on and design, adver sing becomes more visual,
crea ve, and storytelling-driven.
 Purpose of adver sing:
o Create awareness
o Influence consumer behavior
o Build a brand image
o Communicate key product values
o Drive sales
 Forms of adver sing:
o Print media (newspapers, magazines, posters, brochures)
o Digital media (social media ads, banner ads, YouTube commercials)
o Television & cinema ads (animated commercials are popular here)
o Outdoor adver sing (billboards, hoardings, kiosks, transit ads)

2. Relevant Case Studies in Adver sing

Studying real-world cases helps understand how graphics, anima on, and illustra on support brand
communica on.
Case 1: Amul Adver sing (India)
 Known for wi y illustrated cartoons.
 Uses simple sketches + clever cap ons.
 Graphics are minimal but impac ul.
Lesson: Simple illustra ons can become a brand iden ty if consistently used.
Case 2: Coca-Cola Campaigns
 Uses bright colors (red, white) and vector illustra ons.
 Storytelling through characters (e.g., Santa Claus ads, friendship ads).
  Strong focus on emo ons and culture.
Lesson: Visual consistency + emo onal graphics = global recogni on.
Case 3: Apple Adver sements
 Minimal design, clean typography, strong visuals.
 O en uses black & white contrast with high-quality product images.

3. Graphics in Adver sing

Graphics are the visual founda on of adver sing. They make the ad eye-catching, memorable, and
effec ve.
 Role of graphics:
o A ract a en on (through colors, layout, images).
o Explain ideas visually.
o Support brand iden ty (logos, mascots, typography).
o Create emo onal appeal.
 Elements of graphics:
o Lines, shapes, colors, textures.
o Typography (fonts must match the brand tone).
o Layout and balance (rule of thirds, symmetry, hierarchy).
 Graphic so ware for adver sing:
o CorelDRAW – for vector graphics, logos, posters, print ads.
o Adobe Photoshop – for photo edi ng, color correc on, realis c ad designs.
o Paint / MS Paint – for beginners, to understand basic digital sketching.

4. Illustra on in Adver sing

Illustra on is the art of drawing or crea ng images that explain, decorate, or communicate a message.
 Why illustra ons are used:
o Make ads unique and memorable.
o Can simplify complex concepts.
o Create emo onal connec ons (cartoons, mascots).
o Give a hand-cra ed, ar s c look compared to stock photos.
 Types of illustra ons in adver sing:
o Cartoon illustra ons (Amul Girl ads).
o Character design (brand mascots like Vodafone ZooZoos).
o Vector illustra ons (clean, digital art in CorelDRAW).
o Collage-style art (mix of photos and sketches).

5. CorelDRAW in Graphics and Illustra on

CorelDRAW is one of the most powerful vector graphic so ware tools used in adver sing.
 Features useful for adver sing:
o Logo design
o Brochures and flyers
o Posters and banners
o Typography design
o Vector illustra ons (scalable without losing quality)
 Steps in using CorelDRAW for ads:
1. Open a new document (choose size e.g., A4 for print, custom for digital).
2. Create basic layout (use guidelines, grids).
3. Insert elements (text, shapes, imported images).
4. Apply color schemes (use brand colors or color theory).
5. Add typography (choose readable, a rac ve fonts).
6. Refine & export (JPEG, PNG, PDF for final use).

6. Paint (MS Paint / Paint Tool) in Illustra on

Though basic compared to CorelDRAW, Paint is useful for beginners and small projects.
 Uses in adver sing basics:
o Digital sketching.
o Rough illustra on dra s.
o Simple banners or posters.
o Pixel edi ng.
 Limita ons:
o No vector support.
o Limited color & tool op ons.
o Not suitable for professional large-scale projects.
7. Conclusion
Adver sing today is incomplete without graphics and illustra ons. So ware like CorelDRAW and Paint play
a vital role in designing campaigns, from logos to posters to social media graphics. By studying real-world
ad cases, students can understand how to effec vely use design principles and tools to create ads that are
not only beau ful but also persuasive.

 Titles and Credit Making, Basic Understanding of 2D anima on and technique.

1.1 What are Titles in Anima on?

 Titles are the introductory text or graphics that appear at the beginning of an anima on, film, or video.
 They o en include:
o Name of the project
o Director, producer, or animator’s name
o Studio or company informa on
o Some mes thema c visuals to set the mood.
 Titles serve as the first impression for the audience, giving them a sense of style, tone, and
professionalism.
1.2 Importance of Titles
1. Iden ty Crea on → Helps establish the brand or theme of the project.
2. A racts Audience → Engaging tles grab a en on and create curiosity.
3. Sets the Tone → Comedy, horror, educa onal, or ar s c feel can be established with tle design.
4. Professional Presenta on → Without a tle, the work looks incomplete.
1.3 Techniques in Title Design
 Typography → Selec on of fonts, size, and style to match the theme.
 Mo on Graphics → Adding animated effects like fading, sliding, zooming.
  Color Choices → Dark colors for serious mood, bright colors for fun themes.
 Audio Sync → Background music or sound effects enhance the appeal.
1.4 Credit Making in Anima on
 Credits appear at the end (or some mes beginning) of an anima on.
 They acknowledge the people involved in the produc on process.
Credits usually include:
1. Director / Producer
2. Script Writer
3. Animators / Designers
4. Voice Ar sts
5. Editors
6. So ware used / Tools
7. Music or sound credits
8. Sponsors (if any)
1.5 Importance of Credits
 Acknowledgement → Recognizing contribu ons of each person.
 Legal Reasons → Copyright and licensing informa on.
 Professionalism → Makes the project complete and industry-standard.
1.6 Steps for Title & Credit Making
1. Write down the required informa on.
2. Choose a consistent design style.
3. Select typography and colors matching the theme.
4. Use so ware (A er Effects, Photoshop, CorelDraw, Premiere Pro).
5. Apply mo on and transi on effects.
6. Place tles at the beginning, credits at the end.
7. Test readability (not too fast or too small).

2. Basic Understanding of 2D Anima on

2.1 Defini on
2D anima on is the art of crea ng movement in a two-dimensional space. It includes characters,
backgrounds, and objects that are created in a flat (2D) environment.
2.2 Core Idea
  Based on the principle of showing a sequence of drawings or images rapidly, crea ng the illusion of
mo on.
 Usually runs at 12–24 frames per second.
2.3 Need for 2D Anima on
 Entertainment (cartoons, films).
 Educa on (animated learning videos).
 Adver sing (product promo on).
 Games (character movements).
 Social media content crea on.

3. Techniques of 2D Anima on
3.1 Tradi onal Anima on
 Oldest method.
 Every frame is hand-drawn on paper.
 Then photographed and played in sequence.
 Example → Disney’s early films like Snow White.
3.2 Digital 2D Anima on
 Modern method using so ware (Flash, Toon Boom, Adobe Animate).
 More flexible and less me-consuming.
 Allows layering, edi ng, and reusing assets.
3.3 Cut-out Anima on
 Using pre-drawn parts (like paper dolls).
 Movement is created by rearranging cut pieces.
 Example → South Park (early seasons).
3.4 Rotoscoping
 Tracing over live-ac on footage to create realis c movement.
 Used for special effects or realis c character mo on.
3.5 Mo on Graphics
 Focuses more on animated text, logos, and graphics than characters.
 Common in adver sing and tle sequences.
3.6 Stop Mo on (2D Style)
 Objects are photographed frame by frame, then slightly moved.
  Though mostly 3D, flat objects like paper cut-outs can make 2D stop mo on.

4. Principles of 2D Anima on
(Adapted from Disney’s famous 12 principles)
1. Squash and Stretch → Adds flexibility and realism.
2. An cipa on → Prepares the viewer for ac on.
3. Staging → Clear presenta on of an idea.
4. Straight Ahead & Pose-to-Pose → Two styles of drawing frames.
5. Follow Through & Overlapping Ac on → Natural con nua on of movement.
6. Timing → Number of frames decides speed and weight.
7. Exaggera on → Makes anima on more dynamic.
8. Appeal → Characters should be visually interes ng.

5. So ware Used in 2D Anima on

 Adobe Animate
 Toon Boom Harmony
 TVPaint
 Krita
 Pencil2D

6. Conclusion
 Titles and credits are not just formali es; they enhance storytelling and give professional recogni on.
 2D anima on remains the founda on of modern anima on, even with the growth of 3D.
 Understanding its techniques and principles helps animators create appealing, smooth, and
professional projects.

 Incorpora ng sound into 2D anima on.

1. Introduc on
Sound plays an equally important role in anima on as visuals. While visuals tell the story through mo on,
sound adds life, depth, and emo onal impact. Without sound, an anima on may feel incomplete or flat. In
professional anima on, synchroniza on of visuals and sound is cri cal to create an immersive experience.
2. Importance of Sound in Anima on

 Enhances storytelling: Sound conveys emo ons, mood, and atmosphere.

 Improves realism: Everyday sounds like footsteps, wind, or water make the scene believable.

 Character iden ty: Voices and dialogues define a character’s personality.

 Rhythm & pacing: Background music controls the ming and flow of scenes.

 Audience engagement: Well-used sound keeps viewers connected with the narra ve.

3. Types of Sound in 2D Anima on

(a) Dialogue / Voice-over

 Characters speak through dialogues recorded by voice actors.

 Helps convey personality, mood, and context.

 Example: In Disney’s Mickey Mouse, the voice gives iden ty more than visuals alone.

(b) Sound Effects (SFX)

 Ar ficial or real-world sounds that support visuals.

 Examples: footsteps, door creaks, gunshots, rain.

 They provide realism and drama.

(c) Background Score / Music

 Creates emo onal tone and sets the pace of the anima on.

 A fast beat can indicate ac on, while slow classical music can show sadness or romance.

(d) Ambient Sound

 Natural surrounding sounds like birds chirping, city noise, wind.

 Builds the environment and immersion.

4. Steps for Incorpora ng Sound in 2D Anima on

Step 1: Script & Storyboard

 First, prepare a storyboard with dialogues and sound notes.

 Example: “Character opens the door → Door creak sound needed.”

Step 2: Record Dialogues

 Voice actors record dialogues in a studio.

  Mul ple takes are recorded for clarity.

 So ware like Adobe Audi on, Audacity, Pro Tools is used.

Step 3: Timing and Lip-Sync

 The recorded dialogues are synced with the mouth movements of characters.

 In 2D, animators use phonemes (mouth shapes for sounds like A, E, O, M).

 Lip-sync ensures natural speech anima on.

Step 4: Add Sound Effects

 Collect or create sound effects.

 Tools: Foley recording (real objects for sound) or digital libraries.

 Example: Crumpling paper for a fire sound effect.

Step 5: Background Music Composi on

 Music is composed or chosen to match scene mood.

 Example: Suspense music in a horror scene, cheerful tune in comedy.

Step 6: Ambient & Environmental Sound

 Add environmental layers for realism.

 Example: traffic noise in a city, birds in a jungle.

Step 7: Sound Edi ng & Mixing

 Balance volume between dialogue, effects, and music.

 Remove noise, adjust equaliza on, add reverb if needed.

Step 8: Final Synchroniza on

 Sound is exported in sync with visuals.

 The final render combines anima on + audio track.

5. So ware Used for Sound in Anima on

 Audacity – Free sound edi ng tool.

 Adobe Audi on – Professional sound mixing.

 Pro Tools – Industry standard for audio produc on.

 FL Studio / Logic Pro – For music composi on.

 Adobe Animate / Toon Boom Harmony – Syncing sound directly with anima on meline.
6. Challenges in Incorpora ng Sound

 Lip-sync accuracy: Wrong ming looks unnatural.

 Audio quality: Noises or echoes can disturb viewers.

 Balancing sound levels: Dialogue must be clear over background music.

 Cultural context: Sounds/music must suit the target audience.

7. Role of Sound in Emo onal Impact

 Fear: Sudden loud sound = jump scare.

 Sadness: So piano music with silence gaps.

 Excitement: Fast-paced beats, high-energy sounds.

 Comedy: Exaggerated “boing” or “slip” sounds.

8. Case Studies

 Tom & Jerry: Relies heavily on exaggerated sound effects rather than dialogues.

 Disney’s Frozen: Combina on of music + dialogues + effects to create emo onal depth.

 Japanese Anime: O en uses background music and environmental sounds to increase intensity.

9. Conclusion

Sound is not just an addi on to visuals; it is an essen al storytelling tool in 2D anima on. By blending
dialogues, sound effects, music, and ambient noise, animators create an engaging world where viewers feel
emo onally connected. A well-balanced combina on of visuals and sound ensures that the anima on is
complete, immersive, and memorable.

 Pixel and resolu on: Vector and Bitmap Graphics, Vector Composi on
1. Introduc on
In the world of digital graphics and anima on, every image is created, displayed, and stored in a certain
format. Two fundamental aspects of computer graphics are pixels and resolu on, which determine the clarity,
sharpness, and detail of an image. Alongside these, we differen ate between Bitmap (Raster) Graphics and
Vector Graphics. Both have unique characteris cs and applica ons.
Understanding these concepts is essen al for 2D anima on, graphic design, image edi ng, and mul media
produc on.
2. Pixel
 Defini on:
A pixel (short for “picture element”) is the smallest unit of a digital image or display. Every digital image
is made up of thousands or millions of pixels arranged in rows and columns.
 Proper es of a Pixel:
1. Posi on: Each pixel has a specific loca on in the image grid.
2. Color Value: A pixel stores a specific color, which may include shades of red, green, and blue
(RGB model).
3. Size: Pixels are so small that when viewed together, they form a smooth image.
 Analogy: Think of pixels like ny les on a mosaic — one le is not enough to make a picture, but
thousands together form a complete image.

3. Resolu on
 Defini on:
Resolu on refers to the number of pixels contained in a digital display or image. Higher resolu on means
more pixels, which results in finer detail.
 Types of Resolu on:
1. Image Resolu on: Measured in PPI (pixels per inch). For example, 72 PPI (low) vs. 300 PPI (high print
quality).
2. Display Resolu on: Total number of pixels in a screen, e.g., 1920 × 1080 (Full HD).
3. Print Resolu on: Measured in DPI (dots per inch) – determines how sharp an image will appear when
printed.
 Importance:
o Higher resolu on = be er quality but larger file size.
o Lower resolu on = faster loading but poor clarity.

4. Bitmap (Raster) Graphics

 Defini on:
Bitmap graphics (also called raster graphics) are images made up of a grid of pixels. Each pixel represents
a small por on of the image.
 Characteris cs:
1. Resolu on-dependent (quality reduces when enlarged).
2. Larger file sizes for high-resolu on images.
3. More realis c and detailed for photographs.
 Examples: JPEG, PNG, BMP, GIF, TIFF.
  Advantages:
o Perfect for detailed images like photographs.
o Rich in color and texture.
 Disadvantages:
o Becomes pixelated when scaled.
o Large file size.

5. Vector Graphics
 Defini on:
Vector graphics use mathema cal formulas and geometric shapes like lines, curves, and polygons
instead of pixels.
 Characteris cs:
1. Resolu on-independent (can be scaled infinitely without losing quality).
2. Lightweight and smaller in file size.
3. Best for logos, typography, and illustra ons.
 Examples: SVG, EPS, AI, CDR.
 Advantages:
o Crisp quality at any size.
o Easy to edit individual elements.
 Disadvantages:
o Not suitable for complex, detailed photographs.

6. Vector vs. Bitmap Graphics (Comparison)

Feature Bitmap (Raster) Graphics Vector Graphics

Defini on Made of pixels Made of mathema cal paths and shapes

Resolu on Resolu on-dependent Resolu on-independent

Scalability Loses quality when enlarged (pixela on) Can be scaled infinitely without loss

File Size Larger for high quality Generally smaller

Best Used For Photos, realis c images Logos, icons, illustra ons

Examples JPEG, PNG, BMP SVG, EPS, AI

7. Vector Composi on
 Defini on:
Vector composi on refers to the process of crea ng a complete image or artwork by combining various
vector elements like shapes, lines, curves, and text.
 Steps in Vector Composi on:
1. Planning – Decide the design concept (e.g., logo, poster).
2. Basic Shapes – Start with circles, rectangles, or polygons.
3. Path Manipula on – Use tools like pen tool to create curves.
4. Layering – Arrange elements in layers for be er control.
5. Color & Gradient – Apply flat colors, gradients, or pa erns.
6. Typography – Add scalable text.
7. Final Output – Export as SVG, PDF, or AI.
 Uses of Vector Composi on:
o Logo and branding.
o Anima on assets (characters, backgrounds).
o Infographics and diagrams.
o Mo on graphics.

8. Prac cal Applica ons in 2D Anima on

 Bitmap Graphics: Used for background textures, photo-based assets, scanned images.
 Vector Graphics: Used for character design, logos, illustra ons, scalable assets.
 Resolu on & Pixel Understanding: Essen al for expor ng anima ons in HD, 4K, or for print.
 Vector Composi on: Important in tools like Adobe Illustrator, CorelDRAW, and Flash (Animate) for crea ng
anima on-ready assets.

9. Conclusion
Understanding pixels, resolu on, bitmap vs. vector graphics, and vector composi on is crucial for every
animator and designer.
 Bitmap graphics excel in detail and realism, but are limited by resolu on.
 Vector graphics excel in scalability and flexibility, making them ideal for anima on and design.
 The combina on of both, along with knowledge of resolu on, ensures high-quality output in 2D
anima on, adver sing, web design, and mul media projects.

 2D anima on (Macromedia Flash), Stop mo on anima on.

 2D Anima on (Macromedia Flash)
1. Introduc on to Macromedia Flash
 Defini on:
Macromedia Flash (later Adobe Flash) was a mul media so ware pla orm used for producing 2D
anima on, interac ve applica ons, and web-based content. It became very popular in the late 1990s
and early 2000s.
 Importance:
o Allowed animators to create smooth anima ons using vector graphics.
o Used for cartoons, adver sements, website intros, educa onal content, and games.
o Lightweight files (SWF format) were ideal for online sharing when internet speed was low.

2. Key Features of Flash in 2D Anima on

1. Vector Graphics Support → Scalable without losing quality.
2. Timeline & Keyframes → Anima ons are created by defining key poses and le ng Flash interpolate.
3. Symbols & Instances → Reusable graphics for efficiency.
4. Mo on & Shape Tweening → Automa c genera on of movement or shape transforma on.
5. Layers → Separate elements can be animated independently.
6. Library → Stores reusable objects like characters, props, backgrounds.

3. Steps in Crea ng a 2D Anima on in Flash

1. Concept & Storyboarding – Plan your anima on.
2. Crea ng a New Document – Set stage size, frame rate, background.
3. Drawing Objects – Use shape tools, pen tools, or import assets.
4. Conver ng to Symbols – Convert objects into Movie Clip or Graphic symbols.
5. Timeline Anima on:
o Insert keyframes at important points.
o Add mo on tween for smooth movement.
o Use onion skinning to see progress of mo on.
6. Adding Sound – Import audio and sync with anima on.
7. Tes ng & Publishing – Export as SWF, GIF, or video format.

4. Advantages of Flash Anima on

 Lightweight, small file size.
 Easy to learn for beginners.
 Reusability of assets.
 Ideal for interac ve anima ons (games, ads).
5. Limita ons
 Dependent on Flash Player (now discon nued).
 Limited 3D capabili es.
 Replaced by HTML5, CSS3, and modern anima on so ware.
 Stop Mo on Anima on
1. Introduc on
 Defini on: Stop mo on is a frame-by-frame anima on technique where physical objects (like clay
models, puppets, or cut-outs) are photographed and slightly moved between each shot. When played
in sequence, it creates the illusion of movement.
 History: One of the oldest forms of anima on (used in films like King Kong (1933), Wallace and Gromit,
Coraline).

2. Types of Stop Mo on Anima on

1. Clayma on → Uses clay models (e.g., Shaun the Sheep).
2. Puppet Anima on → Uses ar culated puppets.
3. Cut-Out Anima on → Flat 2D paper or card characters moved in small increments.
4. Object Anima on → Everyday objects used as characters.
5. Pixila on → Using human actors photographed frame by frame.

3. Steps in Crea ng Stop Mo on Anima on

1. Idea & Storyboarding → Plan storyline and movement.
2. Set & Character Crea on → Build clay figures, puppets, or paper cut-outs.
3. Camera Setup → Use a tripod for stability, consistent ligh ng.
4. Frame-by-Frame Shoo ng → Move object slightly, take a photo, repeat.
5. Import to So ware → Import frames into anima on so ware (Dragonframe, Premiere, A er Effects).
6. Add Sound & Effects → Sync dialogue, background score, and effects.
7. Edi ng & Rendering → Smooth playback, export final video.

4. Advantages of Stop Mo on
 Unique and ar s c style.
 Tangible, “real-world” look that computer anima on lacks.
 Affordable for small projects (just need a camera and crea vity).
5. Challenges
 Very me-consuming (24 frames = 1 second of film).
 Requires pa ence and precision.
 Any mistake in movement or ligh ng can break con nuity.

Comparison: Flash vs Stop Mo on

Feature Flash Anima on Stop Mo on Anima on

Medium Digital (so ware-based) Physical objects (clay, puppets, etc.)

Produc on Speed Faster (tweening helps) Slower (manual frame-by-frame)

Style Clean, vector-based, smooth Realis c, tac le, ar s c

Cost So ware license + computer Camera + props + studio space

 Feature Flash Anima on Stop Mo on Anima on

Flexibility Easy edi ng and changes Difficult to change once shot

Conclusion
 Flash (2D Digital Anima on) → Best for web-based, educa onal, and lightweight anima ons.
 Stop Mo on Anima on → Best for films, adver sements, and crea ve/ar s c projects.
Both techniques shaped the history of anima on and con nue to inspire animators worldwide.

 Anima on with flash, Por olio Making

1. Introduc on
 Flash Anima on is one of the most popular techniques used in 2D anima on for crea ng web
anima ons, adver sements, cartoons, and interac ve media.
 Adobe Flash (earlier known as Macromedia Flash) is vector-based so ware, meaning graphics are
lightweight, scalable, and resolu on independent.
 Por olio making is equally important because it acts as the iden ty of an animator. It showcases skills,
crea vity, and technical exper se o employers or clients.

2. Basics of Flash Anima on

1. Vector Graphics – Flash works on vector graphics, which are made of mathema cal equa ons, making
them resolu on-independent.
2. Timeline & Frames – The core of Flash anima on. Timeline controls sequence and dura on; frames are
individual moments.
3. Layers – Used to separate different elements (background, character, text, etc.).
4. Keyframes – Define start and end points of anima on.
5. Tweening – Automa c genera on of frames between two keyframes.
o Mo on Tween: Moves an object smoothly.
o Shape Tween: Transforms shapes into another.
o Classic Tween: Earlier method of mo on anima on.

3. Steps in Crea ng Anima on with Flash

1. Concept Development
o Story idea, character design, background se ng.
2. Se ng Up Stage
o Define document size, resolu on, frame rate (commonly 24 fps for smooth anima on).
 3. Crea ng Assets
o Characters, objects, backgrounds using drawing tools or impor ng external images.
4. Organizing Layers
o Keep background, characters, text, and sound in different layers for easy control.
5. Adding Keyframes
o Place keyframes for major changes in movement or posi on.
6. Tweening
o Apply mo on or shape tween to generate smooth in-between frames.
7. Tes ng Anima on
o Preview to check ming and flow.
8. Expor ng Anima on
o Export as .swf, .mov, or .mp4 for web and presenta ons.

4. Advantages of Flash Anima on

 Lightweight files due to vector graphics.
 Easy interac vity (bu ons, menus).
 Web-friendly output formats.
 Smooth mo on due to tweening.
 Reusable symbols and libraries.

5. Stop Mo on vs Flash Anima on (Counterpoint)

 Flash Anima on → Digital, vector-based, requires so ware.
 Stop Mo on → Physical objects photographed frame-by-frame.
 Flash is faster and editable, while stop mo on feels more natural but me-consuming.

6. Por olio Making for Animators

Importance:
 Acts as a resume + visual showcase.
 Demonstrates crea vity, technical ability, and storytelling skills.
 Builds credibility in industry and helps in freelancing.
Key Elements of a Por olio:
1. Introduc on Sec on
 o Personal details, career objec ve, ar s c style.
2. Showcase of Works
o Character sketches, digital artwork, 2D anima ons, storyboards.
o Must include best 10–12 works only (quality over quan ty).
3. So ware Skills
o Flash, Photoshop, CorelDRAW, A er Effects, etc.
4. Projects & Assignments
o Academic projects, adver sements, client works (if any).
5. Demo Reel / Showreel
o A 1–2 minute video summarizing anima on skills.
6. Final Touch
o Organized layout, clean typography, professional presenta on.

7. Steps in Por olio Development

1. Collect all artworks & projects.
2. Shortlist best works (variety + originality).
3. Organize them category-wise (sketches, digital art, anima ons).
4. Prepare demo reel with music.
5. Add personal branding (logo, signature style).
6. Choose pla orm (physical file, PDF, or website).
7. Keep upda ng por olio regularly.
8. Conclusion
 Flash Anima on provides a strong founda on for learning digital anima on because of its user-friendly
interface and efficiency.
 Por olio making is not just a final step but a con nuous process—it reflects growth and improvement
of the animator.
 For success in anima on industry, one must master both technical tools (Flash) and self-presenta on
(Por olio).