Цифровая анимация

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

Пример

1 слой – фон
Статичный
Понадобится только сам фон
2 слой – волк
Едет, колеса вращаются, улыбается
Понадобятся: волк целиком, улыбка, колеса
3 слой – девочка
С ней происходит много изменений: двигаются ноги, рука с букетом, девочка моргает, на голове девочки сначала нет цветов, потом появляются, есть сцена с закрытыми глазами, вырезанными из фотографии; поэтому нам понадобятся следующие объекты:
Девочка полностью без цветов в волосах
Девочка полностью с цветами в волосах
Девочка без ног
Ноги (достаточно одного парного объекта, в процессе его можно дублировать и отразить)
Девочка с закрытыми веками (для моргания)
Девочка с наложением глаз из фото
Девочка без левой руки с букетом
Левая рука с букетом (можно отдельно рука и букет)
Цветы (которые появляются в волосах)

Задание:
Выберите любое изображение, составьте список слоев, объектов и их элементов для его оживления

Создание фона и объектов в программе PicsArt

Фон

Чтобы создать фон в редакторе, нужно перекрыть лишние объекты


1. Откройте программу PicsArt, нажмите на плюс снизу по центру
2. Выберете нужное фото
3.После того, как фотография загрузилась, нажмите «Добавить фото» и снова откройте тот же самый кадр. Следите, чтобы вновь добавленное фото было выделено. Если выделения нет, кликните на добавленное изображение

4. Нажмите на значок «вырезать» и выберите удобный вам инструмент («кисть» или «контур»). Для области неправильной формы и не требующей четких краев подойдет «кисть», для более четкого края – «контур». Обведите нужную область, нажмите на галочку в верхнем левом углу. Следите, чтобы вырезанный фрагмент был выделен. Переместите фрагмент в нужное место и масштабируйте его с помощью рамки выделения (масштаб, вращение), лишнее можно удалить с помощью ластика. В моем примере фон однородный и мне потребовался лишь один его фрагмент, чтобы перекрыть лишний объект. При более сложном фоне нужно вырезать несколько фрагментов.
5. Снова нажмите добавить фото, снова вырежьте нужную область и повторите все шаги из предыдущего пункта. Сделайте столько фрагментов, сколько нужно.
6. Когда фон будет готов, нажмите на галочку в верхнем левом углу, а затем на значок сохранения файла и выйдите в главное меню

Объекты
Создаем любые отдельные объекты и элементы, которые будут изменяться и двигаться.
1. Откройте нужное изображение
2. Нажмите «вырезать»
3. Выберете нужный инструмент для вырезания (контур или кисть), обведите нужную область, при необходимости удалите лишнее с помощью ластика, можно регулировать его размер, резкость и прозрачность в настройках, или верните недостающее с помощью кисти (также можно регулировать настройки)

4. Нажмите на галочку в верхнем левом углу. Теперь этот объект сохранен в библиотеке программы в разделе « Стикеры» - «Коллекция». Этот раздел доступен в бесплатной версии после регистрации, и мы еще вернемся к нему в дальнейшей работе.
5. Также сохраняем объект отдельно в галерею смартфона в формате PNG. Для этого нажимаем на значок сохранения.

Покадровая анимация

С ней вы уже знакомы. Принцип ничем не отличается от работы в программе Stop motion, разница только в том, что каждый кадр создается в фоторедакторе, в нашем случае в программе Pics Art. Затем кадры склеиваются и монтируются в видеоредакторе CapCut или в платной версии Stop motion studio, что в России теперь не доступно. Именно этот способ позволяет анимировать фотографии, не прибегая к их распечатке.
Для того, чтобы создать анимацию, каждое движение разбивается на несколько фаз и сохраняется отдельным изображением.

Пример. Сцена с походкой

Быстрый вариант – задать движение объекту крупным планом, не оживляя его отдельных частей.
Откройте программу PicsArt и загрузите фото фона. Нажмите добавить фото и загрузите изображение объекта в png или откройте Стикеры, Коллекции, Скрытая папка, и загрузите нужный стикер, если вы сохраняли объект в таком формате (см. прошлый урок)

Переместите объект в начальную точку, кликните пальцем на свободное место на экране так, чтобы выделение с объекта снялось, а сверху появился значок сохранения. Сохраните файл и кликните по объекту, чтобы он выделился, переместите немного по траектории движения и снова кликните на свободное место, сохраните. Повторите действия столько раз, сколько нужно. Чем больше точек вы зафиксируете отдельным кадром, тем более плавным будет движение. Если сдвигать объект не только по горизонтали, но и по вертикали, то движение будет более динамичным и естественным.

Также загружаем фон. Добавляем объект. Затем добавляем отдельно ноги, заготовлены заранее уже известным способом, если они присутствовали в изображении, или вырезаем из другого изображения, а можно найти в библиотеке стикеров. Нажимаем «Стикер», вводим в поисковик нужные данные, выбираем подходящий стикер.

Выделенный стикер копируем . Масштабируем все объекты, задаем им нужное положение, снимаем выделение и сохраняем. Снова выделяем объекты поочередно и перемещаем, придаем нужное положение, снимаем выделение, сохраняем.

Таким же образом создаются кадры для любых изменений – движений.
После того, как все кадры готовы, открываем программу CapCut -
Новый проект – фото - выделяем кадры в нужном порядке и загружаем их в программу

Не забываем сразу удалить «Концовку». После удаления сохраняем видео и выходим в главное меню.

Снова нажимаем «Новый проект» - видео – выбираем сохраненное ранее видео – удаляем Концовку - выделяем видео на таймленте – нажимаем на значок «Скорость» - Нормальная – выбираем нужную, сохраняем видео.

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

Загрузите фон в программу PicsArt , добавьте объект - персонаж (Добавить фото или Стикер – Коллекция), если с персонажем никаких изменений происходить не будет, можно загрузить одно общее изображение персонажа вместе с фоном.
Добавьте новые объекты – крылья, их можно вырезать из какого либо готового изображения или фактуры, сохранив как стикер или отдельным файлом в формате png, а можно добавить из библиотеки стикеров программы. Можно добавить их поочередно, а можно добавить одно крыло и копировать его. Выделенную копию объекта можно повернуть или отразить с помощью инструмента «Поворот».
Масштабируем, перемещаем на нужное место, придаем нужное положение, снимаем выделение и сохраняем. Снова выделяем, перемещаем, снимаем выделение, сохраняем.
Поскольку движение циклично, достаточно кадров для одного цикла. При склейке кадров в видеоредакторе можно будет копировать цикл нужное количество раз.

Создаем новый проект в «CapCut», выгружаем кадры в программу, удаляем концовку, сохраняем проект. Сохраненный проект открываем в новом, удаляем концовку, увеличиваем скорость и копируем сцену нужное количество раз. С этими инструментами вы уже знакомы.

Задание: создать анимацию с крыльями

Откройте программу CupCut – Новый проект – Фото (загрузите фото фона)
Нажмите «Наложение» - Добавить наложение – загрузите объект

Передвиньте бегунок по выделенному слою с наложением в место начала движения, нажмите «Ключевой кадр»
Передвиньте бегунок в место конца движения – нажмите ключевой кадр – переместите объект в нужную точку.

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

Откройте программу CupCut – Новый проект – Фото (загрузите фото фона)
Нажмите «Наложение» - Добавить наложение – загрузите объект
Передвиньте бегунок по выделенному слою с наложением в место начала движения, нажмите «Ключевой кадр»
Передвиньте бегунок в место окончания вращения – нажмите ключевой кадр – нажмите «Изменить» - кликайте на Повернуть нужное количество раз

Book design is the art of incorporating the content, style, format, design, and sequence of the various components of a book into a coherent whole. In the words of Jan Tschichold, "methods and rules upon which it is impossible to improve, have been developed over centuries. To produce perfect books, these rules have to be brought back to life and applied."
Front matter, or preliminaries, is the first section of a book and is usually the smallest section in terms of the number of pages. Each page is counted, but no folio or page number is expressed or printed, on either display pages or blank pages.

Откройте программу CupCut – Новый проект – Фото (загрузите фото фона)
Нажмите «Наложение» - Добавить наложение – загрузите объект
Передвиньте бегунок по выделенному слою с наложением в место начала проявления, нажмите «Ключевой кадр» - нажмите «Затемнение» и регулируйте степень прозрачности в меньшую сторону
Передвиньте бегунок в место конца проявления – нажмите ключевой кадр – затемнение – регулируйте степень прозрачности в большую сторону
А можно и наоборот, тогда объект будет не проявляться, а исчезать.

Такими же, как и предыдущие, способами можно уменьшать и увеличивать объект.

Задание:
Попробуйте задать различные изменения объектам с помощью ключевых кадров.