Module 7 - Introduction To Line-Test and Compositing Software PDF

ANIMATION NCII – Animation 12a
Governor Pack Road, Baguio City, Philippines 2600

Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph
MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado
INTRODUCTION TO LINE-TEST AND COMPOSITING SOFTWARE
Objectives: At the end of this lesson, students shall be able to:

1) Explain the importance of line-testing and compositing in the animation workflow and in the
in-betweening process;
2) Understand the process of line-testing;
3) Translate the time chart in the in-between in the compositing process;
4) Understand the interface and environment of the line-testing and compositing software of
choice; and
5) Apply the concepts and principles by placing the created keyframes and in-betweens into a
compositing software and creating a digital format of the animation.
Line-Testing and Compositing

 Line-testing / Pencil testing
o Frames are photographed / scanned and passed through line-testing / compositing software
o Checked to see if the animation is going in the right direction
 It depends on the studio, project restraints, and/or the skill of the animator whether all
scenes or just a number of them are tested
 Most important scenes are always line-tested (cleaned-up keyframes and in-betweens)
o Frames that are tested:
 Keyframes only (usually cleaned-up)
 Keyframes and in-betweens (in-betweens are usually rough)
o Used to check:
 Movement of the actions and/or facial expression
 Posing and impact of the action and/or facial expression
 Modeling of the character
 Interaction of the character with other characters in the frame (if possible)
 Character compatibility with effects animation (smoke, dust, lightning, fire, etc.)
 Interaction of the character with the background (includes sizing on the frame)
 Lighting / shading (if possible)
o Materials for line-testing (traditional):
 Computer with line-testing / compositing software
 Camera attached to the computer (webcam, in-built camera, phone, etc.)
- Faster execution compared to using a scanner
- Requires a peg bar to make sure that the frames do not shift during photo taking
- May not have a clearer result compared to scanners
- Best used for single character animations with little checking on background / sizing
- Not recommended for use for the final output
 Scanner attached to the computer
- Usually flatbed (scanner is below a glass file; paper is
flattened and upside down; what most home scanners
are) or overhead (scanner is above the document; used
in most studios; photo on right)
- Slower execution compared to using a camera
- Can be aligned without a peg bar, though a lot of studios
have a peg bar attached outside of the scanner
- Has a cleaner output with darker lines, which can be
edited out easily so that only the line is seen (white space
that is not the clean-up line is removed)
Page 1 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
- Better used if there is a need to check the interaction of the character to others
- Also used if the frames are already final (cleaned-up and with color)
 Traditionally, a specialized overhead glass scanner connected to a camera is used when
computers where not utilized in the animation process (photos below)
 Compositing
o Process of assembling all elements into one final video
 Elements from paper:
- Cleaned-up and colored keyframes and in-betweens
- Final backgrounds
- Hand-drawn objects
- Hand-drawn effects animation (i.e. the glitter animation in Cinderella is hand-drawn)
Image reference: https://64.media.tumblr.com/6d4d2554f711c05b4b09a384d958dffe/

tumblr_omfilrl3pr1t0xyebo1_400.gifv
 Elements to be added digitally:
- General camera movement (movements that can easily be done such as panning,
zooming, etc.)
- Object movement (movements that is easier done digitally; i.e. sliding door)
Image reference: https://giffiles.alphacoders.com/199/199112.gif
Page 2 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
- Background movement (parallaxing)
Image reference: https://pbblogassets.s3.amazonaws.com/uploads/2015/05/Dirt-Road-Zoom-

Example.gif
- Lighting and shadowing (if not added in the frames; i.e. the flowing cape has
distinguishable light and shadow as it moves)
Image reference: https://pa1.narvii.com/7167/

cd5886a7888a68ce12a70a28b3b349af34a120a7r1-500-265_hq.gif
- Color grading (i.e. changing the base colors appropriate for nighttime)
Daytime (usually base colors)
Image reference:
https://2.bp.blogspot.com/ -
Z5wKvU2Z12g/U0KIhOKGlVI/
AAAAAAAAAjU/BRTNPdjI2jQ
/s1600/Grave.of.the.Fireflies.
1988.720p .BluRay.x264-
PSYCHD-0020232.jpg
Nighttime
Image reference:
https://scontent-lga3-
1.cdninstagram.com/v/
t51.2885-15/sh0.08/e35/
s640x640/89926926_
2807561896024507_
9112800317428765360_n.jpg
Page 3 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Nighttime + multiple yellow-

colored light sources
Image reference:
https://ichef.bbci.co.uk/
news/976/cpsprodpb/15245/
production/_100779568_captur
e. jpg
Nighttime + reddish light

source, unknown direction
Image reference:
http://theoddapple.com/ wp-
content/uploads/2020/06/
grave-of-the-fireflies-1988-
ending-explained-1024x576.jpg
- Manipulation of existing lighting and shadowing (i.e. overexposed light such as streets
lights on a dark background, making it seem like the lights are of neon / halogen)
Image reference: https://i.pinimg.com/originals/c1/ca/0e/

c1ca0efc0e33c41a62e7e378a067eb52.gif
- Digital objects (i.e. though the animation is done by hand, the typewriters are
computer-generated)
Image reference: https://data.whicdn.com/images/244875996/original.gif
Page 4 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
- Digital effects animation (ex: particles such as dust and sweat, aroma such as smoke
and wind, light trails, light sparks, explosions, water animation, etc.)
Image reference: https://64.media.tumblr.com/e40d7f9579c60da9038fa00039abc253/

tumblr_mly4i2z2Vg1qzk4cro3_500.gif
o Includes using the time chart and exposure sheet into the frames to make sure that the timing
is consistent
 Important aspect especially if one time chart utilizes different methods of timing (animated
in 1s and 2s, etc.)
Line-Test Software/Application
 Basic features needed for a line-test software/application
o Import of photos
o Manipulation of multiple layers
o Timeline / animation option
o Can be saved as GIF and/or video format
o Other features:
 Brush / pencil / ink stabilization / smoothing – setting wherein the software shall
automatically smoothen the line drawn in real-time; a higher smoothing can also mean
that there is little variation to the line
 Camera / scanner straight to software – one can connect the webcam / scanner to the
software, take a photo / scan directly from the software, and remove any white space
automatically
 Coloring – the frames can be colored easily using a paint bucket tool without much touch-
ups needed
 Exposure sheet view – showcases a digital exposure sheet that is automatically transcribed
based on the timeline; can also be used to animate the timing
 Importing video – a video can be uploaded as one layer, which can then be used for
rotoscoping
 Peg bar option – showcases a peg bar (anchor point), which allows for the paper to be
manipulated and rotated without the paper / canvas destroyed
 Peg hole realignment – drawings done traditionally can be aligned automatically based
on the peg holes
 Pen tool – allows for easier creation of a line even without a drawing tablet
 Onion skinning – drawings before and after the current drawing is shown, usually colored or
tinted translucently
 Sound management – a sound file can be uploaded as one layer, and the animation can
be timed based from that
Page 5 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Note: In this lesson, what shall be used for the demonstration are Krita (desktop – Windows,
Apple, Linux) and FlipaClip (mobile – Android, iOS) as they are both free, accessible to most
platforms, and can be used both for traditional and paperless animation. If you wish to use other
application(s) that is/are more convenient for you, you are free to use them.
 Examples (Desktop)
o CTP Pro
 Line-test, coloring, and compositing software used for traditional animation
 Considered as ‘old’ software – it was used when computers were first involved in
animation, but is now rarely used
 Has more ‘complete’ features necessary for traditional animation (import of drawings,
 Best used for traditional hand-drawn animation
 Paid software; can be used only in Windows computers with low-end device specifications
o Digicel Flipbook
 Drawing, line-test, coloring, and compositing software for traditional & paperless animation
 Does not have many features compared to the other software, but it is fast and easy to use
 Best to use as a student / independent animator
 Can be used for both traditional hand-drawn and paperless animation
 Paid software (free version is available, but with watermark); can be used in both Windows
and Mac computers even with low-end device specifications
Video reference: https://youtu.be/mlEnxtFzG8U

Page 6 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o TVPaint Developpement
 Drawing, line-test, coloring, skeleton, and compositing software for traditional, paperless,
and 2D animation
 Seen in a number of animation studios used for multiple purposes
 Can be used professionally to render an entire animation
 Has a powerful forum and tutorial repository for reference (Link:
https://www.tvpaint.com/v2/content/article/support/tutorial.php)
 Paid software (trial version is available); can be used in Windows, Mac, and Linux
computers with mid-high level computer specifications; Android version is available
o ToonBoom Animation
 Drawing, line-test, coloring, modeling, skeleton, simulation, and compositing software for
traditional, paperless, 2D, and 3D animation
 Seen in a lot of national and international animation studios and can be used for a lot of
purposes (aka “used in the industry”)
 Can be used professionally to render an entire animation
 Has three main products:
- Harmony – focuses on the use of custom brushes, meant to be used for freehand
illustration and animation
- Storyboard – focuses on features for more efficient storyboarding
- Producer – collaboration software and/or website focused on tracking progress
 Paid software (with trial versions); used in Windows and Mac computers with high computer
specifications
Page 7 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Examples (Mobile)
o Animation Desk
 App that focuses on creating hand-drawn frame animation
 Mainly utilizes frame-by-frame animation, no timeline animation is available
 Can also be used for storyboarding and creating illustrations
 Paid application; can be used in Android and iOs devices; Windows and Mac software are
also available
o Procreate
 App that focuses on creating illustrations, but can be used for animation as well
 Can be activated by turning on the “animation assist” feature
 Utilizes the use of frame animation; no timeline animation is available
 Mostly used for creating simple animations; not recommended for creating a full animation
 Paid application; can only be used in iOS devices
Page 8 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Others (PC)
o Adobe Photoshop
 Used for photo manipulation, illustration, and graphic design, but has animation properties
 Animation can be done by importing images and/or through freehand drawing
 Animation is available in frame animation and timeline animation
 Paid application; can be used in both Windows and Mac computers
o Macromedia Flash
 Main tool for creating earlier animations
 Can be used for 2D and freehand animation, but importing images is not recommended
 Considered as ‘obsolete’ – as there is an upgraded variation of this software, and utilizes
the Flash animation extension file (.swf) and needs a Flash player to be played (which is not
seen in a lot of browsers)
 Paid software; can be used in both Windows and Mac computers with mid to high-end
device specifications
o Adobe Animate
 Modeling, skeleton, and puppeting used for 2D and vector animation
 Turns any drawn lines into vector lines
 Also used for animation for motion graphics and typography
 Later variation of the Macromedia Flash
 One of the main tools used for animating 2D animation in the industry
Page 9 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Paid software; can be used in both Windows and Mac computers with mid to high-end
device specifications
o Autodesk Maya
 Allows creation of full 2D and 3D animations
 One of the main tools also used in the animation industry
 Paid software (with trial version); can be used in both Windows and Mac computers with
high-end device specifications
Before Line-Testing – Camera

 Considerations for line testing using a camera:
o Consistency of light source
o Consistency of alignment and sizing of drawings
 Equipment used for this demonstration:
o Phone holder / lazy arm
o Smartphone
o Flat surface
o Frames to be photographed: ½ crosswise short bond paper (8.5” x 5.5”)
 Steps:
o Make sure that you have a surface that is flat to take the photos on. The light source should be
in front so that any shadow from the body is prevented. Another light source (natural light,
phone camera, flashlight, ring light, lamp, etc.) can be placed facing the person taking the
photo to achieve this.
Page 10 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o It would be best that the camera is attached to a stand / arm (sample seen below) so that
movement would be minimal.
o Place your drawn frames into a stack. The first drawing in the animation is placed at the top of
the stack whereas the last frame should be at the bottom.
Image reference: https://i.imgur.com/SuuuJ68.mp4

o Turn on the thirds grid of your camera to further aid in making sure that the photos are
consistently aligned.
o Make sure that the camera is pointed directly at the drawing. Make sure that the drawing is
straightened, so that it would be easier when cropping later (left is correct; right is incorrect).
Page 11 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o Make sure that the camera is pointed directly at the drawing. It should be directly faced
down, with no obvious angles (left is correct; right is incorrect).
o Make sure that the space in the photo is the drawn frame (left is correct; right is incorrect).
o Make sure that the photo is clean and crisp. Prevent any blurs.
o You can use another paper with markings at the edges to guide your camera where the limit
should be (if there is some difficulty to finding the middle of the photo).
o The quality of the photo is not of utmost importance. Simply make sure that the drawing is
clear. However, it is recommended to try and make sure that the final photo is at its best
condition.
Page 12 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o Use a photo editor to crop out what is unnecessary and to make sure that all are around the
same size.
Before Line-Testing – Scanning

 Equipment used for this demonstration:
o Computers with Windows 10
o HP flatbed scanner + printer (most scanners utilize an A4 size)
 It would be best if the computer is installed with the appropriate driver if necessary
 Steps:
o Scan the drawing that shall first appear in the animation. It would be easier on the naming
convention later.
Image reference: https://i.imgur.com/SuuuJ68.mp4
Page 13 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o When placing the drawing into the scanner, it would be better if it were aligned in the edges
than placed in the middle.
Image reference: https://i.imgur.com/iqGyMmF.mp4

o Find the symbol that indicates where the scanner head would first be placed. Close the lid.
o To begin, open the “Control Panel” of your computer by using the Search option or by clicking
on the Windows button on the lower left portion of your screen.
o Select on the “Devices and Printers” option.
o Select the printer you wish to choose. Countercheck first if the printer is online and ready.
Page 14 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o Right click on the printer and select “Start Scan”.
o When opened, a prompt like this shall show up.
o Change the color output from “color” to “black and white”. Change the photo extension and
resolution if you wish to. Afterwards, click on “Scan”.
o When successful, another prompt shall show up. When scanning, it is recommended to add
some pressure on the top bed when scanning. Also make sure that the scan is entirely
complete before proceeding to the next one.
Page 15 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o After the scanning process, another prompt shall open up prompting the name and
destination of the scanned image. Click on “More options”.
o Another prompt for “Settings for Scanners” shall open. You may change the location, if there is
a folder, as well as the name of the file. If finished, click on “OK”.
o When choosing a naming convention, make sure to use the same name for all of the scanned
drawings. It would automatically add a number at the end. If finished, click on “Import”.
o Another prompt shall showcase the process of importing the scanned image.
o A window shall open showing the location of the scanned image. If the scanned images share
a name, then a number will come after showing the arrangement of its scanning.
Page 16 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
o The scanned images, if done correctly, should look like these:
o Use another tool to crop them out and make sure that that they are around the same size.
FlipaClip
 Free mobile application (Android, iOS) and desktop software
(Chrome extension) mainly used for creating frame animations
 Can also be used in creating full illustrations
 Contains essential tools necessary for creating animations
 Lightweight and easy to use
 Not recommended for use when creating intensive animations (i.e. animations that are a sizeable
minutes long, animations with many layers, etc.)
 Premium version is available for more features, and removal of ads and watermark
 Features for Animation:
o Frame animation; no timeline animation
o Basic illustration tools that are compatible to digital styluses
o Onion-skinning
o Multiple frame sizes and outputs
Page 17 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Interface – FlipaClip
 Header (red) – includes fundamental functions when editing
the animation; includes the following functions (from left to
right):
o Ruler
o Copy frame
o Paste frame
o Undo action
o Redo action
o Resize frame
o Other settings (itemized below)
 Illustration Tools (yellow) – basic tools that can be used for
illustration and animation; includes the following tools (from
left to right):
o Brush
o Eraser
o Lasso
o Paint bucket
o Text
 Canvas (green) – main placement of the animations,
illustrations, and imported images and/or videos; some
important notes are:
o Can be resized by pinching around the canvas screen
o Only one frame is shown at one time
o Previous frame is shown through onion skinning
 Other Tools (blue) – showcases other necessary tools such as:
o Music – addition of music and sound effects using a
timeline
o Play preview – plays the current progress roughly
o Layers – showcases the layers used in the highlighted frame
 Frames (purple) – showcases the frames before and after the current frame; adding a frame and
editing the frames can also be done here by doing a long tap
Other Settings (orange):

o Project settings – allows you to modify the settings
even when an animation is already in progress (project
name, canvas size, frame rate)
o Frames viewers – showcases all of the frames in the
screen without the canvas
o Onion – turns on/off the option to see the previous
frame in a lighter transparency
o Grid – turns on/off the option to add grids in thirds for
better alignment
o Add image – allows to add external images from the
device storage
o Add video – allows to add external video files from
the device storage
o Make movie – aka render; used to create the final
output
Page 18 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Line-Testing with FlipaClip

1. When 2. When
opening the creating a
application, new project,
there would there would
be two preset be a number
projects seen. of things to
Create a new set: project
project by name,
tapping on background,
the + button canvas size,
at the bottom and frames
(right) of the per second. If
screen. you are
satisfied with
the changes
done (in
numbers 3-5),
you may tap
on “Create
project”.
3. Select the 4. Select the

canvas size frame rate
that you wish you wish to
to use. This use for the
setting can be project. In this
changed, but app, ‘frames
it is better if per second’
this is set means the
already. number of
(Note: In the drawings that
next activities, it will take to
the default create a
canvas size is second. So:
YouTube / 1s – 24
Facebook 2s – 12
(720p)- 1280px 3s – 8
x 720px. You This setting
may opt to can be
use something changed
smaller if your later.
device
cannot
handle a large
canvas size.)
Page 19 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
5. You may 6. Once the

opt to change project has
the been
background created, the
for the project interface shall
by choosing be seen with
the preset a blank
scenes, paper, canvas. If you
or by wish to use
uploading an digital
image from animation,
your device. you may start
using the
illustration
tools.
7. If using 8. Your
traditional device shall
animation, take you to
then click on your camera
the “Other roll. You are
settings” (triple to select only
dot on the one (1)
upper right image per
corner) and layer.
tap on “Add
image”.
Page 20 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
9. The 10. Once the

selected frame has
image shall be been resized
uploaded into / completely
one of the redrawn, tap
layers on your on the + sign
frames. Rotate on the
and resize bottom part
using the of your
markers on the screen
corners and (beside
sides to fit into frame 1).
the canvas.
11. The new 12. Draw the

frame will next action
appear. In accordingly,
default, the or upload an
previous image and
frame shall be rotate / resize
seen albeit a as necessary.
bit Make sure
transparent. that the sizing
This is what is and position
called “onion of the current
skinning”. frame is in
line with that
of the
previous
frame.
Page 21 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
13. Repeat the 14. Once all

same steps as of the frames
necessary until are finished,
all of the tap on the
frames are “Other
created. You Settings”
may use the option again
play preview and tap on
button to see “Make
how it looks movie”.
like as the Before that,
process is make sure
being done. that the
Frames can canvas size
also be and frame
moved for rate are final.
one to
perform pose-
to-pose
animation.
Change the
frame rate
and canvas
size if
necessary.
15. You will be 16. You may
redirected to modify the
formatting the final file
final settings extension. It is
such as the better that
canvas size the GIF shall
and final be used.
output. If
satisfied, you
may click on
“Make movie”
and create
the final
output. The
speed of the
rendering
process will
depend on
the number of
frames, layers,
and
complexity of
illustration.
Page 22 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Final Output:
Image reference: https://i.imgur.com/JSvx52z.gif
Krita
 Professional, free, and open source painting program for desktop (Windows, Mac, Linux)
 Mainly designed for illustration and comic making, but has features for animation
 Requires mid to high level device specifications
 Can be used for students, expert, and professional animation
 Can be used for intensive frame animations
 Features:
o Utilizes frame animation, but timeline animation can be used as well
o Storyboarding option (follows Japanese animation format)
o Extensive onion skinning
o Huge tutorial documentation (https://docs.krita.org/en/)
Krita – Interface for Animation
 Krita has a default workspace that is not ideal for animating. However, it has different workspace
options for the user to easily access the dockers and tools necessary for animation. To solve this,
click on Window from the main toolbar >> Workspace >> Animation.
 Main Dockers for Animation:
o Workspace (red) – Space / Canvas where the animation / drawing are done and played
o Animation (yellow) – Consists the basic controls to play the animation; Includes player controls,
play speed (frames per second), frames to be played, onion skins, and other framing options
o Timeline (blue)– Main docker for manipulating the positioning of the frames; Contains the
layers, the frames per layer, and options for visibility and visibility for onion skins
Page 23 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Onion Skin and Light Box Features

o To configure the onion skin window, click on the Onion Skins button located at the lower
left corner by the Animation docker or by going on the main toolbar and clicking Settings >>
Docker >> Onion Skins. The opened window should look like the one below:
o Configuring Onion Skins:
o Frames – Zero (0) represents the current frame. Any frame at its right (positive numbers) are
the frames after and any frame at its left (negative numbers) are the frames before.
o Visibility – Clicking the number would change the visibility of the onion skin of that frame (if
highlighted, it is visible; if not, then it is not visible).
o Opacity – Changing the length of the bar graph would change the opacity of the frame.
The higher the bar, the darker the image would be.
o Coloring – The onion skins are also color-coded. By default, the preceding frames are a red
tint while the succeeding frames are in a green tint. The farther away the frame is from the
referenced frame, it becomes lighter. You can also change the color by clicking the “Filter
Frames by Color” setting.
 Light Box – Application of the onion skins to certain layer. By default, no layer has an activated
onion skin. To activate the light box, click on the Light box button on the layer which is being
animated. If there are existing frames, then you would be able to see the frames before and
after the selected one.
Line-Testing with Krita

 After opening the application, you shall see the home page. Click on the “New file” under the
“Start” section or by pressing Ctrl + N.
Page 24 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Afterwards, a new window shall appear where the settings of the file can be placed. When
uploading images to the animation (if using traditional animation), it is recommended that the
canvas size and resolution matches that of the scanned version. After changing the image size,
click on the “Create” button on the lower right corner.
 You shall be directed to the new interface. Change the interface first by clicking on “Window” >>
If you wish to utilize digital animation and draw, you may use the brush or pen tool on the toolbar
docker on the left hand side. Once clicking the brush, you can also change some settings like
brush type and texture, size, and color.
 For those using traditional animation and have created the frames, click on File on the header
and select “Import animation frames”.
Page 25 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 A new window shall appear. Click on the “Add images” button at the lower left corner.
 Another window shall open. Select all of the frames needed. It is recommended that the frames
are numbered to determine their arrangement, making it easier for the software to organize it.
 After the images have been uploaded, click on the “OK” button.
Page 26 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 All of the uploaded images shall be uploaded to one frame each, according to the
arrangement. However, in some cases (such as this), the frames are too small than the canvas.
 Use the resize tool on the toolbar docker on the left side, and resize and rotate if necessary.
 Do this action for all frames.
 For those who are using digital animation, make sure that there is only one action per frame. You
can do this by modifying the frame number on the Animation docker. Utilize the onion skinning
and light box options to counter-check the progress of your animation.
 You can click on the Play button at the Animation Docker (left side) to preview it. Make sure that
the “End” frame is the last drawn frame so that the white space can be eliminated.
Page 27 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Once finished, click on the File from the header and select “Render Animation”.
 Another window shall open. On the Export section (top most part), select the “Video” option.
 It shall turn into this format. Modify the first and last frame, width and height (constraint proportions
are applied here), and frame rate.
 There is a need to install the FFMpeg file to render the animation into GIF or MP4. This is a translator
to turn the images into video or GIF files:
o Go to this website: https://www.gyan.dev/ffmpeg/builds/
o Select this file to download (use the Search option of your browser, then paste):
https://www.gyan.dev/ffmpeg/builds/ffmpeg-release-essentials.zip (74MB)
o After being downloaded, extract to any place on your computer.
o On the FFMpeg tab, find the location where you have placed your FFMpeg files, and add:
\bin\ffmpeg.exe
Page 28 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Make sure that you are rendering a GIF image and determine the location where the GIF shall be
placed. Afterwards, click on OK.
 The rendering process happens when this window pops out. Wait until this is finished and see if
your final output has been done.
Final Output:
Image reference: https://i.imgur.com/OPsjo0P.gif
Further Reading / Watching:

 FlipaClip. (2019 November 5). Intro to FlipaClip [YouTube Video]. Retrieved from
https://www.youtube.com/watch?v=7AiEsiEoBq8
 Krita. (n.d.). Render Animation [Documentation Website]. Retrieved from
https://docs.krita.org/en/reference_manual/render_animation.html
 Krita. (n.d.). Welcome to the Krita 4.3 Manual! [Documentation Website]. Retrieved from
https://docs.krita.org/en/
References:
 Technical Education and Skills Development Authority (2018 February 27). Training Regulations
for Animation NCII – Version 02. Quezon City
Page 29 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Williams, R. (2001). Animator’s Survival Kit. Faber and Faber: United States.
 Blair, P. (1994). Animation. Walter Foster Publishing: California.
 ToonBoom. (n.d.). Paperless Animation Workflow, Toon Boom Learn. Retrieved from
https://learn.toonboom.com/modules/animation-workflow/topic/paperless-animation-
workflow
 CTP Pro Official Website. https://www.cratersoftware.com/
 Digicel Flipbook Official Website. https://digicel.net/
 TVPaint Developpement Official Website. https://www.tvpaint.com/
 ToonBoom Official Website. https://www.toonboom.com/
 Animation Desk Official Website. https://www.kdanmobile.com/animation-desk
 Procreate Official Website. https://www.procreate.art/
 Autodesk Maya Official Website. https://www.autodesk.com/products/maya/
ACTIVITY 7: Line Testing Set-up

Part One. Materials and Equipment: Please select the materials and equipment that you shall be
using for the next few activities (in-betweening). There is no wrong answer for this, but you are asked
to commit on the materials and equipment that you have indicated to use, and to set them up when
necessary. Wrong answers shall be instated if an answer contradicts another answer or if answered
illogically. (5 items, 5 pts.).
1. What shall be the medium that you will be using for the in-betweening process?
A. Traditional
B. Digital / Paperless
2. What is the main software / application shall you be using for line testing and compositing?
A. Adobe Photoshop
B. CTP Pro
C. FlipaClip
D. Flipbook
E. Krita
F. TVPaint Developpement
G. Others
3. For those who chose the “Other” option, please specify what software you are going to use. For
those who has specified their line testing software / application previously, type “N/A” (capital
letters). __________________________________________
4. For those who chose traditional animation, what device shall you be using to translate your
drawings into something digital?
A. Scanner
B. Smartphone camera
C. Standalone camera (DSLR, mirrorless, etc.)
D. Web camera
E. Others
F. Not applicable; will be using digital animation
5. For those who chose digital animation, what device shall you be using to draw the frames
digitally?
A. Drawing tablet
B. Finger
C. Mouse
D. Stylus
E. Others
F. Not applicable; will be using traditional animation
Page 30 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
Part Two. Installation of Line-Test Software/Application: Install the software / application that you shall
be using for the line testing and compositing for the next few activities. Send a screenshot with the
following details as proof that you have installed it.
 Open a new file. You may use any size and orientation. Make sure that the canvas fills up the
entire screen as much as it can.
 Your full name and section should be placed on the canvas.
o Make sure that the information is readable.
o For those who shall be using traditional animation, please write your name and section on
any paper, take a photo of it, and upload it to a frame of the software you are using.
Please do not use any digital typography. Here is a sample screenshot using FlipaClip:
o For those who shall be using digital animation, please write your name and section on the
canvas itself. Please do not use any digital typography. Here is a sample screenshot using
Krita:
Page 31 of 32
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
 Make sure that the screenshot has a file extension of .jpeg, .png, or .gif. Do not use Word
format (.docx), PDF (.pdf), or any other file format.
 You shall be given five (5) points if all conditions are met. If not, you shall only be given three
(3) points.
 Also, please be reminded to explore and familiarize yourself with the software / application.
There shall be no tutorial on how to draw frames using these applications so for those who shall
be using digital animation, please take time to explore and practice drawing using the
software.
How to Submit:
 For those with Canvas accounts, answer “7.1 – Materials and Equipment” and “7.2 –
Installation of Line-test Software / Application” under “Week 7 – Introduction to Line-Test and
Compositing Software”.
 For those without Canvas accounts, answer “7 – Line-Testing Set-up” as a Google Form.
Submission Channels:
 Canvas K-12 LMS (Quizzes and Assignments)
 Google Forms
PREPARATORY ACTIVITY: This activity shall NOT be graded. However, it shall be related to your future
activities. It is recommended that you try to have an idea formulated and to start drafting some
sketches.
 Design one (1) character who is inspired by yourself. Some ideas (but not limited to) that could
be utilized are the following:
o Exaggeration of one of your main personality traits
o Exaggeration of a ‘persona’
o Exaggeration of yourself experiencing an event / emotion
o “Gender-bent” version
o Yourself on another dimension / timeline / time period
o Your most authentic self
 Rules in conceptualizing the character:
o It must be an ORIGINAL character who has been created by the student
o Keep the character and the design rated PG-13
 Please include the following:
o Name
o Short description of the character (1-2 sentences; briefly explain how is this character
related to yourself)
o Three descriptions for the personality (phrases only)
o Two emotions / #mood that is predominantly experienced by the character
o Full-body turnaround (front, side, ¾)
Future Activities:
 WW4: In-betweening Exercise (Head Turn)
 PT1: Standard Walk Cycle
 PT2: Personalized Walk Cycle
Page 32 of 32

Module 7 - Introduction To Line-Test and Compositing Software PDF

Uploaded by

Copyright:

Available Formats

Module 7 - Introduction To Line-Test and Compositing Software PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module 7 - Introduction To Line-Test and Compositing Software PDF

Uploaded by

Copyright:

Available Formats

ANIMATION NCII – Animation 12a

Governor Pack Road, Baguio City, Philippines 2600

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

INTRODUCTION TO LINE-TEST AND COMPOSITING SOFTWARE

Objectives: At the end of this lesson, students shall be able to:

Line-Testing and Compositing

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://64.media.tumblr.com/6d4d2554f711c05b4b09a384d958dffe/

Image reference: https://giffiles.alphacoders.com/199/199112.gif

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

- Background movement (parallaxing)

Image reference: https://pbblogassets.s3.amazonaws.com/uploads/2015/05/Dirt-Road-Zoom-

Image reference: https://pa1.narvii.com/7167/

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Nighttime + multiple yellow-

Nighttime + reddish light

Image reference: https://i.pinimg.com/originals/c1/ca/0e/

Image reference: https://data.whicdn.com/images/244875996/original.gif

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://64.media.tumblr.com/e40d7f9579c60da9038fa00039abc253/

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Video reference: https://youtu.be/mlEnxtFzG8U

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Before Line-Testing – Camera

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://i.imgur.com/SuuuJ68.mp4

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Before Line-Testing – Scanning

Image reference: https://i.imgur.com/SuuuJ68.mp4

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://i.imgur.com/iqGyMmF.mp4

o Select on the “Devices and Printers” option.

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o Right click on the printer and select “Start Scan”.

o When opened, a prompt like this shall show up.

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

o The scanned images, if done correctly, should look like these:

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Other Settings (orange):

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Line-Testing with FlipaClip

3. Select the 4. Select the

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

5. You may 6. Once the

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

9. The 10. Once the

11. The new 12. Draw the

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

13. Repeat the 14. Once all

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

Image reference: https://i.imgur.com/JSvx52z.gif

MODULE 7 – Ani12a Subject Teacher: Lovely Jenn A. Reformado

 Onion Skin and Light Box Features

Line-Testing with Krita