Types Of 2D Animation
Jun 28, 2023
Storytelling comes in many different forms — and whether it’s for entertainment or education, we can all agree that animation is a great tool for telling a story. Animation has the ability to create an incredibly impactful and memorable experience for your audience, forming and/or deepening your connection with them.
One of the first steps of the animation process is to define which animation style will be used in your production. Each style will help engage your audience in a different way, so selecting the right style for your purposes is very important.
Animation can be categorized into 2D animation or 3D animation — and it is important to understand the difference between the two before diving into any animation project.
What is 2D Animation?
In 2D animation, the scene and characters are created in a two-dimensional space. These animations may use perspective and foreshortening, much like 2D-still images, to create the illusion of depth — but they do not use 3D computer-graphics technology. 2D animation was largely established through traditional animation techniques, or cel animation.
What is 3D Animation?
3D animation is described as the process of animating objects that appear in a three-dimensional space. Using simulated motion, these digital objects can be moved, turned and rotated, just like objects in the real world. 3D animation has its benefits and, in many cases, can be a powerful tool for storytelling and engagement. The details involved in creating 3D animation often prove to be much more costly than in creating 2D. Autodesk Maya, Cinema 4d and Blender are a few popular 3D computer programs used in 3D animation.
Now that you understand the difference between the two, let's dive into the common types of 2D animation.
Cel/Hand-Drawn Animation
Cel animation is what you might think of as the traditional style of animating, in which each frame is hand-drawn onto a transparent celluloid sheet. It has become popular to use applications such as Adobe Animate or Toon Boom Harmony to help speed up the animation process, but digitally hand-drawing each frame helps create smooth transitions between animated elements. These hand-drawn frames are especially helpful if the still artwork was created in Photoshop and rendered in bitmap and pixels, rather than in illustrator, where the art is vector — [vector art is comprised of paths; lines and curves. These lines and curves are scalable and will maintain their visual quality at any image size].
An example of 2D cel/hand-drawn animation in our short film titled "Dreams".
Another example of 2D cel/hand-drawn animation in our short film titled "Daffodils".
2D Digital Animation
2D digital animation involves the use of computer programs. Adobe After Effects, Animate, and Character Animator are some of the programs used in the industry, with After Effects being the most popular for creating animations of this kind.
After Effects is a program used for compositing animation with visual effects, providing an assortment of tools used to add motion to artwork. With its many stock visual effects and plugins, animators are able to seamlessly manipulate imagery by moving, rotating, scaling and fading vector or pixel-based art. So rather than working in a frame-by-frame setting, After Effects enables an artist to more efficiently add motion to layered artwork.
Our short film Amazonas is a great example of how After Effects can be used for animation.
The Flex Alert Campaign shows how After Effects can be used in character animation.
2D Web and App Animation
Web and App animations are the types of animations we see when scrolling through websites, or while playing games or using applications. Over the last decade, such interactive technology, on both mobile and the web, has created a more immersive experience for users.
Using animations during the onboarding experience of an app, including the addition of interactive and animated splash screens and website headers to loading screens, helps provide a human touch while explaining complex concepts. A popular example of this kind of animation can be seen used for animated stickers and emojis across all social media platforms.
Specialized computer programs, like Rive and Spine, can be used to create animations that are compatible with developer tools like HTML, CSS and Javascript (to name a few). After Effects can also be used for creating Lottie animations, an optimized animation format that’s great for SEO because of its fast download speeds that can be attained when integrated into a website or app.
Lottie Stickers for LIMCA
2D Motion Graphics
Motion graphics literally refers to graphics with movement. Usually, motion graphics is used for title and end cards that help introduce a video and add a nice finished touch to the ending. It is also used in the lower third of videos which is the graphics or text you might see in the bottom section of a video or animation. Video content used in marketing or advertising campaigns also incorporates motion graphics — as do explainer videos, which put typography and/or logos into motion to help support the story that’s being told via animation.
Motion graphics usually comprises mixed media, combining live action with animated elements, including text, character animation, and so forth. Over the years, however, motion graphics has continued to evolve to include more complex visuals with character animation and narrative storytelling.
An animated explainer that utilizes motion graphics in a fully animated piece.
Mixing live footage with frame by frame animation.
Defining the style of animation you’d like to use in your animation project will give you a head start in the planning process. Different styles of animation will result in different costs, so as you define your budget, be sure to also take a look at the factors that affect the cost of animation. If you’re having trouble deciding which style is right for your project, an animation studio can help guide you through that process.
Storytelling comes in many different forms — and whether it’s for entertainment or education, we can all agree that animation is a great tool for telling a story. Animation has the ability to create an incredibly impactful and memorable experience for your audience, forming and/or deepening your connection with them.
One of the first steps of the animation process is to define which animation style will be used in your production. Each style will help engage your audience in a different way, so selecting the right style for your purposes is very important.
Animation can be categorized into 2D animation or 3D animation — and it is important to understand the difference between the two before diving into any animation project.
What is 2D Animation?
In 2D animation, the scene and characters are created in a two-dimensional space. These animations may use perspective and foreshortening, much like 2D-still images, to create the illusion of depth — but they do not use 3D computer-graphics technology. 2D animation was largely established through traditional animation techniques, or cel animation.
What is 3D Animation?
3D animation is described as the process of animating objects that appear in a three-dimensional space. Using simulated motion, these digital objects can be moved, turned and rotated, just like objects in the real world. 3D animation has its benefits and, in many cases, can be a powerful tool for storytelling and engagement. The details involved in creating 3D animation often prove to be much more costly than in creating 2D. Autodesk Maya, Cinema 4d and Blender are a few popular 3D computer programs used in 3D animation.
Now that you understand the difference between the two, let's dive into the common types of 2D animation.
Cel/Hand-Drawn Animation
Cel animation is what you might think of as the traditional style of animating, in which each frame is hand-drawn onto a transparent celluloid sheet. It has become popular to use applications such as Adobe Animate or Toon Boom Harmony to help speed up the animation process, but digitally hand-drawing each frame helps create smooth transitions between animated elements. These hand-drawn frames are especially helpful if the still artwork was created in Photoshop and rendered in bitmap and pixels, rather than in illustrator, where the art is vector — [vector art is comprised of paths; lines and curves. These lines and curves are scalable and will maintain their visual quality at any image size].
An example of 2D cel/hand-drawn animation in our short film titled "Dreams".
Another example of 2D cel/hand-drawn animation in our short film titled "Daffodils".
2D Digital Animation
2D digital animation involves the use of computer programs. Adobe After Effects, Animate, and Character Animator are some of the programs used in the industry, with After Effects being the most popular for creating animations of this kind.
After Effects is a program used for compositing animation with visual effects, providing an assortment of tools used to add motion to artwork. With its many stock visual effects and plugins, animators are able to seamlessly manipulate imagery by moving, rotating, scaling and fading vector or pixel-based art. So rather than working in a frame-by-frame setting, After Effects enables an artist to more efficiently add motion to layered artwork.
Our short film Amazonas is a great example of how After Effects can be used for animation.
The Flex Alert Campaign shows how After Effects can be used in character animation.
2D Web and App Animation
Web and App animations are the types of animations we see when scrolling through websites, or while playing games or using applications. Over the last decade, such interactive technology, on both mobile and the web, has created a more immersive experience for users.
Using animations during the onboarding experience of an app, including the addition of interactive and animated splash screens and website headers to loading screens, helps provide a human touch while explaining complex concepts. A popular example of this kind of animation can be seen used for animated stickers and emojis across all social media platforms.
Specialized computer programs, like Rive and Spine, can be used to create animations that are compatible with developer tools like HTML, CSS and Javascript (to name a few). After Effects can also be used for creating Lottie animations, an optimized animation format that’s great for SEO because of its fast download speeds that can be attained when integrated into a website or app.
Lottie Stickers for LIMCA
2D Motion Graphics
Motion graphics literally refers to graphics with movement. Usually, motion graphics is used for title and end cards that help introduce a video and add a nice finished touch to the ending. It is also used in the lower third of videos which is the graphics or text you might see in the bottom section of a video or animation. Video content used in marketing or advertising campaigns also incorporates motion graphics — as do explainer videos, which put typography and/or logos into motion to help support the story that’s being told via animation.
Motion graphics usually comprises mixed media, combining live action with animated elements, including text, character animation, and so forth. Over the years, however, motion graphics has continued to evolve to include more complex visuals with character animation and narrative storytelling.
An animated explainer that utilizes motion graphics in a fully animated piece.
Mixing live footage with frame by frame animation.
Defining the style of animation you’d like to use in your animation project will give you a head start in the planning process. Different styles of animation will result in different costs, so as you define your budget, be sure to also take a look at the factors that affect the cost of animation. If you’re having trouble deciding which style is right for your project, an animation studio can help guide you through that process.
General Inquiries
Job Opportunities
opportunities@thelittlelabs.com
Headquarters
Los Angeles, California
TheLittleLabs is a NMSDC certified minority-owned company.
Copyright © 2016 - 2024 • TheLittleLabs LLC. All rights reserved.
General Inquiries
Job Opportunities
opportunities@thelittlelabs.com
Headquarters
Los Angeles, California
TheLittleLabs is a NMSDC certified minority-owned company.
Copyright © 2016 - 2024 • TheLittleLabs LLC. All rights reserved.