Лишаем работы дизайнеров, или как создать анимацию png картинки

Лишаем работы дизайнеров, или как создать анимацию png картинки

Хочу посоветовать магаз логов (сам там беру)

@reimannlogs_bot

Адекватные цены + легкий окуп

Всем здравствуйте! Сегодня я покажу вам как создать анимацию персонажа на png/jpeg картинке!
Как это будет выглядеть?
Да собственно вы можете взглянуть на мою аву и увидеть как там персонаж из манги двигается, моргает, а ещё у него волосы будто развеваются на ветру​​
Примеры подобных аватарок есть у:

Slopp
Scarle
Merga

Да и у многих других, можете зайти к любому дизайнеру в портфолио и увидеть подобные работы
P.S. соре за тег <з

Собственно приступим. Для работы нам понадобится:

  • Картинка которую вы хотите анимировать
  • Adobe Photoshop
  • Adobe AfterEffects
  • Прямые руки

И так, первый шаг

Открываем нашу картинку в фотошопе и копируем её сочетанием клавиш
CTRL + J
После этого выбираем инструмент лассо


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

Далее выделяем первый глаз, а затем с зажатой клавишей SHIFT выделяем второй.
Важно! Не задевайте ничего кроме глаз, обводите только их!


после чего нажимаем ПКМ по любому вырезанному глазу и нажимаем "скопировать на новый слой"


714e00bc-8216-445a-ad62-2ee7d6ffc167.webp
После чего выключаем этот слой

Теперь нам нужно так же вырезать отдельно ресницы, для этого копируем слой с глазами сочетанием клавиш CTRL + J
и вырезаем точно так же как и глаза и копируем их на новый слой.
После этого удаляем слой с глазами который мы скопировали до этого:


P.S. для удобства используйте "прямолинейное лассо" или "магнитное лассо"

Теперь сохраняем нашу картинку в формате .psd
Нажимаем сочетание клавиш CTRL + S и жмём на любой удовлетворяющий вас выбор и сохраняем в любое удобное для вас место, я что, вам всё объяснять должен?!
38b5229e-d766-4983-8ccc-23199d329c08.webp


Готово! Пол работы сделано, перейдём ко 2 пункту!

В следующих пунктах, нам понадобится Adobe AfterEffects, так что открываем программу. Открыли? Умнички!

Начнём же!​​

Ъ
Переносим наш .psd файл в AE и ставим вид импорта на "composition"

когда-нибудь я научусь сжимать гифки

После того как мы перенесли файл, переносим саму композицию на таймлайн


Затем заходим в композицию кликнув по ней 2 раза

Следующим нашим действием будет выбрать "Puppet tool"


А после поставить точки на ресницах


После этого переходим на несколько кадров/секунд вперёд и тянем за каждую точку, если надо выравниваем


Те же манипуляции проводим со 2 глазом

Во вкладке с эффектами находим эффект "Linear Wipe", он же "Линейное стирание"
и переносим его на наш отрезок с глазами


Примерные настройки вы видите снизу


Делаем 2 значения, в самом начале ставим 0, а на том кадре где у нас закрывались глаза см. пункт 2.3, ставим Transition Completion на +/- 30%
Если стирание отстаёт от глаз, или наоборот слишком быстрое, соответственно корректируем Transition Completion, делаем % либо больше либо меньше

P.S. Wipe angle изменять в зависимости от того какая у вас картинка и под каким углом находятся ваш персонаж!
С помощью Transition Completion регулируйте само стирание
Feather - сглаживание краёв

После этого копируем первый ключ "CTRL + C" делаем отступ столько же кадров сколько и до второго, и вставляем его "CTRL + V"


Так же поступаем и с кадрами на ресницах

Копируем наши отрезки с глазами и ресницами сочетанием клавиш CTRL + D и перемещаем на несколько кадров/секунд вправо
После чего обрезаем отрезки снизу сочетанием клавиш CTRL + SHIFT + D



Мы уже почти на финишной прямой! Глаза сделаны! Осталось лишь анимировать самого персонажа


​​

Нажимаем вооот сюда

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


И повторяем все теже действия что делали в пункте 2.3, 2.5, 2.6, только с самой верхней точкой (будет качаться голова)

Если вы анимируете персонажа в фулл рост, или по пояс, то ставьте точки в анатомически правильных местах, т.е. лоб-шея-плечи

p.s. не забываем вырезать персонажа в фотошопе если у вас фон не однотонный и на нем есть объекты

Вот что получается в конце

Для тех кто хочет анимировать волосы!

Для этого вам нужно ещё на стадии фотошопа вырезать волосы по отдельности, и уже тогда их анимировать, процесс анимации тот же

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

Код

Код:
Если вам что-то не понятно вы можете отписать мне в телегу или здесь в комментариях, отвечу и помогу чем смогу

Крутые дизайнеры, не бейте пожалуста
b158a99a-ae86-46da-9dfc-cfbe798894a2.webp


Дайте авторку пожалумста....

Комментарии 0

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