[TUTORIAL] Start animating with OpenToonz 1.2

Welcome to the second verson of my beginner OpenToonz tutorial!

This tutorial is about setting OpenToonz up and how the basic tools work so you can start making simple animations in it. More specific tutorials may come in the future.

UPDATE: While this tutorial is for an older version, there is only one thing that is different in newer versions and I mention it under a different UPDATE segment later. Some bugs may also be fixed.

The images are smaller for easier scrolling so click them to look at the big versions.
I will assume some basic computer literacy but if anyone finds anything hard to follow, let me know in the comments and I will try to help.

At the very bottom you will see a few sample animations which which can be made using only tools explained in this tutorial (animation skills not included).

[[ If during the tutorial you see an italic paragraph in square brackets like this one, you are free to skip it since it does not contain information required for the tutorial. But you may read through it to get further insight into some features that will be covered in further tutorials but for now will just have a short summary for those curious about these things.]]

NOTE: I am running the linux version but I used the windows version before and I believe they are all identical. At the time of making this the current version is 1.2.0.2. I have a tutorial for the earlier version 1.1.3 here.

What is OpenToonz?

OpenToonz is a free open source 2D animation program for Windows, Mac and Linux. It is based on an earlier version of the software used by Studio Ghibli but has now been released to the public and for everyone to use.
With that in mind, it has existed for a bit only 2 years in it’s current state so there are quite a few bugs and issues with it and the documentation is pretty convoluted but what exists can be found here. The software is rather complex and most find it hard to get into since some of it’s systems are very foreign to those that are used to ToonBoom or Flash/Adobe Animate.

However, it’s completely free and has frequent updates and it already has all the features required to make a full animated movie without any other applications. It is also built with solid traditional animation principles and made for working in a team, so I believe it is worth the effort to learn to use it even with it’s flaws since it will only get better with time.

WARNING: OpenToonz still has a lot of glitches and tends to crash without warning from time to time. There is an autosave feature, but you should be aware of the risk regardless. If you are OK with that, you may proceed.

Where do I get it?

The Windows and Mac versions can be acquired from here.
The linux appimage can be acquired from here (and you can get builds for other systems here as well), or if you are pro you can try and compile it from the source.

Anything else I should get?

Since OpenToonz doesn’t posses native support for exporting .gif animations (and a few others, like .webm) in order to get it working, you should download FFmpeg and unpack it somewhere practical. Make sure you downloaded the correct ffmpeg for your operating system.
Then, in OpenToonz once it’s open go to the menu on the top left:
file → preferences (ctrl+u) → import/export category and in the FFmpeg path on the right enter the path to the folder you extracted FFmpeg to (you can click ‘…’ on the right to navigate too). Make sure the path is to the folder with a file called ffmpeg! 

After that, you will be able to export to more formats, including gif.
WHILE YOU ARE HERE, also go to the Drawing category right below this and make sure the  default level type is set to Toonz Raster Level.

 
UPDATE: If you are on a newer OpenToonz version, while in the Drawing category, make sure that under the 'Enable AutoCreation' category all the checkmarks are OFF. AutoCreation checkmark itself should be on, but the ones below shouldn't. Trust me, with the way I approach drawing in the tutorial, if these were on, things would break down the line.
 You will need to restart OpenToonz for the export to work, so consider doing it now.

[[You don't need to understand what the level options are yet, but for those interested, to summarize. There are 3 types of graphic formats you can work with in OpenToonz.
Raster Level is the regular bitmap level that most drawing other programs like Photoshop use, but is not too animation friendly.
Toonz Raster Level acts a lot like the Raster level but has several animation friendly features, like differentiating between lines and fills and updating color changes everywhere.
Toonz Vector Level uses math and vectors for showing graphics, like flash/adobe animate or illustrator do and also has some animation friendly features.
I have a separate tutorial covering these in detail over here]]

Quick Start guide:

Creating a new project:

Once you open The application you will get the startup window with two points of interest:

TIP: if you closed the startup window by accident you can open it by clicking on help → startup popup (alt + s)

Unless you have a ctrl+s trigger finger (like I do) you should consider turning on autosave on the bottom right there for the interval that suits you. There will be crashes and you don't want to be left without hours of work.
The default project is the Sandbox. Do NOT use the Sandbox for actual work, since it is not intended for it and it is always a better idea to make a new project and just experiment in it.

You can create a new project by clicking the “New Project…” button in the startup window and you will be lead to this:

 
You should worry about just entering the Project Name for now, even though you have a lot more options here.

[[ For those curious how projects are handled in OpenToonz, there is a root directory for projects as seen at the top and any new project that is created is added there. If you do not like the default folder (I didn't), you can create a new one through File→Preferences...→ General tab → Additional Projects near the bottom and add a custom project path.
As for the individual projects, they get those subfolders listed in the screenshot and OpenToonz handles almost all files separately (all drawing sets are separate, scene data, all animation data, all effects, inputs, outputs, palettes, etc). This is a VERY good thing for those working with version control systems when large teams are involved, and everyone is working on different parts of the project simultaneously, which is not quite possible with a single .psd file for example. But if you are working alone, it should not matter either way. ]]

Creating a new Scene:

After the project is created you will need to create the first scene while still in the Startup Window. A project can have many scenes and they are kind of what new untitled documents you create are in other programs, though scenes can share resources from the same project, for example.

To create a new scene, you need to at least enter the name for it but you can enter the initial camera size (or choose one from a dropdown) and the framerate.
After you are done, click Create Scene.
NOTE: I would advise to ALWAYS use the Startup Window to create new scenes, since doing it from the file menu just make a blank scene for currently active project without prompting for any of these properties, which is probably not what you want.

Basic Room and Setting up your own:

Once you get started you have the scene ready, you should have the same (or at least similar) setup as this screenshot:

This is the Basic Room and it has what OpenToonz things are the recommended tools to get stuff made. I however think for getting started you need a lot less, so we will make a new room with just the bare minimum as to not worry about all the extra panels. You can see all the rooms that are available by default all the way on the top right (with the Basic room selected).

You can make new rooms and change existing ones, so for now right click on any of the rooms and select New Room.
NOTE: If by any chance right clicking does nothing, you may have accidentally clicked the padlock in the top right corner and locked the rooms, so click it again to unlock them.

A new Room should appear to the left of the Basic room. You can click it to open it or double click it to rename it (I named mine “tutorial” for this).

Once you open it it will be completely empty. To get panels into it, at the top left click Windows → ComboViewer.

A little window will appear and as soon as you drag it by it’s top, it will snap once released and cover the entire room.

Do the same steps for two more windows, and snap them to the edges where you feel you will like having them:

Xsheet (I snapped it to the bottom)

Palette (I snapped it to the right side above the Xsheet)

BUG WARNING: for me it doesn’t want to snap when my OpenToonz window is maximized. It might not happen to you, but if you don’t see the red snap line appear when dragging the window to the edges, that might be the cause of it.
TIP: if you double click the top of the little windows at any time they will maximize. Double click their top again to return them to their original size

Xsheet can in this newest OpenToonz version turn into a timeline so click the button in the Xsheet that says... Xsheet:

I will thus refer to it as the Timeline going forward.

[[ Xsheet and the timeline function pretty much identically, just the Timeline has time flowing from left to right with the layer at the top being on the top when drawing, while the Xsheet has time flowing from top to bottom with the rightmost column being on top. It comes to personal preference, but since most programs work with the timeline, I advise using it instead, but you can toggle between them at any time with that button.]]

There is one more thing to change, and that is to hide that red X and the red border. To toggle that, at the top click on View →Camera Box. There are uses for it some times but you usually don't need it.

This is what my room looks like after all the steps above and some zooming in with the mouse wheel on the canvas:

Remember the names of these windows (Combo Viewer, Timeline, Palette) because I will keep referring to them from now on

The Basic Tools:

All the drawing tools are available at the top of the Combo Viewer, right above the main canvas, and in case you can’t see them all, click the arrow all the way on the right. With all of them expanded it should look like this:

You can see their names and shortcuts when you leave your mouse hovered over them for a while. All shortcuts can be changed from the file → Configure Shortcuts... if you so desire.

I will only mention the ones you really should care about right now, starting from left:
Edit Tool – used for animating tweens like moving and rotating. You first will need to create something to move, but that is the tool for it. It's covered in the separate tutorial >here< (Though it is for the previous version, but all principles should still apply)
Selection Tool – for selecting an area of the drawing and afterwards transforming or manipulating it. This is for actually changing the graphics, not animating it.
Brush Tool – for all the basic hand drawing needs. It works with pressure sensitivity and everything.
Geometry Tool – for drawing lines, rectangles, circles and such
Type Tool – for typing out text
Fill Tool – flood fills areas that are clicked.
Paint Brush Tool – Works a bit like the Brush tool but it paints fills by default. You should use the brush tool for most thing but know this is here for later.
Eraser Tool – For erasing what you have drawn

All the way on the right are the navigation tools (Zoom Tool, Rotate Tool, Hand Tool) but you will mostly use them via their shortcuts or with the mouse wheel, but do test them out.
Other tools are used for more specific situations but you won't be needing them at the moment. I will cover them in further tutorials when they rise in relevance.

Timeline, Layers and Levels

NOTE: For the same explained from the perspective of the Xsheet and Columns, check the previous tutorial.

There are lots of nuances for these parts, but it is very important to understand the basics.

Timeline (previously Xsheet) is the window we pulled out before and snapped to the bottom. You can navigate the timeline with the arrow keys on the keyboard or by selecting the cells, though they are all now empty and there is only a single Layer which should be named Col1. You can add a new layer by right clicking on the layer name and selecting insert, or just pressing insert on the keyboard.

Levels on the other hand are a bit difficult to explain, since they don’t exist as such in other programs. Let’s just say that they are collections of images (frames) with a shared size and color palette, and they are separate from the Layers and the Timeline. If used right they make everything a LOT easier, but if misunderstood they are a source of frustration. I will explain through an example.

Select the first frame in the timeline and use the Brush Tool to draw a line or anything onto the canvas (the white area in the combo viewer). After that you will see a green rectangle appear in the Layer where we selected and a letter A and number 1 on it:

 
NOTE: If the area is not Green but is instead Blue or Yellow, make sure you did everything that was said under the "Anything else I should Get" section near the top of the tutorial (specifically the last part). After changing that, undo the line and try again.

If you already drew something onto the canvas before it might be a different letter, but I will use A for the example.
That A means it just automatically created a new level named A with the image of that line at the index 1. If you select the cell to the right of this one, and draw a different line, it will make A2 the 2nd image in the level, and so on.
However, if you don’t draw directly to the right (like another layer), it will create a new level B. If you are just scribbling you won’t notice a difference between A and B but I will cover one of the important differences under Style Palettes later.

For a more in depth look about the levels, refer to this tutorial after you go through the rest of this one.

You can also extend images to last longer in the xsheet by either copy pasting them or by pulling right the little handle next to the selected image/s. You can also make them last shorter by selecting more and pulling the handle left.
You can move them around by selecting them and then dragging the bright green bar at their top. Same with layers.
You can hide layers by selecting the dot next to their name below the circle around the square icon (the middle one). The eye icon is for the visibility when outputting the image, and will gray out the layer, but you will still be able to see it while you draw. So you can have something just appear when you work with it instead of when you export it to .gif, or you can hide something you are not working on right now and it will still render.
You can adjust transparency (only while working on it, not in the final animation) by clicking the little down arrow after the lock icon next to the layer name. For adjusting transparency for the final render, I would need to explain a lot more, so you will have to live without it for now, unfortunately.

Playback and Onion Skin

Once you have a few images drawn, you would want to play the animation. You can click and drag the mouse on the numbers to the left of the green cells to see how things look.
Or you can click the play button at the bottom of the combo viewer:

You can also set the playback FPS on the right if the animation goes too fast for you.
Chances are, the animation doesn’t play all the way for you, or it looks wrong because you couldn’t track what happened on the previous image while you were drawing the next one. You can adjust these things on the Timeline as below:

On the left side you will see the index of the frame and all the way above the currently selected one will be a red and green circle. That is the onion skin marker and you can toggle the onion skin by clicking directly right of it above the frame whose image you want to see from the current image. Same can be done left, and even many frames in advance or behind, and more than one (you can even drag and make an onion skin of how many frames below you want).
Also, when you choose the next frame, the marker moves as well, and any onion skins you set also move relative to it. If you want one image to be visible from any position, even if the marker moves, you can click slightly above of the marker, like where I clicked on the first frame in my image. That way, that image will stay onion skinned no matter how far down or up you move.

As for the playback start and end, there are those two triangles below the onion skin marker to the left and right. You can drag them by hand where you want and the animation will play between them. Otherwise, it will try to automatically place them from the first and last frame (and sometimes will fail).

Right clicking on the frame number will bring up a menu that will allow you to do all of these things in case you don’t feel like clicking the small icons. You can also remove the playback markers if you want to let the program try and figure them out again.

Style Palettes (colors)

Unlike many art programs, OpenToonz uses a controlled color palette for all the art you draw in your levels (unless on pure Raster levels). If you select any image you drew so far you will see the palette appear on the right (where we put it before) with 2 colors in it:

These colors are called Styles in OpenToonz and that is how I will refer to them as well, since they can do more than just have different colors. These two are the default Styles for every new palette and they cannot be removed and the style 0 cannot be changed at all and is always completely transparent.

Try to change the style 1 (the black line) by double clicking on it. The Style Editor will open up:

You may snap it somewhere to keep it around if you want but it is not used all the time so it is not required.

Make sure the Auto Apply button is selected near the bottom, otherwise you will need to manually press apply whenever you change anything (you may want this sometimes, but rarely).

As you mess with the colors, you will notice that all the lines you pulled on the screen are changing color, on all the images! They all share the same style and thus they will change on all the images in the same level. Indeed you will notice that the lines you pulled on the layer B are NOT changing at all.
This is important to keep in mind since it’s a great strength of the level system but also will cause a lot of headache if you make too many levels by accident and want to change a color on all of them.

In the palette you can right click and you will notice you can copy and paste styles around and create a New Style from the one selected. You can also copy them from one palette into another but they will not stay linked. You can, for example make 2 black styles and later change only one of them to blue, and the other will remain black along with all the lines you drew using it.

You can also switch through first 10 styles on the fly by using the numbers on the keyboard (though indexes are offset by 1)

Saving and Exporting

You can save everything by using the shortcut ctrl+s or going to file → Save All.
It should be noted that Opentoonz saves all of it’s elements separately instead of into one big file, and you can do so as well if you so desire. You can save only the palette or just the current level or the timeline, for example.

To export the animation into a gif file, open up file → Output Settings… (ctrl+o) (IMPORTANT: since version 1.4 this option is now in render -> Output Settings)

You can set everything you want regarding the current export, like the start and end frames near the middle of the window or the framerate under the other settings at the bottom.

The most important part should be the file name and the output format right next to it. It usually starts with suggesting .tif as the export format but you can select many others.
If you set up FFmpeg as was described near the beginning of the tutorial, you should also see the gif format in the list. If you don’t see it, double check those steps or reopen OpenToonz.
Clicking the options next to the format you can select to downscale the gif if you want. Always make sure you export at the desired name, since if you export with the same name, it will overwrite it.

Once you set everything up you can click Render on the bottom and it will have your gif ready in a few moments.

It will place the output in the project’s output folder by default, but you are free to change the path in the Save In line or by clicking the “…” next to it.

BUG WARNING: There is currently a pretty annoying bug when exporting a gif that has frames that repeat a few times down the line but not in a row. It will merge those frames together in the exported file and the timing will appear broken (the first time the frame appears it will freeze for a while and the later time it would appear it will just get skipped). The way I deal with it is either by making sure the frames are not identical (adding a secondary motion, making the animation better in the process), or export it in a different format and then converting it to a gif in another way (there are many ways to do it online for free).

Conclusion

If you got through all that and followed the instructions,

Congratulations!

You should now understand enough OpenToonz to be able to make animations like these (providing you know general animation principles unrelated to the software itself):

Let me know if you found this helpful or if you have any questions or you found something confusing, and I will update it if I can
You can check all my other tutorials here.