Урок № 1

Разукрашивание
персонажа для
последующей
анимации

В уроке
■■ Интерфейс программы OpenToonz
■■ Окна Toolbar Option, Style Editor
■■ Горячие кнопки, инструменты и вкладки
■■ Использование Style Editor и Color Model
■■ Добавление цветов
■■ Инструмент Fx Schematic, добавление бликов
и теней, используя эффекты прозрачности и
размытости
■■ Правила сохранения

МАТЕРИАЛЫ К УРОКУ ПРИКРЕПЛЕНЫ К ДАННОМУ PDF-ФАЙЛУ.

Для доступа к материалам урок необходимо открыть в программе
Adobe Acrobat Reader.
 Разукрашивание персонажа для последующей анимации

OpenToonz – это специализированная про-

грамма для создания 2D-анимации.
Данное приложение было разработано в Италии
компанией Digital Video S.p.A. Тем не менее, на-
стоящую славу ему принесла японская мультипли-
кационная студия Ghibli (рис. 1) и великий мастер
анимации Хайао Миядзаки.

Рисунок 1

Впервые приложение OpenToonz использовали при

создании аниме «Принцесса Мононоке». В программе
проводилась отрисовка, цветовое оформление, а так-
же постобработка картины. В 2010 году, после созда-
ния аниме «Ариэтти из страны лилипутов» (рис. 2),
студия Ghibli полностью переключилась на работу с
OpenToonz, настроив приложение под стилистику, при-
сущую всем произведениям компании.
3
Урок № 1

Рисунок 2

ОpenToonz – это не только программа для отри-

совки и анимации мультфильмов. Она обладает рядом
уникальных функций, которые регулярно улучшаются.
В частности, студия Ghibli разработала специальный
инструмент GTS для быстрого сканирования изобра-
жений, необходимых для полноценной покадровой
анимации.
Также OpenToonz позволяет добавлять спецэффек-
ты, как показано на рисунке 3.

Рисунок 3

4
 Разукрашивание персонажа для последующей анимации

Скачаем ПО с официального ресурса (https://

opentoonz.github.io/e/), а затем запустим его. Появится
стартовое окно, в котором нужно указать параметры
нового проекта: название, месторасположение, размеры
(в нашем случае – 1920 × 1080) и т. д. Чтобы создать про-
ект, нажимаем Create Scene (рис. 4).

Рисунок 4

Откроется рабочая сцена (см. рис. 5 на стр. 6).

Интерфейс состоит из нескольких рабочих обла-
стей – Rooms. Они представлены в правом верхнем
углу. По сути они отображают все панели, которые раз-
мещены в рабочей области окна.

5
Урок № 1

Рисунок 5

Кликнув по одной из Rooms, мы можем перейти к

развернутым характеристикам этой панели (рис. 6).

Рисунок 6

Останемся в области Basic и рассмотрим базовые

функции представленных здесь панелей.
Слева располагается Tool Bar (Панель инструмен-
тов). Она содержит инструменты для рисования, выбо-
ра и редактирования чертежей, а также для анимации
(рис. 7).

Рисунок 7

6
 Разукрашивание персонажа для последующей анимации

Давайте подробнее рассмотрим некоторые до-

ступные инструменты.
Animate (Анимация – горячая клавиша A) – из-
меняет положение, вращение и размер объектов.
Select (Выделение – горячая клавиша S) – вы-
полняет выделение и преобразует его.
Brush (Кисть – горячая клавиша B) – рисует в
рабочей области в режиме рукописного ввода.
Geometric (Геометрия – горячая клавиша G) –
рисует геометрические фигуры.
Paint Brush (Кисть для рисования) – рисует
линии и области растровых рисунков Toonz в
режиме рукописного ввода.
Eraser (Ластик – горячая клавиша E) – удаляет
векторы на векторных рисунках, а также окра-
шенные области и линии на растровых рисун-
ках.
Tape (Скотч – горячая клавиша T) – соединяет
два открытых конца векторов, также закрывает
зазоры на растровых рисунках.
Style picker (Выбор стиля – горячая клави-
ша K) – выбирает стиль из текущего чертежа,
который становится текущим стилем в палитре
и в редакторе стилей.
Control Point Editor (Редактор контрольных
точек – горячая клавиша C) – изменяет вектор-
ную форму, редактируя ее контрольные точки.
7
Урок № 1

Pinch (Щипок – горячая клавиша M) – изменя-

ет векторную форму, щелкая и перетаскивая в
любом месте вектора.
Pump (Насос) – локально изменяет толщину
вектора, нажимая на участок, который нужно
затронуть, а затем перетаскивая его вверх или
вниз.
Magnet (Магнит) – деформирует несколько
векторов одновременно.
Bender (Клещи) – изгибает векторы на вектор-
ных рисунках.
Iron (Утюг) – удаляет складки из векторов.
Cutter (Резак) – разбивает вектор на две части
при нажатии на него.
Skeleton (Скелет – горячая клавиша V) – опре-
деляет модели персонажей и анимирует их, как
в анимации вырезов.
Hook (Крюк – горячая клавиша O) – определя-
ет контрольные точки, которые будут использо-
ваться в схеме этапа для перемещения объекта
или связывания одного объекта с другим.
Tracker (Трекер) – отслеживает определенные
области в последовательности изображений.
Plastic (Пластик – горячая клавиша X) – созда-
ет сетку, которая позволяет деформировать и
анимировать персонажа или его часть.
8
 Разукрашивание персонажа для последующей анимации

Rotate (Поворот –
горячая клавиша Ctrl + Space) – вращает содер-
жимое области просмотра.
Все эти инструменты можно дополнительно настро-
ить в Window > Tool Option Bar. Панель параметров ото-
бражает настройки для текущего инструмента (рис. 8).

Рисунок 8

Основная рабочая область – Viewer (рис. 9).

Рисунок 9

9
Урок № 1

Следующая панель – Xsheet. Она управляет со-

держимым сцены и организована в столбцы. Те, в свою
очередь, разделены на ячейки, представляющие содер-
жимое этого столбца в конкретном кадре. В столбцах
можно загружать уровни анимации, клипы, изображе-
ния, аудиофайлы или другие xsheets (рис. 10).

Рисунок 10

10
 Разукрашивание персонажа для последующей анимации

Под Viewer расположена Timeline (Временная шка-

ла). Она позволяет управлять содержимым сцены так
же, как и xsheet (рис. 11).

Рисунок 11

Давайте попробуем нарисовать персонажа и за-

красить его. Для начала нарисуем основную форму с
помощью инструментов Brush и Geometric (рис. 12).

Рисунок 12

С помощью инструмента Control Point Editor не-

много корректируем форму персонажа и добавляем де-
тализацию.
11
Урок № 1

Если нужно сделать какую-то из линий тоньше или

толще, применяем инструмент Pump (рис. 13).

Рисунок 13

На панели Xsheet наш рисунок отображается одним

фреймом. Для того чтобы сделать анимацию, нужно от-
рисовать несколько таких – с изменениями в самом ри-
сунке (см. рис. 14 на стр. 13).
Нажимаем на ячейку 2, чтобы перейти на новый пу-
стой фрейм. Для того чтобы анимация воспроизводи-
лась аккуратно, каждый следующий фрейм нужно ри-
совать с сохранением пропорций предыдущего.

12
 Разукрашивание персонажа для последующей анимации

Для этого мы можем включить полупрозрачное ото-

бражение нижнего слоя. Заходим в File > Preferences. В
разделе Onion Skin ставим отметку в чекбоксе Onion
Skin ON (рис. 15).

Рисунок 14

Рисунок 15

13
Урок № 1

Кликаем правой кнопкой мыши по пустому холсту

и выбираем Activate Onion Skin (рис. 16).

Рисунок 16

Мы увидим предыдущее изображение, можем на-

чать рисовать следующее (рис. 17).

Рисунок 17

14
 Разукрашивание персонажа для последующей анимации

Элементы, которые будут оставаться статичными во

время анимации, можно дублировать. Для этого пере-
ходим на первый фрейм, выделяем элемент с помощью
Selection Tool и нажимаем Ctrl + C. Затем переходим на
следующий фрейм и нажимаем Ctrl + V.
Нарисуем, в качестве примера, первых шесть фрей-
мов, на которых будет изменяться улыбка Тоторо
(рис. 18).

Рисунок 18

Чтобы просмотреть результат, нажимаем на кнопку

Play на панели под рабочей областью (рис. 19).

Рисунок 19

15
Урок № 1

Если анимация воспроизводиться слишком быстро,

можно немного ее продлить. Для этого нужно увели-
чить время воспроизведения фрейма или же дублиро-
вать их.
Кликаем по колонке на панели Xsheet правой кноп-
кой мыши и выбираем Reframe > 2’s (рис. 20).

Рисунок 20

Каждый из фреймов продублируется и анимация

станет плавной.

16
 Разукрашивание персонажа для последующей анимации

Давайте разукрасим персонажа, чтобы он выглядел

веселее. Цвета подбираем на панели Style Editor > New
Style (рис. 21).

Рисунок 21

На панели появился новый стиль с номером 2

(рис. 22).

Рисунок 22

Кликаем по нему дважды левой кнопкой мыши,

чтобы открыть окно Style Editor.

17
Урок № 1

В этом окне можно изменять стили заливки. Что-

бы увидеть все параметры настройки цвета, нужно пе-
рейти на следующие вкладки: Color, Texture, Vector и
Raster. Во вкладке Settings можно выбрать отдельные
параметры для стиля (рис. 23).

Рисунок 23

Цвета здесь определяются оттенком (Hue), насы-

щенностью (Saturation) и значением (Value) либо зна-
чениями красного (R), зеленого (G) и синего (B).

18
 Разукрашивание персонажа для последующей анимации

Также можно установить непрозрачность цвета с

помощью ползунка Alpha (A): чем меньше значение, тем
прозрачнее цвет.
Выбираем на палитре цвет для заливки туловища
персонажа и нажимаем Apply (рис. 24).

Рисунок 24

19
Урок № 1

Затем выбираем инструмент Fill и кликаем по нуж-

ному участку изображения (рис. 25). На каждом фрейме
закрашиваем Тоторо (рис. 26).

Рисунок 25 Рисунок 26

Если мы хотим сделать своего персонажа макси-

мально похожим на оригинал, можно загрузить цвето-
вую палитру из готового изображения с помощью окна
Color Model (рис. 27).

Рисунок 27

20
 Разукрашивание персонажа для последующей анимации

Откроется диалоговое окно (рис. 28).

Рисунок 28

Здесь отображается изображение или уровень ани-

мации, который мы загружаем в качестве примера для
рисования. Давайте загрузим изображение Тоторо
(File > Load Color Model) (рис. 29).

Рисунок 29

Затем из проводника выбираем изображение и им-

портируем его в проект. В окне отобразится загружен-
21
Урок № 1

ное изображение (рис. 30). Теперь, когда мы кликаем по

какой-то точке этого изображения, внизу во вкладке
Colors подтягиваются все цвета из добавленной нами
картинки Тоторо (рис. 31).

Рисунок 30

Рисунок 31

22
 Разукрашивание персонажа для последующей анимации

Чтобы добавить тени и блики на рисунок, прори-

совываем их в отдельных колонках на панели Xsheet. Их
можно анимировать точно так же, как и самого персо-
нажа. Обратите внимание, тени мы закрашиваем чер-
ным цветом, а блики – белым (рис. 32-33).

Рисунок 32
Рисунок 33

Чтобы сделать их более мягкими и красивыми, ис-

пользуем Fx Sсhematic (Cхемы). Чтобы открыть панель
с ними, нажимаем Window > Sсhematic (см. рис. 34 на
стр. 24).

23
Урок № 1

Рисунок 34

Схема сцены содержит узлы (ноды) для всех объек-

тов, используемых в сцене, что позволяет управлять их
связями друг с другом (рис. 35).

Рисунок 35

24
 Разукрашивание персонажа для последующей анимации

Давайте добавим эффект размытости, используя

эту систему.
Для начала кликаем по иконке Toggle FX в правом
нижнем углу окна Stage Schematic (рис. 36).

Рисунок 36

Нажимаем правой кнопкой мыши и выбираем Add

FX > Layer Blanding > Transparency (см. рис. 37 на стр.
26).

25
Урок № 1

Рисунок 37

Подключаем появившийся блок к Shadow, как пока-

зано на рисунке 38.

Рисунок 38

26
 Разукрашивание персонажа для последующей анимации

Чтобы увидеть результат на изображении, нужно

нажать Preview ( ). Тень вместо черной стала темно-
серой (рис. 39).

Рисунок 39

Возвращаемся к схеме и дважды кликаем на блок с

эффектом. Здесь можно изменить настройки самого эф-
фекта.

27
Урок № 1

Например, если приблизить значение Intensity к 70,

то тень получится довольно мягкая (рис. 40-41).

Рисунок 40

Рисунок 41

28
 Разукрашивание персонажа для последующей анимации

Добавим эффект размытия. Кликаем на блок Trans,

затем выбираем Insert FX > Blur > Blur (рис. 42).

Рисунок 42

Появившийся блок подключаем к эффекту

Transparency (рис. 43).

Рисунок 43

Теперь кликаем дважды, чтоб отрегулировать об-

ласть размытия тени. Например, выставим значение
5 mm (см. рис. 44 на стр. 30).
29
Урок № 1

Рисунок 44

Теперь тень выглядит очень мягко (рис. 45).

Рисунок 45

30
 Разукрашивание персонажа для последующей анимации

Теперь немного доработаем блики: Insert FX >

Light > Glow (рис. 46).

Рисунок 46

Подключаем к Whites и изменяем настройки

(рис. 47).

Рисунок 47

31
Урок № 1

Блики на носу и глазах Тоторо теперь аккуратно

подсвечиваются (рис. 48).

Рисунок 48

Давайте еще подключим небольшой эффект раз-

мытости изображения на белом фоне с помощью
схем. Такой эффект часто применяют в создании япон-
ской анимации.
Нажимаем правой кнопкой мыши на пустом про-
странстве и выбираем Add FX > Background > Color
Card (рис. 49).

32
 Разукрашивание персонажа для последующей анимации

Рисунок 49

Создалась отдельная колонка Color Card на панели

Xsheet. Важно, чтобы она располагалась перед осталь-
ными колонками, то есть была на заднем фоне (рис. 50).

Рисунок 50

33
Урок № 1

Теперь добавим в эту схему эффект. Кликаем пра-

вой кнопкой мыши по элементу Color Card и выбираем
Insert FX > Light > Backlit (рис. 51).

Рисунок 51

Элемент эффекта появится на схеме (рис. 52).

Рисунок 52

34
 Разукрашивание персонажа для последующей анимации

Присоединяем изображение к эффекту (рис. 53).

Рисунок 53

Теперь кликаем дважды по блоку ColorCard и вы-

бираем цвет. По умолчанию он зеленый, а нам нужно
поменять его на белый (рис. 54).

Рисунок 54

Теперь дважды кликаем по блоку c эффектом и ме-

няем значение Intensity. Например, поставим его на 3
(см. рис. 55 на стр. 36).
35
Урок № 1

Рисунок 55

В результате получается небольшая размытость по

контуру, как в анимационных работах Ghibli Studio
(рис. 56).

Рисунок 56

36
 Разукрашивание персонажа для последующей анимации

Если нужно сохранить проект, чтобы позже его

можно было снова открыть и доработать, необходимо
сохранять каждую его составляющую отдельно.
Но прежде чем приступить к этому, заходим в
File > Project Settings. Здесь указан путь сохранения
всех элементов. Их можно изменять, что удобно для
пользователей (рис. 57).

Рисунок 57

■■ input – папка, в которой сохраняются все рисунки

(файлы формата TIF).
■■ drawing – папка, в которой хранятся рисунки, сде-
ланные непосредственно в OpenToonz (файлы TLV
и PLI).
37
Урок № 1

■■ scenes – папка, в которой сохраняются сцены Open

Toonz (файлы TNZ).
■■ extras – папка, в которой сохранены все импорти-
рованные не-OpenToonz уровни, изображения и ау-
диофайлы.
■■ output – папка, в которой сохраняются визуализи-
рованные изображения.
■■ palettes – папка, в которой сохраняются палитры
проектов.

Нажимаем File > Save Scene As… Выбираем место

сохранения и задаем название.
По такому же принципу сохраняем Save Levels As…
(рис. 58).

Рисунок 58

Если нужно будет продолжить работу над этим про-

ектом, заходим в программу и нажимаем Load Scene.
Выбираем из проводника ранее сохраненный файл и
рисуем дальше.

38
 Разукрашивание персонажа для последующей анимации

Чтобы сохранить свою работу в формате видео, пе-

реходим в File > Output Settings.
В диалоговом окне меняем название и формат фай-
ла. Здесь же можно выбрать место сохранения и нажать
Render (рис. 59).

Рисунок 59

39
Урок № 1

Если в предыдущем окне место сохранения мы не

поменяли, то когда откроется второе диалоговое окно с
уже отрендеренным видео, нажимаем на иконку сохра-
нения (рис. 60).

Рисунок 60

В итоге у нас получилось сделать простейший

пример анимации. Дальше будет еще интереснее!

40
 Разукрашивание персонажа для последующей анимации

К следующей встрече вы можете посмотреть клас-

сику аниме, например «Небесный замок Лапута»
(рис. 61).

Рисунок 61

41
Урок № 1
Разукрашивание персонажа
для последующей анимации

© Компьютерная Академия ШАГ

www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения,

фрагменты которых использованы в материале, принадлежат их законным владель-
цам. Фрагменты произведений используются в иллюстративных целях в объёме,
оправданном поставленной задачей, в рамках учебного процесса и в учебных целях,
в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське
право і суміжні права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию объектов
авторского права и не ущемляет законные интересы автора и правообладателей.
Цитируемые фрагменты произведений на момент использования не могут быть
заменены альтернативными, не охраняемыми авторским правом аналогами, и
как таковые соответствуют критериям добросовестного использования и честного
использования.
Все права защищены. Полное или частичное копирование материалов запрещено.
Согласование использования произведений или их фрагментов производится
с авторами и правообладателями. Согласованное использование материалов
возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое исполь-
зование материалов определяется действующим законодательством Украины.