простой персонаж для анимации
Программы для создания анимации: 7 лучших в 2020 году
Мы собрали программы для создания анимации в 2D, которые доступны бесплатно: некоторые только на протяжении пробного периода, а другие — всегда.
Анимированные картинки позволяют оживить страницу сайта, привлечь внимание его посетителей и доступно объяснить сложные вещи. С помощью анимации несколько изображений могут стать связанной и интересной историей. И для создания таких движущихся картинок есть специальные приложения, научиться работать с которыми может даже неопытный пользователь.
1 Adobe Animate
Программа Adobe Animate обеспечивает пользователям максимум возможностей. Хотя использовать ее получится только при наличии определенного опыта. Начинающему дизайнеру придется потратить десятки часов на знакомство с возможностями утилиты. Зато у опытного специалиста всего за пару часов получится создать неплохой анимированный ролик, баннер или оригинальную инфографику.
Скачать Adobe Animate
Среди возможностей редактора — публикация созданной анимации в социальных сетях всего за пару нажатий, анимированные диаграммы и работа с родительскими слоями. Список преимуществ этой программы для анимации на ПК включает возможность запуска на ОС Windows и на MacOS, поддержку русского языка и десятки встроенных шаблонов.
2 Blender
Среди бесплатных программ для анимации 2D можно выделить Blender — достаточно сложную и многофункциональную утилиту для профессиональной работы. В отличие от большинства аналогов, у нее нет платной подписки.
При использовании ПО не приходится сталкиваться с рекламой и водяными знаками. А еще программа позволяет создавать не только двухмерную, но и трехмерную графику. И даже содержит множество обучающих материалов, упрощающих знакомство с функциями Blender.
Среди особенностей программы — поддержка Windows и Linux, простое моделирование кривых и рендеров. В программе есть эффекты дыма и жидкости, моделирование мягкого тела и флюидов, применение направляющих и изменение веса.
Минусы утилиты — сравнительно высокие требования к аппаратной части. Для запуска нужен компьютер как минимум с 4 Гбайт оперативной памяти и встроенная видеокарта с памятью от 1 Гбайт. А для быстрой обработки изображения — хотя бы 8 Гбайт ОЗУ и дискретная графика.
3 Pencil2D Animation
Приложение Pencil2D Animation предназначено для создания движущихся картинок в стиле «карандашной» анимации. Ее выбирают за простое обучение и удобный интерфейс, благодаря которым сделать свой анимационный фильм получится даже у новичка. Отличается она и небольшими размерами, невысокими требованиями к компьютеру, работой с Windows, Linux и MacOS. А еще — простой временной шкалой и полным отсутствием встроенной рекламы.
Скачать Pencil2D Animation
Среди других особенностей — постоянное обновление приложения разработчиком, встроенные в руководство пользователя видео-уроки и импорт видео в популярные форматы: WMV, AVI и MOV. Есть поддержка русского языка, система подсказок и простое переключение между растровыми и векторными проектами. За использование ПО не придется платить — и частным лицам, и компаниям. А минус только один — при каждом запуске придется заново устанавливать настройки.
4 Cartoon Animator 4
К программам для рисования анимации относится и 4-я версия Cartoon Animator — простая и удобная в использовании. С ее помощью можно «оживлять» персонажей, выбирая их из библиотеки редактора. Из базы утилиты берутся и шаблоны движения, позволяющие фигурке бегать, идти, прыгать или махать руками. Также можно контролировать траекторию движения персонажей, их мимику и движения губ.
Скачать Cartoon Animator 4
5 Synfig Studio
Бесплатный софт для создателей 2D-анимации. Этот редактор часто называют альтернативой Adobe Flash. Его возможностей достаточно для создания полноценных мультфильмов и рекламных баннеров.
Скачать Synfig Studio
Среди функций ПО — преобразование растровой графики в векторную, больше 50 фильтров, множество трансформаций и искажений. Программа не требовательна к оперативной памяти (достаточно всего 1 Гбайт). А на сайте разработчиков есть 2 версии — стандартная и для разработчиков, предоставляющая большую функциональность.
Как создать анимированного персонажа в Photoshop и CrazyTalk Animator 3
This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.
Как графический дизайнер, вы, должно быть, знакомы с Adobe Photoshop. Но Photoshop, хоть и является мощным инструментом, не достаточно хорош для всего – например, попробуйте анимировать что-то помимо прыгающего мяча! К счастью, есть другие программы, в которых можно анимировать персонажа, созданного непосредственно в Photoshop, поэтому вы можете проектировать в ПО, предназначенном для проектирования, и анимировать в ПО, предназначенном для анимации.
В этом руководстве я покажу, как использовать такую программу как CrazyTalk Animator 3 для анимации персонажа, созданного в Photoshop. Я научу вас, как подготовить персонажа к редактированию, как создать кости, как импортировать в CrazyTalk Animator и затем как анимировать тело и черты лица при помощи как простых, так и расширенных техник.
1. Как создать персонажа для анимации
Эта часть не обязательна. Вам не нужно выполнять все шаги последовательно, вы можете создать любого другого персонажа или использовать экземпляр, созданный ранее. Просто убедитесь, что слои расположены как у меня.
Персонаж легче всего анимировать, если он состоит из простых фигур. В Photoshop их можно создать в качестве Фигур при помощи Инструмента «Перо». Это не сложно, но если вы хотите научиться это делать, взгляните на этот очень короткий курс «Как использовать Инструмент «Перо» и Контуры в Adobe Photoshop». Есть также более старая версия руководства с отличным упражнением, которое поможет вам в краткий срок овладеть инструментом:
Если у вас Photoshop CC, вы также можете использовать более интуитивный Инструмент «Перо кривизны».
Убедитесь, что ваше Перо находится в режиме Фигуры. Это автоматически придаст цвет контурам. Вы сможете изменить цвет в любое время, дважды нажав на иконку.
Шаг 1
Шаг 2
Создайте переднюю ногу и лапу отдельно (на разных слоях). Используйте такой же цвет, чтобы как следует соединить ногу с туловищем. Это поможет нам спрятать любые потенциальные несоответствия в движении.
Шаг 3
Скопируйте ногу с лапой и поместите их позади всех остальных слоёв. Измените их цвет на #919a9c.
Шаг 4
Таким же образом создайте две другие ноги.
Шаг 5
Создайте хвост из простого овала. Раскрасьте его цветом #919a9c.
Шаг 6
Добавьте голову с цветом #c1cdcf.
Шаг 7
Добавьте два эллипса для пятен вокруг глаз. Окрасьте их в цвет туловища.
Шаг 8
Добавьте глаза: чёрный круг, белый овал для блика и тёмно-серую фигуру в нижней части для отражения. Глаза должны быть на отдельных слоях.
Шаг 9
Из трёх кругов создайте рот – два из них окрасьте в цвет туловища и один – в цвет ног на фоне.
Шаг 10
Добавьте простой эллипс для носа. Окрасьте его в цвет #ff7dd1.
Шаг 11
Добавьте уши. Окрасьте их в цвет туловища.
Шаг 12
Мы создали все части тела, но лицо так же важно, как ноги или хвост. Вы можете добавить несколько вариантов глаз и рта для достижения нужных выражений лица, которые можно позже использовать в анимации. Держите все варианты в одном месте, чтобы вы могли изменить выражение, показав/спрятав слои.
Шаг 13
Вот все мои слои. Базовые:
Если вы хотите анимировать только тело, объедините глаза и рот с головой (вы можете добавить также и уши). Если хотите анимировать лицо тоже, вам понадобится больше слоёв:
2. Как добавить кости персонажа в Photoshop
Чтобы анимировать нашего персонажа, нам нужно назначить «кость» для каждой части тела. Все кости вместе образуют «скелет», позволяя создать текучую, реалистичную анимацию. Вы можете легко добавить кости непосредственно в Photoshop, использовав специальный образец для движения четырёх ног.
Шаг 1
Скачайте набор образцов и перейдите в 01_Templates > Quadruped Template, чтобы открыть образец в Photoshop.
Шаг 2
Нам нужно перенести образец в файл с нашим персонажем. Для этого сделайте оба окна видимыми, выделите все слои в образце и перетащите их на окно с персонажем.
Шаг 3
Выделив слои, используйте Инструмент «Свободное трансформирование» (Control-T), чтобы изменить размер скелета и чтобы он приблизительно совпадал с персонажем.
Шаг 4
Файл с образцом содержит четыре типа элементов:
Сначала нам нужно заменить картинки образца с нашими собственными, одну за другой. Откройте группу RL_Image и затем откройте папку внутри неё и удалите содержимое.
Замените его частью тела персонажа.
Проделайте это со всеми папками, кроме Шеи (которой у нас нет) и Головы, если хотите создать анимацию лица позже. Уши можно анимировать как часть тела, но в случае со смотрящей вперёд головой они не должны слишком активно двигаться, поэтому также их исключите.
Помните, что «левый» и «правый» означает направления тела, а не то, как вы их видите. Поэтому Правый глаз – это правый глаз кота.
Шаг 5
Картинки для выражений лица нужно подготовить таким же образом, но у них свои папки внутри группы RL_TalkingHead > HeadImage. Поместите «нормальные» глаза в группу Iris и другие глаза в группу Белка глаза.
Шаг 6
Картинки готовы, теперь можем добавить кости. Кости будут созданы автоматически в CrazyTalk Animator, вам просто нужно указать программе, где находятся суставы. Вы можете взять образец за основу, на которой показано, где у собаки суставы и как они применяются к персонажу.
Откройте группу RL_Bone_Quadruped. У каждой части тела есть своя папка, содержащая отметки суставов. Чтобы правильно разместить отметки, вы можете спрятать другие картинки, работая с одной из них. Начните с хвоста – разместите отметки вдоль него, держась подальше от границ фигуры. Эти отметки будут точками сгиба.
Шаг 7
Шаг 8
Покажите остальную часть ноги и добавьте другие суставы: Голень для пятки, Бедро для колена и Верхняя часть бедра для бедра.
Шаг 9
Добавьте суставы на другой ноге.
Шаг 10
Теперь перейдите к ногам на переднем плане. Здесь Голень – это запястье, Бедро – локоть, а Верхняя часть бедра – плечо (названия взяты с образца для человеческого персонажа, вот почему они немного смущают при создании кота!).
Шаг 11
Таким же образом закончите создание другой ноги.
Шаг 12
Откройте папку с Туловищем, чтобы назначить суставы для бедра и позвоночника.
Шаг 13
У моего персонажа нет видимой шеи, но нам нужно показать, где она.
Шаг 14
Если хотите, чтобы уши двигались как часть тела, добавьте им кости.
Шаг 15
Если хотите анимировать черты лица, перейдите в RL_TalkingHead и откройте папку «Кости головы». Поместите отметки на соответствующие черты лица.
Шаг 16
Наконец, расположите Опорный элемент объекта прямо под лапами персонажа (вы найдёте его в группе RL_Bone_Quadruped) и посмотрите на весь скелет. Теперь он виден как цельная структура, поэтому, если что-то не на своём месте, это сразу будет видно. Если вы заметили ошибку, просто перейдите к группе и сдвиньте отметку на правильное место.
3. Как импортировать персонажа в CrazyTalk Animator
Шаг 1
Когда персонаж будет готов и сохранён, откройте CrazyTalk Animator и нажмите Create G3 Free Bone Actor.
Ваш персонаж будет перенесён в программу и автоматически показан в Режиме составителя. Вы можете видеть созданные между суставами кости, которые вы назначили в Photoshop. В ушах нет костей, т.к. я сделал их частью головы, чтобы они не двигались (если хотите, чтобы они двигались, просто поместите их в папку группы RL_Image).
Шаг 2
В Режиме составителя можете немного поэкспериментировать с персонажем, чтобы увидеть, что он готов для анимации. Например, вы можете нажать на «Предпросмотр», чтобы протестировать суставы.
Шаг 3
Если нажмёте Edit Pose, вы сможете настроить персонажа.
Например, можете сдвинуть целую часть тело с костями, если обнаружили ошибку…
. либо можете открыть Редактор костей, чтобы двигать кости отдельно.
Шаг 4
Если этих параметров не достаточно, и вы хотите что-то изменить в Photoshop для удобства, просто нажмите Launch to External PSD Editor. Либо можете просто открыть файл снова, изменить его и ещё раз импортировать.
Шаг 5
Вы можете заметить, что некоторые слои смешались в процессе назначения костей. Сейчас мы можем их подправить. Перейдите в Менеджер слоя…
Шаг 6
Когда будете готовы начать создавать анимацию, выйдите из Режима составителя, нажав Back stage.
4. Как добавить простую анимацию персонажа
Шаг 1
При наличии готового персонажа его очень легко анимировать! Сначала откройте редактор Window > Timeline.
Шаг 2
Нажмите Motion, чтобы увидеть типичную панель таймлайна под персонажем.
Шаг 3
В CrazyTalk Animator есть набор примерных анимаций, которые можно использовать сразу же. Просто перейдите в Менеджер содержания…
. откройте вкладку Анимации.
. перейдите в Движение.
. и перейдите в папки: G3 Animals...
. Коты.
. Движение.
. пока не увидите список доступных действий. Есть много видов действий. Здесь, к примеру, у вас есть начальное движение (1S), цикличное движение (2L) и конечное движение (3E). Вы можете использовать все виды для создания плавного движения.
Чтобы добавить анимацию, просто выделите своего персонажа и дважды кликните на движении. Для простой анимации ходьбы добавьте одну Прогулку (1S), две Прогулки (2L) и одну Прогулку (3E).
Шаг 4
Чтобы поэкспериментировать с анимацией, вы можете использовать простые кнопки управления над панелью таймлайна. Чтобы установить начало и конец анимации, перетащите красные маркеры.
Если хотите больше готовых движений, вы можете найти их в наборе G3-Animals: Cats.
5. Как создать пользовательскую анимацию
Готовые движения универсальны, они созданы для костей, но не для картинок, поэтому иногда они могут не полностью подходить под вашего персонажа. Например, для смотрящего вперёд персонажа, как у меня, нет движения Сидеть и Облизывать. Но это не проблема – мы можем создать такую анимацию (и многое другое) сами!
Шаг 1
Откройте 2D Motion Key Editor.
Шаг 2
Сдвиньте маркер туда, где вы хотите организовать движение.
Шаг 3
Примените изменения. Двигайте и вращайте кости для расположения своего персонажа.
Если хотите сейчас проиграть анимацию, вы увидите, что персонаж изменяет своё положение постепенно с первого кадра.
Шаг 4
Итак, наш котёнок садится. Теперь нам нужно, чтобы он двигал лапой и облизывал её. Как вы только что заметили, анимация происходит между ключевыми кадрами – теми, где что-то было изменено (указано точкой на таймлайне). Если вы хотите, чтобы ваш персонаж оставался в определённом положении какое-то время перед началом анимации другого изменения, просто добавьте ключевой кадр вручную, нажав V.
Шаг 5
Сдвиньте маркер туда, где движение должно остановиться.
Шаг 6
Снова расположите кости по своему усмотрению.
Шаг 7
Проиграйте анимацию, чтобы увидеть результаты! Помните: если что-то происходит слишком быстро или медленно, вы всегда можете перетащить ключевые кадры, чтобы изменить интервалы между ними.
6. Как анимировать выражения лиц
Теперь вы знаете, как анимировать тело, но что насчёт лица? Это тоже не очень сложно!
Шаг 1
Добавьте ключевой кадр, где должно начаться движение.
Шаг 2
Откройте редактор Face Puppet.
Шаг 3
Выделите кота как Профиль анимации лица.
Шаг 4
Нажмите на Предпросмотр и сдвиньте курсор к центру лица персонажа. Нажмите Пробел и подвигайте курсор вокруг, чтобы увидеть, как котёнок следит за ним!
Шаг 5
Есть несколько доступных стандартных выражений лица, и их эффект будет зависеть от использованных средств. Я обнаружила, что «злое» выражение лица на самом деле отлично подходит для облизывания, если я сдвину курсор влево и быстро вверх и вниз!
Вы можете заставить персонажа моргать, нажав левой кнопкой мыши во время предпросмотра. Это пригодится!
Шаг 6
Некоторое время попрактикуйтесь с предпросмотром, пока не запомните, как двигать голову для достижения нужного эффекта. Затем нажмите Record и пробел или Enter, чтобы записать движение. Снова нажмите Пробел для завершения.
Шаг 7
После анимации облизывания нужно вернуть лапу котёнка на землю. Для этого установите ключевой кадр после анимации.
Шаг 8
Поместите маркер на некотором расстоянии от этого ключевого кадра.
. и снова установите положение персонажа.
Шаг 9
После завершения анимации я хочу, чтобы котёнок наклонил голову и улыбнулся. Первую часть можно сделать при помощи 2D Motion Key Editor.
. а другую – при помощи Sprite Editor.
Шаг 10
Установив маркер на нужном кадре, выделите тот элемент лица, который вы хотите изменить, и затем выделите картинку, которую вы хотите установить на замену.
Шаг 11
Чтобы закончить анимацию, вы можете добавить ещё один ключевой кадр позже, когда черты лица вернутся к исходному положению.
7. Как завершить анимацию
Но что, если вы хотите добавить немного анимации в начале, где слишком мало кадров? Не проблема! Давайте просто добавим больше кадров.
Шаг 1
Убедитесь, что в списке есть Project.
Шаг 2
Нажмите Collect Clip.
Шаг 3
Нажмите Insert Frame.
Шаг 4
Введите количество кадров, которое хотите добавить. Не бойтесь добавить слишком много – пустые кадры легко удалить.
Шаг 5
Кадры добавлены! Я решила заполнить их анимацией ходьбы.
Шаг 6
Убедитесь, что в таймлайне достаточно места для двух анимаций, и что они встречаются в нужный момент.
Шаг 7
Котёнок теперь ходит на месте, но это можно исправить. Просто перейдите к первому кадру и сдвиньте персонажа за сцену.
Скорость движения будет подстроена под расстояние автоматически.
Шаг 8
Я добавила больше рамок между анимацией ходьбы и облизывания, чтобы сделать их медленнее. Мой котёнок теперь мило подмигивает и двигает хвостом.
Шаг 9
Когда анимация будет закончена и готова к показу, перейдите в Render > Render Video.
Шаг 10
Настройте параметры по своему усмотрению. Убедитесь, что Диапазон кадров правильный!
Отличная работа!
Мой котёнок ходит, улыбается и облизывает лапу! А ваш? Мне было бы интересно увидеть ваш результат, поэтому не бойтесь поделиться им в комментариях!