Анімація легко створена: концепція - текст і звук.

Ласкаво просимо на тренування "Анімація в After Effects" від PSD-Tutorials.de. Я - Філіпп Сніехота, і буду вас проводити цим тренуванням.




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

Ми будемо використовувати After Effects як комплект інструментів, як інструмент, і не будемо займатися основами. Ми не навчимося створювати композиції, використовувати колірні плями чи застосовувати ефекти, а зосередимося на суті гарної анімації. Знання, які ви здобудете тут, можна успішно застосувати в багатьох галузях. Ви навіть не мусите думати про 2D-роботу з After Effects. Все те, що ми робимо, включає в себе 3D та анімацію персонажів.

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


Ми разом створимо проект, який я назвав "Легка анімація". Ми зробимо короткий трейлер, що сам вивчає анімацію. Ми поступово визначимо, що таке гарні рухи, на що звертати увагу і які правила варто враховувати та реалізовувати в After Effects. Будемо розглядати, як це все працює, які поради та фішки я маю на увазі і що потрібно врахувати.

Практичний проект стилістично дуже обмежений. Я працював лише з двома кольорами, не створював великих ілюстрацій і в цілому все тримав дуже просто. Щодо стилю, я відступив до часу, коли картини почали рухатися.

Знання про анімацію, які я вас навчаю, існують вже майже 100 років і використовуються з тих пір валт Дісні, Pixar та іншими великими анімаційними студіями.

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

У цьому дусі бажаю вам приємного тренування, пізнавального часу, і ми зустрінемося знову, коли будемо говорити про основи анімації, а саме базову роботу валта Дісні, "Правила Дісні - Частина 1", і потім перейдемо до концепції кольору.

Перш ніж ми розпочнемо та поринаємо в After Effects, я хочу сказати кілька слів про концепцію, зокрема про те, що робити перед початком.

Варто подумати над тим, в якому стилі хочете йти і який настрій або який вигляд хочете передати.

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

Ми, звичайно, не хочемо реалізувати мультфільм, оскільки це було б надто складно і ми хочемо працювати з After Effects. Тому ми користуємося стильністю мультфільму і реалізуємо його в After Effects. Як нам це допоможе?

Крок 1

У цьому випадку я вже вибрав рукописний шрифт. Цей шрифт не моєю власноручною роботою, але це шрифт, який ви знайдете під назвою Amatic на fontsquirrel.com. Велике спасибі авторові Vernon Adams.





У нас є великі та малі літери, хоча всі вони написані заголовними, але ми маємо дві різновиди шрифту. Малі літери - це перепроектовані версії великих літер.

Чудовий шрифт, який дуже добре анімується.





Я покажу вам це в одному з наступних уроків, як робити так, що виглядає так, ніби кожен кадр дійсно новий рукопис.

Для цього я спочатку завантажу цей шрифт та встановлю його.

Крок 2

Щоб ще більше відчути атмосферу, де картини почали рухатися, і фільми виникли близько 1900-х років, я вирішив йти й музичним шляхом. Ragtime нагадує про Чарлі Чапліна, про Лауреля та Гарді і всі ці початкові спроби телевізійних фільмів і, звісно ж, анімаційної індустрії.

Відповідну мелодію я знайшов на Incompetech.com у Кевіна МакЛеода. Супер хлопець, з березня 2006 року на службі та пропонує у своїй мережі багато пісень і стилів. Особливо класні його нові роботи, а також він записав "Fig Leaf Rag", класичний для німого кіно, від Скотта Джопліна.





Саме цю стилістику я шукав. У пісні також є чудові акценти, що завжди хороші для анімацій. Таким чином, у нас є певні частини, де можна підходити під музику. В цих частинах ми можемо чудово анімувати та навіть створювати розділи.

Крок 3

Колірно я вирішив залишити це відносно обмеженим у синьому в поєднанні з жовтим, тобто використовувати лише дві відтінки, які є доповнюючими один одного і гарно виділяються один від одного.

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

Крок 4

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

Ми відкриваємо After Effects і витягнемо звідти звукову доріжку "Fig Leaf Rag" з папки зі звуком та імпортуємо його в After Effects.





Тут показано тривалість 3:29, але, звісно, відео не триватиме так довго. Ми завершимо композицію приблизно за півхвилини.

Крок 5

На початку ми перетягуємо "Fig Leaf Rag" на іконку композиції і таким чином створюємо композицію.

Я перевіряю правий клік або Ctrl+K налаштування композиції. Тут все добре: ми беремо стандартний розмір: 720 25, тобто половина HD з 25 кадрами в секунду (частота кадрів), оскільки ми знаходимося в Європі.

Довжину ми залишаємо такою, щоб у нас було місце ззаду. Тому нам ще не потрібно про це турбуватися. Це підтверджуємо за допомогою ОК.

Крок 6

Шрифт встановлений та налаштований: Amatic SC.

Я пишу "Анімація легко" та трохи збільшую розмір шрифту.

Невеликий підказка на цьому етапі: Я завжди раджу намагатися налаштовувати розмір шрифту в панелі елементів. Я часто бачу, що люди пишуть текст та потім масштабують його, взявши за лінійки і натиснувши Shift- клавішу. Цього я вам не раджу, оскільки ви змінили лише масштаб елемента. Це не проблема з точки зору якості, оскільки текст у After Effects векторний, але це дещо складно, коли ви намагаєтеся створювати різні текстові блоки однаковими - адже не слід мати забагато різних розмірів шрифту. І тут виникає проблема з приведенням усього до одного розміру.





Масштабування залишаю собі на випадок збільшення та зближення. Для створення макету та базового розміщення рекомендую використовувати режим редакції та розмір шрифту.

Маю для вас ще пораду щодо роботи з текстом:

Якщо курсором увійти у текст, ви можете детально відрегулювати відстань між окремими літерами, отже, міжбуквенний інтервал (також відомий як кернінг або розсотання) можна відмінно налаштувати створенням великого текстувального блоку. Я часто бачу, що люди використовують повзунок у панелі елементів - коли я все виділяю, тут у мене повна ширина - і намагаються кернінг тексту. Це досить мазохістський спосіб робити це. За допомогою Alt+стрілка вліво або вправо я можу дуже комфортно зробити все це і при цьому залишатися прямо посеред тексту. Я можу прямо хорошо розмірковувати текст, поки він не сподобався.





У нашому випадку некваліфікований кернінг не робить різниці, оскільки ми вже увійшли у графічний стиль рукопису, і тут ідеальний кернінг не так важливий, як це було б для шрифту без засічок.

Крок 7

Тепер я хочу змінити інтервал між рядками. Для цього знову є повзунок, або ви можете подвійно клацнути на другому рядку, тоді весь рядок буде виділено.

І ви можете комфортно натискати затримуючи Alt- клавішу та стрілки вгору або вниз, щоб розмістити рядок так, як вам подобається.

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