создать своего анимированного персонажа
Рисуем мультики онлайн
Анимашка — лёгкий и совершенно бесплатный онлайн-редактор для создания простых мультфильмов, анимированных открыток и флипбуков. Если ты любишь рисовать и оживлять картинки, превращая их в мультики, то «Анимашка» тебе понравится.
Чтобы посмотреть видео, пожалуйста, сделайте доступным JavaScript для браузера или обновите его до последней версии, поддерживающей HTML5 видео.
С «Анимашкой» можно: ❶ Рисовать мультфильмы или уникальные живые открытки своими руками в собственном неповторимом стиле. Анимашка — чистый лист для реализации твоих творческих возможностей и идей. Есть только ты, планшет и 60 чистых кадров для создания мультипликационного шедевра! ❷ Создать анимацию покадрово, этап за этапом, используя различные инструменты рисования. Копировать, вставлять и удалять кадры фильма, использовать снимки с вебкамеры или камеры планшета/смартфона и украшать фотоснимки нарисованными от руки деталями. ❸ Делиться своим мультиком со всем миром. Никакой песочницы или пре-модерации — страница с мультфильмом доступна после сохранения мгновенно. Поделись своей работой с друзьями в соцсетях или получи html-код для вставки мультфильма на страницы своего сайта. Нарисуй свой мультик прямо сейчас!
Скачать Анимашку на ПК или мобильное устройство
Анимашки пользователей
Вдохновляйся работами других пользователей нашей рисовалки мультиков, черпай идеи для своих новых работ, комментируй анимации и оценивай, делись понравившимися мультфильмами с друзьями.
Эмоции в мультиках
Мультфильмы наших пользователей наполнены эмоциями до краев. Здесь и любовь, и ненависть, зависть, грусть, радость, печаль, обида. Давай посмотрим одни из самых удачных и отлично прорисованных работ.
НяШа ДаШа
кому жалко яблочко жмакай лайк.
Мила
правда о жизни
студия пельмешек!
вы не одиноки!
Прорисовка движений
Как нарисовать походку человечка? Летящий предмет? И, вообще, персонаж в движении. Дело это непростое, требует определенной усидчивости и старания. Помимо знаний анатомии, конечно. Попробуй нарисовать простого стикмена, который просто шагает из одной части экрана в другую и убедишься, что сделать это довольно нелегко. Кстати, в нашем приложении мы попытались облегчить процесс отрисовки движений и добавили возможность использования автокадра без копирования предыдущего кадра. Используя эту функцию можно создавать сложные анимации, постепенно дорисовывая части кадра.
ТАМИРА АКИМЕЕВА(АНАДЕРА ТЯН)
БЕСКОНЕЧНОСТЬ
Конструктор анимации онлайн.
Наложите анимированные картинки на фото.
С помощью онлайн конструктора вы можете создать свою анимацию бесплатно, добавить анимационные элементы на фото.
Оживить фотографию или создать свой анимационный микрофильм применив эффекты. Ниже представлены примеры как можно использовать конструктор.
Анимация фотографии.
Создание анимированного фото и открытки онлайн с помощью конструктора ProGif увлекательное и интересное занятие. Принцип работы редактора заключается в том, что на статическое фото накладываются анимированные объекты и сохраняется результат в виде анимированного файла GIF или WebP. По желанию можно создать анимацию с чистого листа.
Интуитивно понятный и простой интерфейс конструктора имеет в своём наборе достаточное количество инструментов и большое количество объектов для создания анимации. Вы легко сможете создать анимированные фото и авторские поздравительные открытки.
С конструктором справится даже ребенок, не обладающий специальными знаниями и умениями, и сможет создать живое фото. Уверены, что у вас точно получится отлично!
Делитесь полученным результатом с друзьями и знакомыми, публикуйте анимацию в социальных сетях и получайте лайки.
Как сделать анимированное фото и открытку?
Теперь перейдем непосредственно к процессу создания анимации изображений в ProGif.
Добавьте текст, клипарт, фигуры и другие элементы на своё усмотрение.
После создания анимации скачайте файл в формате анимированный GIF и сохраните на компьютер. Вы можете выбрать другой формат и сохранить все последовательные кадры из проекта в одном Zip архиве.
Итоговый «вес» GIF файла во многом зависит от размера фото и количества анимашек. По умолчанию применяется сжатие файла.
Работа с анимацией:
Все анимашки имеют пропорциональный размер относительно холста. Увеличение размеров анимашки приведет к ее «размытию» и как следствие ухудшение качества!
Рекомендации при создании анимированной открытки:
После анимируйте результат добавив различные эффекты анимации, скачайте открытку.
В каком формате сохранить анимированный файл?
Вы можете выбрать формат GIF или WebP для анимации.
GIF— используется для веб-изображений и анимированной графики, имеет ограничение в 256 цветов. Можно открыть любой программой для просмотра изображений, для просмотра анимици открыть любым браузером.
Анимация картинки.
Как создать анимированного персонажа в 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
Настройте параметры по своему усмотрению. Убедитесь, что Диапазон кадров правильный!
Отличная работа!
Мой котёнок ходит, улыбается и облизывает лапу! А ваш? Мне было бы интересно увидеть ваш результат, поэтому не бойтесь поделиться им в комментариях!