Creating 2D Motion Graphics

1. Procedure Title

Name of the Process: Creating 2D Motion Graphics

2. Purpose

Brief Description: The purpose of the procedure for creating 2D motion graphics is to design and animate visual elements that communicate a message or tell a story in a dynamic, engaging way. This process involves combining graphic design, animation techniques, and timing to bring static images to life through movement, transitions, and effects. The goal is to enhance the visual appeal of content for media such as advertisements, explainer videos, social media posts, and websites, while maintaining clarity and reinforcing the intended message.

3. Scope

Involved Areas: Graphics

4. Responsibilities

Roles and Responsibilities: 

• Graphics: Creating 2D motion graphics often involves a team of professionals working collaboratively to bring a project to life. Each role has distinct responsibilities, and the size of the team depends on the scope of the project.

5. Definitions and Key Terms

Glossary: 

Script Creation: Script creation is the foundation of any motion graphic project, shaping its narrative and guiding the visual elements.

 

AI Voice-Over: AI voice-over technology uses advanced synthetic speech engines to create lifelike narration, offering a fast, cost-effective solution for projects.

 

Storyboarding: Storyboarding is the blueprint of a motion graphic project, translating ideas into a visual plan.

Art resources/ materials/ assets: Art resources, materials, and assets form the visual backbone of any motion graphics project. These include illustrations, vector graphics, textures, stock images, icons, and custom designs.

 

Animation Production: Animation production is the stage where concepts and visuals come to life through movement. It involves key processes like rigging, keyframing, tweening, and applying effects to create dynamic and engaging sequences.

 

Sound Production: Sound production is a crucial element of motion graphics, enhancing the overall impact through music, voice-over, and sound effects. It involves recording, editing, and mixing audio to complement the visuals and evoke emotion.

 

Sub-title/ Text Production: Subtitle and text production play a vital role in enhancing accessibility and reinforcing key messages in motion graphics.

 

Rendering: Rendering is the final step in the motion graphics production process, where all the visual and audio elements are compiled and processed into a polished, viewable format.

6. Procedure Details

6.1. Preparation and Prerequisites

Creating 2D motion graphics requires clear planning and preparation. Start by defining the purpose, goals, and target audience, followed by developing a script, storyboard, and mood board to visualize the concept. Gather necessary resources such as illustrations, audio files, and references, and select appropriate tools like Adobe After Effects for animation and sound editing software for audio. Plan technical details, including resolution, frame rate, and video duration, while organizing the workflow with a structured file system and clear timelines. Finally, test the concept with client feedback and feasibility checks to ensure alignment with project goals and resources. 

6.2 Timeline for Task Completion

Planning and Concept Development (1–3 Days): Define Goals and Objectives, Scriptwriting, Storyboarding

Asset Creation (2–7 Days): Illustrations and graphics depending on complexity

Animation Production (3–10 Days): Scene Setup and Rigging, Animating Scenes, Transitions and Effects

Review and Refinement (1–3 Days): Client Feedback and Revisions

Finalization and Exporting (1 Day): Quality Check

6.3. Step-by-Step Procedure

Storyboarding 

• Begin by creating sketches or storyboards to visually represent each scene of the story.
• Utilize ChatGPT to generate a visual representation of each paragraph. Ensure that the graphics and icons used have a clear and relevant meaning for each sentence.
• Determine the sequence of events and transitions between scenes to ensure a cohesive flow in the story. 
• Use your creativity to enhance the generated scenes and add your own touch to convey the intended message effectively.

Art resources/ materials/ assets

• Once the scenes are generated, download assets from our paid subscriptions such as 123rf, Envato Elements, or Freepik. Always adhere to our designated color schemes to maintain consistency throughout the storyboard.

• • 
    

• Change the color schemes to the following ones using the downloaded assets.
• Save the file as a PNG or AI, depending on how you choose to animate it. 
• Once all your assets are prepared, you can proceed to the next step.

Note:

• Never use characters with facial expressions.
• Avoid using too many detailed illustrations.
• Use subtle gradient background

Animation Production 

• Determine the animation techniques to be used (e.g., traditional frame-by-frame, puppet animation, motion graphics).
• Plan out the timing and pacing of each animation element.
• Start animating based on the storyboard and animation plan.
• Refine the timing, motion, and transitions between scenes.
• Incorporate with the voice-over that was created for that project.

Sound Production

Voice-over

• Adjust the audio levels for the voice-over to -5dB or lower depending on the file.

  Background Music

• Add at least a .5-second delay from the first word of the voice-over. 
• When selecting background music, ensure it is professional, upbeat, and energetic.
• When inserting the background music, consider reducing the volume to -8dB or -18dB.
• For the final part of the video, gradually fade out the background music over 3 seconds. Adjust the audio levels from the initial setting (-8dB or -18dB) to -30dB.

Sub-title/ Text Production

• When adding a text use the font Gotham.
• Gotham Bold – for covering whitespace in the animation scene
• Gotham Medium – subtitles 42pts

Text position: 60, 1012.9388

• Ensure text readability by selecting contrasting colors and backgrounds for optimal visibility.
• Add drop shadow or small stroke to the text if needed.

• Decide on animation techniques to bring the text to life, such as fade-ins, slide-ins, typewriter effects, or kinetic typography.
• This is only applied for the Gotham Bold
• Apply animation presets or manually key frame text properties to create effects.
• Preview text animations in the timeline or playback window to ensure smoothness and timing accuracy.
• Fine-tune animation parameters such as speed, easing, and timing adjustments for optimal visual impact
• Review the text animations within the context of the motion graphics project.
• Make any necessary adjustments, focusing on readability, timing, and overall effectiveness of text integration.
• Confirm that all text elements are correctly positioned, animated, and synchronized with other visual and audio components.

Rendering

• Ensure that the animation project is fully completed and ready for rendering.
• Compile animation sequences and audio tracks into a cohesive timeline.
• Fine-tune timing, pacing, and transitions.

• Render settings: Best Setting

• Quality: Best

• Resolution: Full
• Size: 1920×1080
• Framerate: 60

• Output Module: Lossless

• Format: AVI
• Post-Render Action: None
• Channels: RGB
• Depth: Millions of Colors
• Color: Pre-multiplied (Matted)

• Log: Errors Only

• Format: AVI

• From AVI file, convert the using Adobe Media Encoder.

• Format: H264
• Preset: Match Source- High bitrate
• Check the “Auto-Encode Watch Folder items in the Queue
• Start Queue

6.4. Tools and Resources

Software Tools

1. Animation and Motion Design Software
   1. Adobe After Effects (industry standard for motion graphics
   2. Blender (open-source, suitable for both 2D and 3D animations with its Grease Pencil tool)
      Toon Boom Harmony (professional-grade 2D animation software)
      • Moho (formerly Anime Studio) (ideal for character animation)
      • Synfig Studio (free and open-source for vector-based 2D animations)

2. Illustration and Graphic Design

• Adobe Illustrator (vector design for assets)
• Adobe Photoshop (bitmap design, textures, or concept art)
• Krita (open-source tool for creating 2D artwork)
• Affinity Designer (affordable alternative for vector work)

 

3. Video Editing

• Adobe Premiere Pro (for integrating motion graphics with video)
• DaVinci Resolve (free option with strong editing features)

 

5. Audio Tools

• Audacity (free, open-source audio editing)
• Adobe Audition (advanced audio editing and mixing)

 

Resources

1. Asset Libraries
   • Stock images and vectors: Freepik, Envato Elements, Adobe Stock
   • Fonts: Google Fonts, DaFont, FontSquirrel
   • Icons: Flaticon, Noun Project

 

2. Textures and Backgrounds

• Websites like Unsplash, Pexels, or CGTextures for high-quality backgrounds.

 

3. Plugins and Scripts

• For Adobe After Effects: DUIK (rigging), Animation Composer, Trapcode Suite (effects)
• Flow (for easing keyframes)

 

4. Sound Effects and Music

• Freesound, Artlist, Epidemic Sound, PremiumBeat, Bensound

 

7. Safety and Compliance Measures

Applicable Regulations: 

 

• Use only licensed or royalty-free assets (e.g., images, fonts, music)
• Avoid misleading visuals or claims in marketing materials.
• Protect digital files with secure backups and version control systems.
• Avoid offensive or discriminatory visuals.
• Adhere to societal and cultural sensitivities, especially in global projects.

8. Quality Control and Evaluation Metrics

Performance Indicators: 

• Adherence to design guidelines or branding standards.
• Frame rate stability (e.g., 24–30 FPS for smooth playback).
• Test playback across different screen sizes and resolutions.
• Number of platforms or mediums supported (e.g., web, social media, broadcast).

9. Exception and Problem Handling

• Regularly back up project files to prevent loss
• Avoid rapid flashing animations that could trigger seizures in viewers
• Use high contrast, readable fonts, and appropriate text size

10. Documentation and Record Keeping

Documentation Requirements: Graphics SOP https://drive.google.com/drive/folders/1Adl7ovF0eyBMGzipKeQPCROkkzjgzF08

11. Procedure Review and Update

 

Review Frequency: This procedure may be updated in the future as new apps or programs are released annually.