Пособие по инструментам рисования

Знакомство с панелями инструментов

На экране инструменты расположены вдоль сторон планшета.

правая верхняя панель — панель для работы с рисунком;
правая нижняя панель — навигационная панель, кнопка удаления, кнопка паузы;
левый верхний угол — настройки;
левый нижний угол — панель геймификации (включается в настройках при необходимости);
нижняя панель инструментов — инструменты для рисования.

Верхняя и нижняя панели с инструментами имеют дополнительные кнопки, скрытые за тремя точками.

Если вы рисуете на планшете, последовательно выполняйте действия по инструкции, используя пальцы или стилус.
Если вы рисуете на ноутбуке в браузере Google Chrome, все действия выполняйте мышью. Продвинутые действия — также колесом мыши с удержанием клавиш Alt или Ctrl.

Этап 1. Управление кадрами

1. Создайте кадр для рисования.

На нижней панели инструментов нажмите кнопку добавить кадр.

На экране появится первый кадр для рисования.

2. Добавьте ещё два кадра для рисования.

Нажмите кнопку ещё два раза.

На экране появятся ещё два кадра для рисования.

3. Выберем кадр для рисования.

Выбрать кадр можно двумя способами:

первый способ — нажмите на кадр на экране пальцем;
второй способ — в нижнем левом углу экрана планшета найдите кружочки с цифрами. Номер соответствует номеру рамки. Нажмите на кружок с номером.

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

4. Удаление кадра

выберите кадр одним из двух вышеописанных способов;
нажмите кнопку удалить выбранный кадр. Кнопка находится рядом с кнопкой добавить кадр.

5. Удаление всех кадров — полная очистка рабочего пространства

в нижнем левом углу экрана найдите кнопку с изображением урны для мусора;
нажмите кнопку.

Все кадры вместе с рисунками будут стерты, и вы получите чистое рабочее пространство.

6. Увеличим размер кадра для рисования.

Есть два способа увеличить кадр:

первый способ работает, если кадр уже в фокусе (имеет оранжевый контур). Чтобы применить этот способ, ещё раз нажмите на кружочек с цифрой для выбранного кадра;
второй способ — с использованием скрытых кнопок кадра в фокусе. Один раз быстро нажмите на середину кадра. В правом нижнем углу самого кадра появится изображение прямоугольника. Быстро два раза подряд нажмите на прямоугольник.

Кадр для рисования увеличится на экране.

7. Изменить порядок кадров в истории

На нижней панели инструментов найдите кнопку для изменения порядка и активируйте её.

пока инструмент активен, вы можете свободно перемещать кадры.
нажмите на кнопку перемещения;
коснитесь кадра под номером 2 пальцем и перетащите его в конец истории;
нажмите кнопку для изменения порядка ещё раз , применяя новый порядок.
история автоматически выстроится в ленту в новом порядке.
проиграйте историю снова.

Так вы увидите, как изменилась последовательность кадров в истории.

8. Добавить дополнительный кадр в середину истории

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

Так вы увидите, как новый кадр создал новую последовательность кадров в истории.

9. Клонирование кадра

Возьмите кадр в фокус.

на верхней панели инструментов нажмите кнопку клонировать выбранный кадр.

Дубликат текущего кадра появится рядом с оригиналом кадра.

10. Изменить ориентацию кадров на экране.

Если вы рисуете на планшете:

Чтобы приблизить или отдалить изображение, разведите или сведите два пальца.
Чтобы повернуть полотно, коснитесь экрана тремя пальцами и осторожно поверните руку.
Чтобы расположить кадры в один ряд или вернуть начальный порядок, есть три способа:
- нажмите кнопку выровнять историю в ленту;
- проведите пальцем снизу вверх или сверху вниз (Swipe);
- поверните планшет на 90 градусов.

Если вы рисуете на ноутбуке в браузере Google Chrome:

Чтобы приблизить или отдалить изображение (Zoom), прокрутите колесо мыши вперёд или назад.
Чтобы переместить один кадр (Move), наведите курсор мыши на кадр, затем нажмите правую кнопку мыши и перетащите.
Чтобы расположить кадры в один ряд или вернуть начальный порядок, нажмите кнопку выровнять историю в ленту.

11. Скрытые функции кадра

Дважды коснитесь внутри кадра (Double tap).

в правом нижнем углу вы увидите кнопку увеличения кадра — подогнать под экран.

Дважды коснитесь верхнего левого угла кадра, который содержит изображение.

в левом верхнем углу вы увидите кнопку, позволяющую перемещать изображение внутри кадра — внутренняя композиция кадра. В этом режиме можно изменять уже нарисованные элементы — перемещать, уменьшать или выравнивать.

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

одновременно поставьте четыре пальца на экран планшета.

Первый этап завершён. Вы освоили управление кадрами истории.
Далее — следующий шаг: будем учиться рисовать историю.

Этап 2. Рисование

1. Начинаем рисовать.

Нарисуем цифру «1» в первом кадре:

на нижней панели инструментов найдите кнопку с изображением карандаша;
нажмите на кнопку карандаш;
в выбранном кадре пальцем нарисуйте цифру «1».

Помните: скорость движения влияет на толщину линии — чем быстрее двигаетесь, тем толще линия.

2. Использование ластика

На нижней панели инструментов найдите кнопку с изображением ластика.

нажмите на кнопку и выберите инструмент ластик;
сотрите цифру «1».

3. Изменяем размер линии для рисования.

на нижней панели инструментов найдите слайдер;
переместите слайдер вправо или влево и выберите размер линии для рисования. Перемещая слайдер, вы изменяете толщину штриха.

Толщина линии изменится.

4. Изменяем цвет линии

На нижней панели инструментов справа найдите кружок с цветом.

нажмите на кружок пальцем;
выберите цвет, который вам нравится.

5. Продолжим рисовать

Снова нарисуем цифру «1» в первом кадре:

на нижней панели инструментов найдите кнопку с изображением карандаша;
нажмите на кнопку карандаш;
в выбранном кадре пальцем нарисуйте цифру «1».

6. Переключиться на следующий кадр для рисования.

Найдите панель навигации (кружки с цифрами в нижнем левом углу экрана планшета).

Панель навигации

Каждый кадр — это кнопка с номером. Номер соответствует номеру кадра.
Одно касание переносит выбранный кадр в центр.
Второе касание увеличивает кадр для рисования и детального просмотра.

Что делать, чтобы перейти на второй кадр:

нажмите на кружок с номером 2.

Второй кадр для рисования переместится в центр экрана.

7. Добавим изображение на второй и третий кадр.

на нижней панели экрана нажмите кнопку карандаш;
нарисуем цифру «2»;
на навигационной панели перейдём на третий кадр, нажав на цифру 3;
на нижней панели экрана снова выберите карандаш и нарисуйте цифру «3».

Отлично! Второй этап инструкции по рисованию истории успешно пройден.
Шаг за шагом всё становится просто, если дать себе немного времени и спокойно нажимать правильные кнопки.
Вы создали свою первую историю — и теперь можете начать учиться управлять ею.

Этап 3. Воспроизведение истории

1. Воспроизвести историю вперёд.

Важно:
Если кадр в фокусе, то история начнёт воспроизводиться с кадра в фокусе (рамка с оранжевым контуром).
Чтобы история воспроизводилась с первого кадра, необходимо переместить фокус на первый кадр.
Для этого на навигаторе кадров нажмите на кружок с цифрой 1.

Если ни одного кадра в фокусе нет, то история начнёт воспроизводиться сначала.

Как воспроизвести:
На нижней панели инструментов нажмите кнопку воспроизвести.

Дополнительные кнопки управления воспроизведением истории:

приостановить воспроизведение — нажмите кнопку пауза;
изменить скорость воспроизведения — нажмите кнопку-список 1× и выберите скорость воспроизведения:
4× (самая быстрая), 2×, 1×, 0,5×, 0,25× (самая медленная);
завершить воспроизведение — нажмите кнопку стоп . Нажатие на кнопку завершает воспроизведение истории. Если снова нажать кнопку воспроизвести , история начнёт воспроизводиться сначала.

2. Воспроизвести историю в обратном порядке.

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

нажмите три точки справа от кнопки стоп , и кнопка воспроизведения в обратном порядке появится перед кнопкой воспроизвести;
нажмите кнопку воспроизведения в обратном порядке;
нажмите кнопку воспроизвести.

3. Перемотать историю на следующий кадр.

На нижней панели инструментов найдите кнопку перемотать воспроизведение вперёд.

нажмите кнопку один раз;
нажмите кнопку второй раз;
нажмите кнопку третий раз;

Вы увидите, что фокус перемещается на следующий кадр истории. Переключаться можно бесконечно. Переключение происходит по кругу.

4. Выровнять историю в ленту.

Чтобы выровнять историю после воспроизведения снова в ленту:

найдите на верхней панели инструментов кнопку выровнять историю в ленту;
нажмите кнопку.

История автоматически вернётся в исходное положение — ленту по центру экрана.

Дополнительный способ:
Проведите пальцем сверху вниз с правой стороны экрана (Swipe down).

Третий этап завершён. Теперь вы умеете не только рисовать историю, но и управлять ею. Вы уверенно продвигаетесь, и самый интересный шаг уже рядом.

Этап 4. Геймификаторы

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

1. Добавляем текстовый нарратив

К каждому кадру можно добавить текстовый нарратив.

выберите один из кадров;
на верхней панели найдите кнопку диалогового облачка;
нажмите иконку.

Кадр автоматически переместится в центр экрана.
Справа рядом с кадром появится окно реплики с курсором — место для нарратива.
Вы можете ввести текст.
Редактор нарратива имеет кнопки удалить текст 🗑️ , отменить ✗ , применить изменения ✓ .

в редакторе нарратива введите текст, например: «Это цифра 1»;
нажмите кнопку применить изменения ✓

Кадр имеет диалоговое облачко с текстом.

выберите другой кадр;
в редакторе нарратива второго кадра введите текст, например: «Это цифра 2»;
нажмите кнопку применить изменения ✓

Второй кадр имеет диалоговое облачко с текстом.

Попробуйте проиграть историю с нарративом в кадрах и посмотрите, как выглядит ваша история с текстовым сопровождением.

нажмите проиграть историю.

2. Добавляем термометр

Возьмите кадр в фокус.

на верхней панели инструментов нажмите термометр.

С левого края экрана под верхней панелью инструментов появится термометр со шкалой от 1 до 10.

Как изменить положение на шкале термометра для текущего кадра:

переместите слайдер шкалы и измените её положение.

Шкалу можно закрыть двумя способами:

первый — нажмите на крестик на шкале;
второй — на верхней панели снова нажмите на кнопку термометра.

Убрать термометр с кадра:

возьмите кадр в фокус, чтобы кадр имел оранжевый контур;
нажмите на кнопку термометра на верхней панели.

3. Задаём фон кадра

Возьмите кадр в фокус.

на нижней панели инструментов откройте палитру цветов и выберите цвет, который вам нравится;
на верхней панели инструментов нажмите кнопку тон — кадр будет окрашен в выбранный цвет.

Фон кадра окрашен в выбранный вами цвет.

4. Показать на экране только один кадр

Возьмите в фокус кадр, который хотите оставить на экране.

на верхней панели инструментов нажмите кнопку показать только выбранный кадр;

С экрана исчезают все кадры, кроме выбранного. Кнопка изменила состояние и иконку на

нажмите на кнопку , чтобы вернуть все кадры на экран.

На экране снова присутствуют все кадры.

5. Режим перекрывания одного кадра другим

Возьмите кадр в фокус, чтобы кадр имел оранжевый контур.

на верхней панели инструментов нажмите кнопку режим перекрывания;
на нижней панели инструментов нажмите кнопку переместить кадр;
аккуратно поставьте палец на выбранный кадр и переместите его на соседний кадр (поверх другого кадра).

Над кадром появится пиктограмма кнопки.
Текущий кадр с пиктограммой перекрывает другой кадр.
Изображение другого кадра нельзя увидеть, пока текущий кадр его накрывает.

6. Дыхание — возможность сделать паузу.

В нижнем левом углу найдите кнопку перехода в режим дыхания.
Нажмите кнопку дыхания.
Попробуйте медленно вдыхать и выдыхать, наблюдая за движением изображения на экране.

7. Взаимодействие с образами через геймификаторы

Включите панель геймификации:

нажмите колесо шестерни в верхнем правом углу экрана;
в окне Настройки перейдите к TF-CBT;
переведите слайдер «Включить элементы геймификации» в положение вправо.

В правом нижнем углу появится иконка панели геймификаторов в виде джойстика.

нажмите на иконку панели геймификаторов и посмотрите на геймификаторы;

8. Взаимодействие с образом через разбивание.

Увеличьте размер одного из кадров.

возьмите кадр в фокус, чтобы кадр имел оранжевый контур;
нажмите на кнопку с изображением молотка;

Кадр переместится в пространство для разбивания.

коснитесь кадра пальцем в любом месте;

Кадр начнет разбиваться, как стекло.

восстановите кадр, нажав кнопку восстановить , которая находится в левом нижнем углу экрана в пространстве для разбивания кадра;
измените положение слайдера, который находится с левой стороны экрана в пространстве для разбивания кадра;
коснитесь кадра пальцем в любом месте;

Кадр разбился быстрее, чем в прошлый раз.

вернитесь в рабочее пространство с историей, нажав кнопку вернуться.

9. Работа с огнем.

Выберите кадр, который вы хотите сжечь. Увеличьте размер этого кадра.
Возьмите кадр в фокус, чтобы кадр имел оранжевый контур.

нажмите на кнопку с изображением огня;

Откроется рабочее пространство геймификатора огня.

проведите пальцем по рисунку;

Изображение начнёт как будто гореть.

нажмите кнопку восстановить изображение;
используйте инструмент защита , чтобы обвести часть изображения, которую хотите уберечь от пламени;
проведите пальцем по рисунку;

Изображение начнёт гореть только там, где нет защиты.

нажмите кнопку восстановить изображение;
нажмите инструмент топливо;
проведите пальцем по изображению, чтобы добавить дрова, и изображение лучше загоралась пламенем;
проведите пальцем по рисунку;

С топливом изображение горит быстрее.

нажмите кнопку восстановить изображение;
с левой верхней стороны измените положение слайдеров выше, вверх;
проведите пальцем по изображению;

Огоньки изображения больше в диаметре. Изображение горит быстрее.

нажмите кнопку восстановить изображение;
проведите пальцем по изображению;
пока горит пламя, нажмите кнопку огнетушителя;

Пламя погасло после того, как вы нажали огнетушитель.

10. Колоризация и складывание образа

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

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

Откроется рабочее пространство цветовых фильтров и складывания образа.
Вы видите панель инструментов с кнопками:

11. Инструмент оттенков серого

нажмите кнопку оттенков серого;
медленно измените положение слайдера до конца влево, а затем до конца вправо;
обратите внимание, как меняются цвета изображения;

Слайдер до конца влево — изображение серое.
Слайдер до конца вправо — изображение цветное.

12. Инструмент эффекта размытия

нажмите кнопку эффекта размытия;
медленно измените положение слайдера до конца влево, а затем до конца вправо;
обратите внимание, как меняется чёткость изображения;

Слайдер до конца влево — изображение чёткое.
Слайдер до конца вправо — изображение размытое.

13. Инструмент инверсии цвета

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

Слайдер до конца влево — изображение такое, как было.
Слайдер посередине — цвета изменились.
Слайдер до конца вправо — изображение такое, как было.

14. Инструмент цветового фильтра

медленно нажмите кнопку цветового фильтра несколько раз подряд;
обратите внимание, как меняются цвета изображения;

После каждого нажатия кнопки изображение меняет цвет.

15. Инструмент складывания изображения

нажмите кнопку складывания;

Посередине экрана появится вертикальная пунктирная полоска.

поставьте палец на правую сторону экрана и удерживайте;

Рисунок сложится влево.

ещё один раз нажмите кнопку складывания;

Рисунок перевернётся. Пунктирная линия станет горизонтальной.

поставьте палец на верхнюю или нижнюю сторону экрана и удерживайте;

Рисунок сложится вверх.

Повторяйте действия столько раз, сколько вам нужно, или пока изображение не станет неузнаваемым:

нажмите кнопку складывания;
поставьте палец на правую сторону экрана и удерживайте;
поставьте палец на верхнюю или нижнюю сторону экрана и удерживайте;

Важно:
После складывания изображение в истории останется сложенным, если вы нажмёте кнопку вернуться и вернётесь в рабочее пространство истории. Чтобы вернуть кадр к начальному состоянию, разложите его в том же рабочем пространстве, где вы его складывали, воспользовавшись инструментом раскладывания изображения.

16. Инструмент раскладывания изображения

Предпосылки использования:
Вы должны видеть сложенный рисунок на экране планшета.
Вы должны находиться в рабочем пространстве для складывания — раскладывания рисунков.

нажмите кнопку раскладывания рисунка;
коснитесь рисунка и подождите, пока он разложится;
нажмите кнопку раскладывания рисунка;
коснитесь рисунка и подождите, пока он разложится;
нажмите кнопку раскладывания рисунка;
коснитесь рисунка и подождите, пока он разложится;
повторяйте эти действия, пока рисунок не будет разложен полностью.

Рисунок разложен полностью.

Нажмите

Вы попробовали взаимодействовать с отдельными кадрами нарисованной истории.
Сейчас вы познакомились с основными возможностями приложения — возможностями первого уровня.

Этап 5. Сохранение и восстановление истории

Сохранение истории

нажмите колесо шестерни в правом верхнем углу экрана;
в окне Настройки слева в меню перейдите к Хранилище;
нажмите Сохранить историю в JSON-файл

На экране на несколько секунд появится сообщение, что файл загружен.

Восстановление истории

нажмите колесо шестерни в правом верхнем углу экрана;
в окне Настройки слева в меню перейдите к Хранилище;
нажмите Загрузить историю из JSON-файла

Откроется хранилище на вашем планшете.

найдите свою историю в хранилище планшета;
выберите историю, коснувшись её пальцем.

История автоматически загрузится в приложение и появится в рабочем пространстве для рисования.

29 October 2025