Animation

A simulation of movement created by displaying series of

pictures or frames at a rapid speed.
Generated from word anime which means life.
To animate means to bring to life.
Animation on computers is one of the chief ingredients
of multimedia presentations.
Video takes continuous motion and breaks it up into
discrete frames, whereas animation starts with independent
pictures and puts them together to form the illusion of
continuous motion.

Persistence of Vision
Given by Peter Roget in 1824.
It states that an object seen by the human eye remains
chemically mapped on the eyes retina for a brief time after
viewing.
The fractional skips between images are not noticed
because the persistence fills in the momentary gap.
Even in the earliest stages of development Rough Character
This makes it possible for a series of images that are
Concept Model Sheets are sometimes created. This general design
changed very slightly and very rapidly, one after the other, concept of the Beast was approved before the character was fully
seem like continuous motion. finalized. It gives us a sense of the basic design of the character,
along with attitude poses that help to tell the story of just who he is:
Clean up Requirements for Drawing

Clean-up is a part of the workflow in the production of hand-drawn

animation.
In traditional animation, the first drawings are called
"roughs" or "rough animation" because they are often done in a very
loose fashion. If the animation is successfully pencil tested and
approved by the director, clean versions of the drawings have to be
done. In larger studios this task is given to the animator's assistant, or,
in a more specialized setting, to a clean-up-artist. The artist doing the
clean-ups is responsible for the final line and finished look of the
shot.
Clean-up animation is the process of creating the final drawings you
see in the finished film. It does not necessarily mean a "clean" fine
line. The artist, usually a team of artists, uses key drawings and
animation charts from the animator, making it appear as though one
artist has created the whole film. The clean-up artists will follow the In the case of a character like The Beast, unique anatomy requires
intentions of the animators and stay true to performance and unique reference for artists working on the Beast team.
movement. An Anatomical Study Model Sheet can give animators a better idea
of the structure that exist under all that hair.
Clean-up is generally done on a new sheet of paper. They
can be done on the same sheet as the rough animation if this was
done with a "non-copy blue" pencil. This certain tone of blue will be
invisible for photocopying machines or grayscale scanners, where the
finished animation will be copied on cels or transferred into a
computer for further processing.
On average clean-up usually takes twice as long as the rough
animation pass because of the precision and extra drawings that are
required to complete a shot.

Animation Model Sheet Types

In animation, a model sheet, also known as a character

board, character sheet, character study or simply a study, is a
document used to help standardize the appearance, poses, and
gestures of an animated character. Model sheets are required when
large numbers of artists are involved in the production of an animated
film to help maintain continuity in characters from scene to scene, as
one animator may only do one shot out of the several hundred that
are required to compete an animated feature film. When drawn
without such background, the character is referred to as off-model.

The first is a General Final Line Model Sheet. A single

character is portrayed in turn around drawings that give us a sense of
how to draw the character from any angle, along with some facial
expressions, attitude and action poses. Note that the top and bottom
sheets were drawn at different times. Like many characters Bugs
went through an evolution from one year to the next. Many early
model sheets tried to fit everything an artist needed to know about a
character on a single sheet, and this one just about succeeds in doing
just that. But these days model sheets come in many styles, some far Another type of model sheets thats often generated early in the final
more specific than others. design process is the Rough Construction Model Sheet. This set of
Flynn Rider sheets were created by Glen Keane for the
filmTangled. One shows the underlying structure of the character
while the second presents the same poses fully clothed. These 2D
designs are great aids for building a 3D character:
 The majority of Rough Model Sheets are created from the best
studies or keys from the most successful scenes that have been
animated of the character up to that point. They often show action,
expressions and attitudes that best display the characters personality:

Rough construction model sheets can sometimes focus only on

details of a character, such as hair:

Sometimes a turnaround drawing which also shows how many heads

high the character is can be added to the rough model sheet, which
creates a rough version of the all-in-one design that we saw in the
Bugs Bunny sample:

or eyes:

A Rough Dialog Model Sheet shows various mouth shapes that are
created when the character is speaking. This one has the added
Or even spots! benefit of also showing a range of emotions:
Some characters are unique in that they arent entirely constructed
with recognisable anatomy. The Genie from Aladdin, for example,
was partially made of smoke. A Final Line or Clean up
Construction Model Sheet helps animators to see volume as well as
structure for even the most cartoony of characters:

Hercules clean up (or final line) front turnarounds:

Solid construction is crucial when creating a Turn around Model

Sheet (many studios use one word, turnarounds, instead) .When
beginning your turnaround model sheet, its usually easiest to start
with either a forward facing view of your character that has the
proportions entirely worked out; this will be THE drawing that sets
the standard for your character. When completed, flip this character
face down on a lightbox (use a lighted window if you dont have a
lightbox) and trace the outline. Flip it back around and detail in the
back view, referencing the front view as you go. Once both are
completed, line them up and use a ruler to map out corresponding
points on their head and body. Use these to rough out a side view and
3/4 view of your character. You can do each on a separate piece of
paper and Photoshop them together once you have the character fully
mapped out:

Youll note that Megs Turn Around Model Sheet shows three poses
while Hercs shows six. The average is in the middle; four. Front,
back, side, and a three quarter view.

Not all turnaround model sheets are done with the character standing
still and facing forward, but most are. Some, like this final line
turnaround model sheet of Kenai as a bear from Brother Bear, are
more ambitious and show a character caught in the middle of an
action. If you can easily build a 3D model of a character in your mind
then something like this might not be too difficult, but most artists
doing their first turn around model sheets would be wise to avoid this
much of a twist in the body the first time out.

If you dont have much experience with doing turnaround drawings

this process might take awhile and the drawings may get messy in the
process. Do a second rough on a fresh sheet of paper over the first if
it gets too overworked. Once you are happy with your turnarounds,
proceed to a Final Line Turn around Model Sheet:

Its often helpful to other artists working on the project if your pose
includes one bent arm and one thats straighter opposite one bent leg
and one thats straight. This gives other artists more information
when handling the limbs in different situations. Another example
from the same film:
Hercules rough back turnarounds:
12 Concepts of Animation
1. Squash and Stretch
This action gives the illusion of weight and volume to
a character as it moves.
Examples:
A bouncing ball expands on impact
Feet appear longer and flatter when hitting
pavement
2. Anticipation
This movement prepares the audience for a major
action the character is about to perform such as
starting to run, jump or change expression.
Example:
Jumping character would bend knees and swing
arms back
3. Staging
A pose or action that clearly communicates to the
audience the attitude, mood, reaction or idea of
the character as it relates to the story and
continuity of the story line.
Example:
Seeing a character in the distance with their head
in their hands sets the stage for a sad mood
4. Straight Ahead and Pose to pose animation
Strategy for developing your animation
Straight ahead animation - start at the first
drawing and work drawing to drawing to the end
of a scene
Pose to Pose - planned out and charted drawings
with key drawings done at intervals throughout
the scene. The gaps are filled in.
5. Following through and overlapping action
Follow Through - when the main body of the
character stops all other parts continue to catch
up to the main mass
Example:
Arms or long hair move after character has
stopped
Overlapping Action - when the character changes
direction while his clothes or hair continues
forward.
Example:
Bugs Bunny stops turns around, but his legs
continue in the opposite direction
6. Slow out and Slow in
As action starts, we have more drawings near the
starting pose, one or two in the middle, and more
drawings near the next pose. Slow-ins and slow-
outs soften the action, making it more life-like
Fewer drawings make the action faster
Example:
Old lady driving should take many frames
for slow action
More drawings make the action slower.
Example:
Car chase should take few frames for fast
action
7. Arcs
All actions, with few exceptions (such as the
animation of a mechanical device), follow an arc
or slightly circular path
Arcs give animation a more natural action and
better flow
Example:
A thrown ball travels in a curve, not a straight
line
8. Secondary Action
This action adds to and enriches the main action
Adds more dimension to the character animation,
supplementing and/or re-enforcing the main
action.
Example:
Small yawn = small cheek movements
Big yawn = exaggerated arm movements and
several facial movements
9. The pace of the action
The pace of the action
The more drawings between poses, the slower
and smoother the action. Fewer drawings make
the action faster and crisper.
Expertise in timing comes with experience and
experimentation, use the trial and error method.
10. Exaggeration
Exaggeration is a caricature of facial features,
expressions, poses, attitudes and actions.
Example:
Bugs Bunny sees a girl and his eyes bug out of his
head.
11. Solid Drawing
The basic principles of drawing form, weight, volume
solidity and the illusion of three dimension apply to
animation as it does to academic drawing. The way
you draw cartoons, you draw in the classical sense,
using pencil sketches and drawings for reproduction of
life
Example:
Your drawing should be proportionate, head not too
large, legs not too long
12. Appeal
A live performer has charisma. An animated character
has appeal. Appealing animation does not mean just
being cute and cuddly. All characters have to have
appeal whether they are heroic, villainous, comic or
cute.
Example:
Ursula in Little Mermaid is a character you love to
hate Ariel is lovable
Techniques of Animation
Hand drawn Animation (cel animation)
Stop motion Animation
Cutout Animation
Clay Animation
Object Animation
Puppet Animation
Sand Animation
Drawn on film Animation
Computer Animation
1. Hand drawn Animation
Cel Animation: Cel stands for celluloid which is a clear
sheet with images drawn on them. It is transparent so that it
can be laid over other cels and/or a painted background,
then photographed. It includes the following steps:-
a. Drawing and painting of Cels
b. Filming of Cels
The processed film, vocal tracks, music and sound tracks
are then synchronized and edited together. The final film is
sent to the lab to make a film project print.
Cel animation or Hand drawn or traditional animation is the
oldest and historically the most popular form of animation.
Cel animation was invented by Winsor McCay in 1915.
McCay first used cel animation to create the 25 minute film
The Sinking of the Luisitania which used over 25,000
drawings.
Walt Disney also used this technique in Snow White and
the Seven Dwarfs in 1937 which marked the first time that
traditionally animated films began to be taken seriously.
Cel animation is incredibly time consuming and requires
incredible organization and attention to detail.
2. Stop Motion Animation
Stop motion animation is a frame-by-frame process in
which real-world objects are used.
 The objects are photographed, moved a bit then Then the animations are computerized
photographed again. The camera used is a special camera Then, keyframing and
known as Rostrum camera. This process is repeated for a Tweening is done.
number of times & then the photos are patched together in Functions like in-betweening and motion capture are examples
order to create animation. of computer-assisted animation
There are many different types of stop-motion animation,
usually named after the type of media used to create the
animation, these include: Keyframing and Tweening
Cutout animation Keyframing and Tweening is the process of generating in-
Clay animation between frames from the user-specified key frames.
Object animation Keyframes are the particular frames chosen by the
Puppet animation animators that describe the transformation of this object,
and that all other intermediate positions can be figured out
a. Cutout Animation from these.
Key frames can be computed
at equal time intervals
according to some other rules.
The process of figuring out the frames in between two
keyframes is called "in-betweening" or simply "tweening.

b. Computer generated Animation

Its is 3-D i.e. objects and characters are modeled on a plane
with an X, Y and Z axis.
here the animation is designed solely on the computer
system.
Keyframing and tweening are also done in this.

2D Animation
Cutout animation is a technique for producing animations using flat 2D animation figures are created and/or edited on the
characters, props and backgrounds cut from materials such as paper, computer using 2D bitmap graphics or created and edited
card, stiff fabric or even photographs. using 2D Vector graphics. This includes automated
The world's earliest known animated feature films were cutout computerized versions of traditional animation techniques
animations. such as of tweening, morphing.
The first episode of South Park (American animated sitcom) was 3D Animation
made with paper cut outs. Digitally modeled and manipulated by an animator. To
manipulate a mesh, it is given a digital skeletal structure
b. Clay Animation that can be used to control the mesh. (rigging) Other
techniques can be applied such as mathematical functions,
simulated fur or hair, fire/water effect and the use of
Motion Capture. Many 3D animations are very believable
and are commonly used as Visual Effects for recent movies
2D and 3D Animation
To create a 3-D computer-generated object, you'll need
modeling software like Maya, 3ds Max or Blender. These
programs come loaded with a large number of basic 3-D
shapes, called primitives or prims, which are the building
blocks of more complex objects. For example, you could
model a car by connecting cubes, cylinders, pyramids and
spheres of different shapes and sizes. Since these are 3D
Also known as Claymation, is a form of Stop motion objects, they're modeled on the X, Y and Z axes and can be
animation. rotated and viewed from any angle.
In this form, each object is sculpted in clay or a similarly To create 2-D animation, youll need 2-D animation
pliable material such as Plasticine, usually around a wire softwares like Pencil, Toon Bomb Studio, Flash, etc.
skeleton called an armature.
Computer Animation Techniques
3. Sand Animation
Motion capture: Motion capture uses reflective dots that
are placed at an actor's joints. When he moves, a computer
picks up the dots and creates a model of the performance,
which is stored in the computer.
Procedural techniques: to describe the motion
algorithmically or to express animation as a function of
small number of parameters.

In sand animation, the animator is using sand on a flat Morphing is a special effect in animations that changes (or
surface, usually made of either wood or backlit glass. morphs) one image into another through a seamless
Once the single frame is complete, the animator captures it transition.
on camera, then adjusts the sand art to the image for the
next frame in the animation.
4. Computer Animation
Computer animation consists of relative movement
between rigid bodies and possibly movement of the view
point or virtual camera.
There are two basic kinds of computer animation:
Computer-assisted animation,
Computer-generated animation.
Using morphing technique one image is gradually turned
a. Computer assisted animation
into another.
The computer is used to make the animation process quicker and
Morphing is done with similar objects; for example,
easier.
transforming one car model into another.
It is typically 2-D.
Objects are drawn either by hand or a computer
 Anime Studio: The Draw Tools
Draw tools are used to draw and modify vector artwork. The
following tools are available when youre working with a vector
layer. Most of these tools are used by selecting them from the toolbar
then clicking and dragging in the working area of the main window -
a few are used simply by clicking on them, and this is noted below. If
you hold the mouse over a tool, a tooltip will appear with the name of
the tool if you need a quick reminder. Also, most tools have a
shortcut key that can be used to activate them. If a tool has such a
shortcut, this will show up in the tooltip as well. If a tool has the
following symbol next to it: , then it can be used for animation -
using the tool at different frames in the timeline will cause the object
you adjust to change over time.
Transform Points
Shortcut: T
The Transform Points tool is used to move, scale, or rotate a group of
selected points. It operates only on the currently selected points,
unless fewer than two points are selected - then it operates on the
nearest point to where you clicked.
Add Point
Shortcut: A
The Add Point tool is what you use to draw most curves in Anime
Studio. Just click and drag in the working area of the main window to
create a new curve segment. There are four variations to using the
Add Point tool - they differ in where the original click takes place.
Curvature
Shortcut: C
This tool works on the currently selected points, or on the nearest
point if less than two points are selected. It adjusts the level of
smoothness of the curves passing through the selected points. Drag to
the left to make the curves less smooth, and drag to the right to make
the curves rounder.
Freehand
Shortcut: F
The Freehand tool lets you draw complex shapes by just dragging the
mouse around. Anime Studio will attempt to simplify the curves that
you draw with the Freehand tool. by removing unnecessary points.
Straight lines will be preserved as accurately as possible.
Draw Shape
Shortcut: E
The Draw Shape Tool provides a way to quickly draw commonly
used shapes: squares, ovals/circles, triangles, stars, arrows, and
spirals. Each of the shape options are shown later in this section.
Delete Edge
Shortcut: D
Its easy to delete points - just select them and press backspace or
delete. However, sometimes you may want keep two points, but
break the curve connecting them. To do this, use the Delete Edge
tool. Just use it to click on the curve segment you want to delete and
it will disappear.
Magnet
Shortcut: X
The Magnet tool is similar to the Transform Points tool - it is used to
move points around. However, instead of moving the selected points,
it moves points based on
the strength of the magnet. When you click with this tool, the region
of strength is displayed. Any points within this region will move with
your mouse, but the points closer to the center of the mouse click will
move the most. (The radius of the magnets strength region can be
adjusted in the tool options area.)
Blob Brush
The Blob Brush tool allows you to block shapes out very quickly.
Straight lines are preserved as accurately as possible, and quality of
shapes are preserved as accurately as possible over multiple strokes.
Eraser
The Eraser tool allows you to cut holes in any shape. Simply select
the shape that you want to modify with the Select Shape tool Then,
switch to the Eraser tool to erase portions of the selected shape.
Point Reduction
The Blob Brush, Eraser, and Paint Bucket tools can generate a lot of
extra and unnecessary points. The Point Reduction tool helps you
reduce the point count in any vector object so that the shapes are
easier to animate.
Scatter Brush
The Scatter Brush allows you to spray shapes into your scene. There
are a number of preset shapes, or you can also copy any shape to your
clipboard and spray multiple copies of that shape into your scene.
The Scatter Brush also scatters animated sample objects with
animated point position, curvature and line widths. The animations in
scattered objects is automatically cycled.
Perspective Points
Click and drag side-to-side to add horizontal perspective to the
selected group of points. Click and drag up and down to add vertical
perspective to the selected group of points. Although Anime Studio is
not a 3D program, the effect of this tool is similar to rotating the
points around a vertical pivot, so that one half of the group rotates
into the screen and the other half out of the screen. If you want to do
a true 3D rotation, you should use the Rotate Layer Y tool to apply
true 3D perspective to a layer.
Shear Points
This tool works on a group of two or more selected points. Click and
drag left, right, up, or down to shear, or slant the group of points.
Bend Points
To use the Bend Points tool, drag your mouse up and down to bend
the selected group of points up and down. For best results, the
selected group of points should
be wider than it is tall. Drag your mouse side to side to bend the
selected group of points side to side. For best results, the selected
group of points should be taller than it is wide.
Noise
Shortcut: N
The Noise tool works on a group of selected points. Click and drag to
move the points around in random directions. This tool can be used
for example when you want to duplicate an object using Copy and
Paste, but you dont want the new object to look exactly like the
original. Just use this tool to distort it a little bit.
Select Shape
Shortcut: Q
This tool is used to select one or more existing shapes (fills or
outlines).
Create Shape
Shortcut: U
The Create Shape tool is used to select a region to be filled with
color, or a set of edges to be drawn as an outline. It operates exactly
like the Select Points tool described in
Paint Bucket
Shortcut: P
The Paint Bucket tool is used to fill a closed area with color. Just
click inside a closed shape to fill it with the current combination of
colors and styles. This can make it much easier and quicker to fill
shapes than with the Create Shape tool, but keep in mind youre still
working with the same requirements - a shape must be completely
closed in order to be filled.
Select Bone
Using this tool, you can click a bone to select it. You can also draw a
marquee or a lasso around multiple bones to select more than one
bone with the Select Bone tool.
Transform Bone
The Transform Bone tool allows you to translate, rotate, or scale a
selected bone.
Add Bone
Use the Add Bone tool to add new bones to a skeleton. The location
you click will be the base of the bone (the point it rotates about), and
where you drag to will be the endpoint
How to Create an Animated GIF in Photoshop
Here's an example of an animated GIF you might make using this
tutorial:

Alright, let's get started!
Step 1: Upload your images to Photoshop.
If you already have images created ...Gather the images you want in a
separate folder. To upload them into Photoshop,
click File > Scripts > Load Files Into Stack.
Then, select Browse and choose which files you'd like to use in your
GIF, then click OK.
Photoshop will then create a separate layer for each image you've
selected. Once you've done that, skip to step two.
If you don't already have the series of images
created ...
Create each frame of the animated GIF as a different Photoshop layer.
To add a new layer, chose Layer > New > Layer.
Be sure to name your layers so you can keep track of them easily
when you make your GIF. To name a layer, go to the Layer panel on
the bottom right of your screen, double-click on the default layer
name, and type in the name you want to change it to.
Press Enter when you're finished.
Once you have your layers in there and you've named them all, you're
ready for step two.
Pro Tip: If you want to combine layers so they appear in a single
frame in your GIF, turn visibility on for the layers you want to merge
(by clicking on the "eye" to the left of each layer name so only the
eyes for the layers you want to merge are open). Next, press Shift +
Command + Option + E (Mac) or Shift + Ctrl + Alt + E
(Windows). Photoshop will create a new layer containing the merged
content, which you should also rename.
Step 2: Open up the Timeline window.
To open Timeline, go to the top navigation, choose Window >
Timeline. The Timeline will let you turn different layers on and off
for different periods of time, thereby turning your static image into a
GIF.
 Then, click the menu icon on the right of the Timeline screen.

From the dropdown menu that appears, choose Create new layer for
each new frame.

Step 5: Open the same menu icon on the right, and choose
"Make Frames From Layers."
The Timeline window will appear at the bottom of your screen.
Here's what it looks like: This will make each layer a frame of your GIF.

Step 6: Under each frame, select how long it should

Step 3: In the Timeline window, click "Create Frame appear for before switching to the next frame.
Animation."
To do this, click the time below each frame and choose how long
If it's not automatically selected, choose it from the dropdown menu you'd like it to appear. In our case, we chose 0.5 seconds per frame.
-- but then be sure to actually click it, otherwise the frame animation
options won't show up.

Now, your Timeline should look something like this: Step 7: At the bottom of the toolbar, select how many
times you'd like it to loop.

The default will say Once, but you can loop it as many times as you
want, including Forever.Click Other if you'd like to specify a
custom number of repetitions.

Step 4: Create a new la yer for each new frame.

To do this, first select all your layers by going to the top navigation
menu and choosing Select > All Layers.
 Next, choose the type of GIF file you'd like to save it as under
the Preset dropdown. If you have a GIF with gradients,
choose Dithered GIFs to prevent color banding. If your image
employs a lot of solid colors, you may opt for no dither.

The number next to the GIF file determines how large (and how
precise) the GIF colors will be compared to the original JPEGs or
PNGs. According to Adobe, a higher dithering percentage translates
to the appearance of more colors and detail -- but it increases the file
size.

Step 8: Preview your GIF by pressing the pla y icon.

Step 9: Save your GIF to use online. Click Save at the bottom to save the file to your computer.
Now you're ready to upload this GIF to use in your marketing!
Satisfied with your GIF? Save it to use online by going to the top
navigation bar and clicking File > Export > Save for Web (Legacy).