Ілюстрація для моушен-дизайну та анімації: не малюй, подумой!

Vlad Zhelikhovskyi
6 min readDec 30, 2019

Привіт, дорогий ілюстраторе!

Сьогодні я хотів би поділитися з тобою частинкою моушен-дизайнерського життя. Ця частинка не найприємніша в нашій роботі, але це невід’ємна частина кожного з нас і без неї ми не існуємо. Йтиметься про початок перетворення статичної краси в рухому красу — підготовка ілюстрації під анімацію. Як правило, моушен-дизайнери самі це роблять, тому що кожен веде проект по-своєму, структурує як йому зручно, називає шари своїми особистими термінами (загублений “circle_prikol_1” серед шарів вже нікого не дивує) і т.д. Але чесно кажучи, у моушенів на це йде дуже як багато часу та сил! Нижче ти побачиш чому, з картинками 😉

Сенс цієї статті полягає в тому, щоб дати поради ілюстраторам як малювати під моушен-дизайн та анімацію так, щоб аніматори поклонялися вам і хотіли працювати саме з вами. Можете не дотримуватися їх у процесі роботи (це правда складно, у нас в проектах ще більший хаос), у кожного свій стиль та темп роботи, але при передачі файлів, будь ласка, пройдіться оком по пунктах нижче.

Ці поради стосуються роботи в зв’язці Illustrator і After Effects + плагін Overlord , але якщо ви працюєте в іншому софті, суть залишається тією ж.

  1. Перевірити колірний простір RGB, не CMYK. Це перше, що потрібно зробити при створенні проекту. Буває взагалі у всіх та кожного, незалежно від досвіду. Як це відбувається не зрозуміло досі, якимось магічним чином іноді проект створюється в CMYK. Варто просто глянути поряд із назвою проекту.

2. Малювати всі частини елементів/персонажів. Часто можна спостерігати ситуацію як нижче на гіфці. У статиці це ок, але коли ми починаємо рухати (розставляємо шари по глибині, наприклад) виходить не дуже. Моушени можуть домалювати частину самі, але намалюють як зможуть, у своєму стилі і дуже малоймовірно, що цей стиль співпаде зі стилем ілюстратора.

3. Малювати кінцівки персонажів округлими. Завжди, це прям правило! Інакше при анімації починають вилазити гострі краї стиків між частинами тіла.

4. Розбивати на шари структурно. Намагайтеся розбивати об’єкти на шари — голова з усім, що до неї відноситься в одному шарі, кисть з пальцями в іншому і так далі. Ми витрачаємо на цей процес дуже багато часу, тому що ми не знаємо, де що лежить у вас у проекті, де його шукати. Стосується всіх об’єктів, не тільки персонажів (UI, оточення). Головне, щоб шари називалися зрозуміло.

Так! Частини тіла варто називати так як вони називаються незалежно від ракурсу і повороту персонажа. Класика коли персонаж стоїть до нас обличчям і права рука називається лівою і т.д.). — Але ж вона зліва від нас!, — може хтось сказати, — так зрозуміліше.
Це потрібно, щоб при розвороті персонажа, наприклад, ліва рука не стала називатися “Правою”.

5. Не юзати compound path, clipping mask, все, що містить слова compound і clipping…

Це взагалі винахід диявола — його не можна нормально експортувати, не можна перевести у звичайний вектор, не можна взагалі нічого зробити! Просто не використовуйте це, будь ласка! А якщо використовуєте, то при передачі постарайтеся зробити так, щоб цього не було. Взагалі це питання до Adobe, якого біса ці речі не сумісні між двома програмами Adobe, але це зовсім інша тема.

5 хвилин! Стільки мені знадобилося, щоб впоратись з Compound path. Без нього це робиться секунд за 10

6. Скидати шрифти, які використовуються в ілюстрації/дизайні. При передачі файлу ілюстраціїї, передавайте і шрифти. Зрозуміло, навіщо.

7. Переводити текст у fill і залишити(!) редаговану копію, щоб можна було виправити текст за потреби. Переводити потрібно з кількох причин. Перша: текстовий шар не завжди експортується коректно (рулетка, буває не щастить). Друга: особисто я анімую текст через шейпи, стандартними текстовими аніматорами не користуюся, вони мають багато обмежень. Залишати шар тексту варто на випадок, якщо потрібно буде змінити текст, змінити шрифт і т.п.

8. Видаляти порожні шари — буває таке, що з 10 шарів, 2–3 нічого не містять. Я спостерігав як працюють ілюстратори, з якою швидкістю вони створюють нові шари і стрибають між ними, тому розумію, що буває складно встежити де що малюється. Але це дивно, коли після експорту в АЕ, ми бачимо path, які складаються з однієї точки або взагалі порожні. Справа в тому, що кожен шар, навіть якщо він порожній, в АЕ створює своєрідну групу — чим їх більше, тим складніше орієнтуватися в одному лише шарі, тому чим чистіше там, тим простіше працювати.

9. Малювати текстури із запасом, не по контуру. Якщо в ілюстрації передбачаються текстури і ці текстури повинні рухатися — малюйте їх із запасом, щоб при анімації краї залишалися затекстурені.

10. Текстури накладати окремо на кожен об’єкт. Бувало таке, що текстура намальована в одному шарі на всю сцену. Доводилося витрачати дуже багато часу на розбиття цього шару на кожен об’єкт.

11. Не читерити з ефектами. Буває ілюстратори роблять якусь магію з ефектами, яку потім аніматорам варто розгадати. Ми не так добре знаємо Illustrator. Keep it as simple as possible.

Ліворуч-картинка в Illustrator, праворуч-картинка в AE після імпорту. Різниця між цими картинками полягає ооон в тій галочці що обведена червоним (ігнорує Opacity кожного окремого шару в групі, якщо що), впевнений навіть не всі ілюстратори про неї знають. На жаль AE не такий розумний, тому доводилося заходити в кожен кружечок і редагувати так, щоб було схоже🤷‍♂️

12. Якщо це ізометрія — використовуйте вбудований 3D ефект та залишайте ізометричні об’єкти у фронтальному вигляді. Ми повторимо той самий кут повороту в АЕ. Це потрібно щоб під час руху камери, ізометрія виглядала правильно. З персами трохи складніше, їх можна малювати одразу в ізометрії. Але якщо передбачаються складні рухи (розворот), варто намалювати лінійку різних ракурсів персонажа.

13. Не робити “Expand” stroke у fill — в АЕ набагато зручніше анімувати пас з трьох крапок, ніж з 20. Напевно, так роблять коли потрібно зберегти в якийсь svg. Краще зберігайте окрему версію під експорт в svg (повірте, вас це теж може врятувати).

13. Не використовувати фігурні stroke — АЕ поки що не вміє у фігурні строуки, тому переводить їх у звичайний. Тобто. той вид який ви задаєте фігурними строуками все одно загубиться.

Усі ці дії ми, моушен-дизайнери, можемо робити й самі. Тільки нам це дається в кілька разів довше просто тому, що ми не знаємо як влаштований ваш проект і спершу нам варто розібратися в цьому, а потім безпосередньо наводити порядок.

Звісно ж, із кожного з цих правил є винятки. Вони трапляються не часто, але трапляються. Раджу вам завжди перед тим як почати малювати, дізнатися у клієнта/арт-директора/вашого кота чи буде це рухатися після вас і також обговорити це з моушеном. Це допоможе уникнути переробок, невдоволень, претензій та заощадить вам, як команді, дуже багато часу.

Ця стаття народилася здебільшого з особистого досвіду роботи в студії з різними ілюстраторами, тому якщо щось пропустив або у вас є якийсь інший досвід, радий почитати в коментарях.

Користуючись нагодою, запрошую вас в групу українського моушен-дизайну: https://t.me/TimingSpacing

Інші статті:

Поради по наведенню порядку в After Effects.

--

--

Vlad Zhelikhovskyi

Motion graphic designer | Urbanist | Insta: @vzhemotion