Difference between revisions of "Synfig/C3/Cutout-animation/English"
Shital-joshi (Talk | contribs) |
|||
(11 intermediate revisions by 3 users not shown) | |||
Line 22: | Line 22: | ||
* Use the '''Cutout tool '''on that image and | * Use the '''Cutout tool '''on that image and | ||
* Animate the cutout shapes | * Animate the cutout shapes | ||
− | |||
− | |||
|- | |- | ||
Line 79: | Line 77: | ||
Click on '''Painting.png >>Import''' | Click on '''Painting.png >>Import''' | ||
− | |||
− | |||
− | |||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|And select '''Painting.png.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|And select '''Painting.png.''' | ||
Line 87: | Line 82: | ||
Then click on''' Import.''' | Then click on''' Import.''' | ||
− | + | |- | |
− | We get the image on the '''canvas'''. | + | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| |
+ | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|We get the image on the '''canvas'''. | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Desktop >> '''Select '''paint.png >> '''Click on '''Paint.png >>Import''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Desktop >> '''Select '''paint.png >> '''Click on '''Paint.png >>Import''' | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Similarly, import the''' Paint.png '''file also. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Similarly, import the''' Paint.png '''file also. | ||
− | |||
− | |||
− | |||
|- | |- | ||
Line 101: | Line 94: | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We get two layers named '''Paint '''and''' Painting.''' | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We get two layers named '''Paint '''and''' Painting.''' | ||
− | Scale and adjust the images as demonstrated. | + | |- |
+ | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Scale and adjust | ||
+ | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|Scale and adjust the images as demonstrated. | ||
|- | |- | ||
Line 115: | Line 110: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Repeat and create 4 layers | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Repeat and create 4 layers | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Repeat | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Repeat 4 more times. |
Line 122: | Line 117: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Change the names of the '''layers''' as | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Change the names of the '''layers''' as- |
# '''Girl's head''', | # '''Girl's head''', | ||
− | # '''Girl's upper | + | # '''Girl's upper body and bucket''', |
# '''Girl’s legs, ''' | # '''Girl’s legs, ''' | ||
# '''Boy’s hand, ''' | # '''Boy’s hand, ''' | ||
Line 144: | Line 139: | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to'''Toolbox'''. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to '''Toolbox'''. Click on the '''Cutout tool.''' |
Line 150: | Line 145: | ||
− | We can adjust the mask by moving the nodes of mask. | + | We can adjust the '''mask''' by moving the nodes of '''mask'''. |
|- | |- | ||
Line 170: | Line 165: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel''' '''>> '''Click on''' Boy's hand''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel''' '''>> '''Click on''' Boy's hand''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to '''Layers panel''' and click on | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to '''Layers panel''' and click on the '''layer- Boy's hand.''' |
|- | |- | ||
Line 188: | Line 183: | ||
− | Click on''' | + | Click on''' Turn on animate editing mode''' icon. |
|- | |- | ||
− | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| | + | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move the''' Cursor''' on 30th frame >> |
Go to '''Parameter panel >>'''Change the''' amount ''' | Go to '''Parameter panel >>'''Change the''' amount ''' | ||
Line 200: | Line 195: | ||
− | Change its value from 0 to -25 | + | Change its value from 0 to -25. |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel >> '''Click on''' Girl's upper''' '''body and bucket''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layers panel >> '''Click on''' Girl's upper''' '''body and bucket''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Next, go to '''Layers panel '''and click on''' Girl's upper | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Next, go to '''Layers panel '''and click on''' Girl's upper body and bucket layer.''' |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's upper''' '''body and bucket'''>> Right-click on '''Mask layer'''>>'''New layer''' >>'''Transform''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's upper''' '''body and bucket'''>> Right-click on '''Mask layer'''>>'''New layer''' >>'''Transform''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of the '''Girl's upper body and bucket layer.''' |
Line 218: | Line 213: | ||
|- | |- | ||
− | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move | + | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Move the''' Cursor''' on 70th frame >> |
Go to '''Parameter panel >> '''Change the''' Amount ''' | Go to '''Parameter panel >> '''Change the''' Amount ''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Move the '''Cursor''' to the 70th frame and change the''' Amount '''value from 0 to -6.14. | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Move the '''Cursor''' to the 70th frame and change the '''Amount '''value from 0 to -6.14. |
|- | |- | ||
Line 229: | Line 224: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's head '''>> Right click on '''Mask layer'''>>'''New layer''' >>'''Transform''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Girl's head '''>> Right click on '''Mask layer'''>>'''New layer''' >>'''Transform''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Right-click on '''Mask layer '''of the '''Girl's head layer.''' |
− | Go to''' New layer '''and then | + | Go to''' New layer '''and then click on''' Transform. ''' |
|- | |- | ||
Line 245: | Line 240: | ||
− | Change the | + | Change the value of '''Amount '''from 0 to -10 |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Layer’s panel''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We need to rearrange the layers as | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| We need to rearrange the '''layers''' as |
* '''Boy’s hand''', | * '''Boy’s hand''', | ||
* '''Boy's body''', | * '''Boy's body''', | ||
− | * '''Girl’s head | + | * '''Girl’s head''', |
− | * '''Girl's upper | + | * '''Girl's upper body and bucket''', |
* '''Girl’s legs''' | * '''Girl’s legs''' | ||
− | |||
− | |||
|- | |- | ||
Line 265: | Line 258: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 0th frame>>'''Canvas''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 0th frame>>'''Canvas''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 0<sup>th</sup> frame and then go to the ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 0<sup>th</sup> frame and then go to the '''canvas'''. |
− | Move the mask nodes as demonstrated. | + | Move the '''mask nodes''' as demonstrated. |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 30th frame>>'''Canvas''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Place the''' cursor''' on 30th frame>>'''Canvas''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 30<sup>th</sup> frame and go to the ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Place the '''Cursor '''on 30<sup>th</sup> frame and go to the '''canvas'''. |
− | Move the mask nodes as demonstrated. | + | Move the '''mask nodes''' as demonstrated. |
|- | |- | ||
− | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Canvas window>> '''Click on''' Turn | + | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Canvas window>> '''Click on''' Turn off''' '''animate editing mode >>'''Click on '''Seek to begin >> '''Click on '''Play''' |
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on''' Turn | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on''' Turn off animate editing mode '''icon. |
Line 285: | Line 278: | ||
− | Now play the animation by clicking''' Play''' | + | Now play the animation by clicking the''' Play''' button. |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Toolbox >>Rectangle tool >> Canvas''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Toolbox >>Rectangle tool >> Canvas''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"|Draw a rectangle on the '''canvas''' for the '''background layer.''' |
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Save the file | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| Save the file | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Press ''' | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Press '''Ctrl''' and''' S''' keys to save the file. |
|- | |- | ||
Line 301: | Line 294: | ||
|- | |- | ||
| style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Render setting window''' | | style="background-color:#ffffff;border-top:0.5pt solid #000001;border-bottom:0.5pt solid #000001;border-left:0.5pt solid #000001;border-right:none;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.075in;"| '''Render setting window''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Go to the '''Render setting window'''. |
Line 310: | Line 303: | ||
>>Click on '''Render''' | >>Click on '''Render''' | ||
− | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on '''End time''' and change it to 70 . | + | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Click on '''End time''' and change it to 70. |
Line 334: | Line 327: | ||
Let us summarize. | Let us summarize. | ||
− | In this tutorial we learnt about Cutout animation in '''Synfig.''' | + | In this tutorial, we learnt about Cutout animation in '''Synfig.''' |
We learnt to | We learnt to | ||
Line 340: | Line 333: | ||
* Use the '''Cutout tool''' and | * Use the '''Cutout tool''' and | ||
* Animate the cutouts | * Animate the cutouts | ||
− | |||
− | |||
|- | |- | ||
Line 349: | Line 340: | ||
| style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Here is an assignment for you. | | style="background-color:#ffffff;border:0.5pt solid #000001;padding-top:0in;padding-bottom:0in;padding-left:0.0375in;padding-right:0.0382in;"| Here is an assignment for you. | ||
− | * Locate the Indian flag | + | * Locate the Indian flag image which is provided in the '''Code files '''link. |
* Cut the wheel part by using '''Cutout tool''' and rotate the wheel. | * Cut the wheel part by using '''Cutout tool''' and rotate the wheel. | ||
− | |||
− | |||
|- | |- |
Latest revision as of 12:22, 16 October 2020
Title of script: Create Cutout animation
Author: Shital
Keywords: Import image, Mask with Cutout tool, Create a Cutout animation
|
|
Opening Slide | Welcome to the Spoken Tutorial on “Cutout animation” using Synfig. |
Learning Objectives (Slide) | In this tutorial we will learn to
|
System requirements
(Slide) |
For this tutorial, I am using
Ubuntu Linux 14.04 OS Synfig version 1.0.2 |
In the Synfig interface | We are in the Synfig interface. |
Let us first of all save our Synfig file. | |
File >> Save >> Desktop >>Name>> Save
|
Go to File and click on Save.
|
Now let us start creating the cutout animation. | |
Synfig interface | We need to import the image in Synfig. |
Go to File >> Click on Import >>Please select a file window.
|
For that, go to File and click on Import.
|
Desktop >> select Painting.png >>
|
And select Painting.png.
|
We get the image on the canvas. | |
Desktop >> Select paint.png >> Click on Paint.png >>Import | Similarly, import the Paint.png file also. |
We get two layers named Paint and Painting. | |
Scale and adjust | Scale and adjust the images as demonstrated. |
Layers panel >>Select a Painting. layer >> Click on Duplicate layer icon
|
We need five copies of the painting layer for this animation.
|
Repeat and create 4 layers | Repeat 4 more times.
|
Layer’s panel | Change the names of the layers as-
Turn the layers off by unchecking the Show/Hide box. |
Select Girl's upper
body and bucket layer >> turn on |
Select the Girl's upper body and bucket layer and turn on that layer. |
Go toToolbox >>
Click on the Cutout tool >> draw an outline
|
Go to Toolbox. Click on the Cutout tool.
|
Slides | One-by-one turn the layers on and use the Cutout tool to mask the other layers likewise. |
Slides | With the Cutout tool, we can create freehand selection to make a mask on the imported image. |
Point to the layer on canvs | Similarly mask the paint.png layer as well. |
Save the file | Now press Ctrl and S keys to save the file. |
Layers panel >> Click on Boy's hand | Go to Layers panel and click on the layer- Boy's hand. |
Boy's hand >>Right click on Mask layer | Right-click on Mask layer of this layer. |
>> New layer >>Transform | Go to New layer and then to Transform.
|
Rotate handle >> Click on turn on animate editing mode icon | Adjust the rotate handle as demonstrated.
|
Move the Cursor on 30th frame >>
Go to Parameter panel >>Change the amount |
Move the cursor to the 30th frame.
|
Layers panel >> Click on Girl's upper body and bucket | Next, go to Layers panel and click on Girl's upper body and bucket layer. |
Girl's upper body and bucket>> Right-click on Mask layer>>New layer >>Transform | Right-click on Mask layer of the Girl's upper body and bucket layer.
|
Rotate | Select Rotate and adjust the rotate handle as demonstrated. |
Move the Cursor on 70th frame >>
Go to Parameter panel >> Change the Amount |
Move the Cursor to the 70th frame and change the Amount value from 0 to -6.14. |
Layers panel >> Click on Girl's head | Go to the Layers panel and click on Girl's head layer. |
Girl's head >> Right click on Mask layer>>New layer >>Transform | Right-click on Mask layer of the Girl's head layer.
|
Rotate | Now click on Rotate and adjust the rotate handle as demonstrated. |
Move the Cursor on 70th frame >>
Go to Parameter panel >> Change the amount of rotation |
Move the cursor to the 70th frame and go to Parameters panel.
|
Layer’s panel | We need to rearrange the layers as
|
Layers panel >> Click on Paint | Now go to Layers panel and click on Mask of the paint layer. |
Place the cursor on 0th frame>>Canvas | Place the Cursor on 0th frame and then go to the canvas.
|
Place the cursor on 30th frame>>Canvas | Place the Cursor on 30th frame and go to the canvas.
|
Canvas window>> Click on Turn off animate editing mode >>Click on Seek to begin >> Click on Play | Click on Turn off animate editing mode icon.
|
Toolbox >>Rectangle tool >> Canvas | Draw a rectangle on the canvas for the background layer. |
Save the file | Press Ctrl and S keys to save the file. |
File >> Render | Next, go to File and click on Render. |
Render setting window | Go to the Render setting window.
|
Click on End time >> change it to 70
>>Click on Render |
Click on End time and change it to 70.
|
Desktop >> Select Cut -out animation. avi >>Right click and play the animation | Go to Desktop. Double click on Cutout-animation folder.
|
Summary (Slide) | With this, we have come to the end of this tutorial.
Let us summarize. In this tutorial, we learnt about Cutout animation in Synfig. We learnt to
|
Assignment
(Slide) |
Here is an assignment for you.
|
Completed assignment | Your completed assignment should look like this. |
About Slide | The video at the following link summarizes the Spoken Tutorial project.
Please download and watch it. |
Workshop slide | We conduct workshops using Spoken Tutorials.
And give certificates.
|
Forum for specific questions | Please post your timed queries in this forum. |
Acknowledgment Slide | Spoken Tutorial project is funded by NMEICT, MHRD, Government of India. |
This is Shital Joshi along with the Spoken Tutorial Animation Team from IIT Bombay, signing off.
Thanks for joining. |