Добавить в корзинуПозвонить
Найти в Дзене
Ответы к совету

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

Да собственно вы можете взглянуть на мою аву и увидеть как там персонаж из манги двигается, моргает, а ещё у него волосы будто развеваются на ветру​ Собственно приступим. Для работы нам понадобится: Пункт 1.1 И так, первый шаг
Открываем нашу картинку в Фотошопе и копируем её сочетанием клавиш
CTRL + J
После этого выбираем инструмент лассо Пункт 1.2 Далее выделяем первый глаз, а затем с зажатой клавишей SHIFT выделяем второй.
Важно! Не задевайте ничего кроме глаз, обводите только их! после чего нажимаем ПКМ по любому вырезанному глазу и нажимаем "скопировать на новый слой" После чего выключаем этот слой Пункт 1.3 Теперь нам нужно так же вырезать отдельно ресницы, для этого копируем слой с глазами сочетанием клавиш CTRL + J
и вырезаем точно так же как и глаза и копируем их на новый слой.
После этого удаляем слой с глазами который мы скопировали до этого: P.S. для удобства используйте "прямолинейное лассо" или "магнитное лассо" Пункт 1.4 Теперь сохраняем нашу картинку в формате .psd
Нажи

Да собственно вы можете взглянуть на мою аву и увидеть как там персонаж из манги двигается, моргает, а ещё у него волосы будто развеваются на ветру​

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

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

Пункт 1.1

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


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

-2

Пункт 1.2

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

-3

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

-4

После чего выключаем этот слой

-5

Пункт 1.3

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

-6

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

Пункт 1.4

Теперь сохраняем нашу картинку в формате .psd
Нажимаем сочетание клавиш CTRL + S и жмём на любой удовлетворяющий вас выбор и сохраняем в любое удобное для вас место, я что, вам всё объяснять должен?!

-7

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

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

Начнём же!

Пункт 2.1

-8

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

Пункт 2.2

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

-9

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

Пункт 2.3

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

-10

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

-11

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

-12

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

Пункт 2.4

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

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

-13

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

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

Пункт 2.5

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

-14

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

-15

Пункт 2.6

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

-16

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

Пункт 3.1

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

-17

Пункт 3.2

-18

И повторяем все те же действия что делали в пункте 2.3, 2.5, 2.6, только с самой верхней точкой (будет качаться голова)
Если вы анимируете персонажа в фулл рост, или по пояс, то ставьте точки в анатомически правильных местах, т.е. лоб-шея-плечи
p.s. не забываем вырезать персонажа в Фотошопе если у вас фон не однотонный и на нем есть объекты

Финалочка

-19

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

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

Крутые дизайнеры, не бейте пожалуйста