Adobe Illustrator and After Effects
Імпорт і проста анімація

Вітання. Сьогодні на розгляді проста анімація в After Effects.

ресурси: Adobe Illustrator CC
Adobe After Effects CC

Почнемо вивчення з малювання в Illustrator.

малюємо
1) Намалюємо в якості фону Прямокутник жовтого кольору

Малюнок 1 - Rectangle

2) Намалюємо Коло і заллємо градієнтом
Попрацюємо трохи над колом:
- видалимо нижню точку на контурі, отримаємо дугу;
- проведемо пряму лінію, закривши низ дуги, отримаємо півколо

Малюнок 2 - 1) draw circle; 2) gradient; 3) delete point

3) Малюємо Прямокутник і робимо його копію
- один прямокутник сірий;
- інший прямокутник темно-сірий
4) Малюємо Трикутник з зірочки встановивши число променів - 3

Малюнок 3 - 1) rect light; 2) rect dark; 3) triangle

5) Малюємо кота за допомогою Pen і простих фігур

Малюнок 4 - 1) head; 2) neck; 3) body; 4) leg; 5) tail

А тепер самий ГОЛОВНИЙмомент
Розподілимо картинки по верствам (то що буде анимировано - на окремий шар) ось так:

Малюнок 5 - all pics (red mark important layers)

Все, тепер зберігаємо.
Подивимося настройки збереження

Малюнок 6 - Save

А тепер наступний етап. закриваємоAdobe Illustrator і відкриваємо After Effects.

Імпорт в After Effects
File - Import - File - вибираємо наш збережений файл Illustrator.
Виберемо, щоб імпортувати шари з Illustrator, якщо поставимо footage, то отримаємо картинку з об'єднаними шарами, а нам цього не потрібно.

Малюнок 7 - Import As Composition

Все, імпортували.
А тепер подивимося, що у нас є. Подвійне клацання по композиції , Що б відкрилося і ми побачили шари (якщо все правильно зробили, то буде кілька шарів). Отримаємо таке, див. Малюнок

Малюнок 8 - Open Composition

А тепер те, для чого ми тут сьогодні зібралися - Анімація.

анімація в After Effects
Встановимо точку обертання у стрілки вгорі її за допомогою Pan Behind Tool (швидка клавіша - Y). Просто беремо точку і переміщаємо туди куди потрібно. В результаті це буде виглядає так ..

Малюнок 9 - Pan tool and Layers

Ну все, тепер переходимо до шарів для анімації.
Нам буде потрібно шар Arrow і Head_cat.
Почнемо з arrow.
Розкриємо список, знайдемо і натиснемо на годинник. Так ми поставили першу точку на нульовий секунді. Всього анімація триватиме 2 секунди.
Отже, ось такі настройки треба зробити (всього поставимо 3 точки)

Second	0	1	2
	+66	- 70	+66

Ось так це буде виглядати:

Малюнок 10 - Rotation arrow

А тепер анімуємо голову кота.
Розкриємо head_cat і знайдемо Position.
Тут буде 4 точки.
Змінювати буде тільки останню координату не чіпаючи інші.

Second	0.1	0.17	1.12	2.0
Position	689.3	729.3	729.3	689.3

Дивимося на картинку.

Малюнок 11 - Position head

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

заключний етап

Production
Треба створити готовий продукт зі свого твору.
Йдемо в меню - Add to Render Queue
Відкриється панель Render і в Output Module (два клацання) виберемо формат виходу. Я взяла * .mov

Малюнок 12 - Render

Натискаємо на кнопку RENDER і отримуємо результат (тільки не забудьте вказати шлях).
На цьому все.

Формат файлу Flash (SWF) заснований на векторної графікиі призначений для масштабованої, компактної графіки для Інтернету. Так як цей формат файлу заснований на векторній графіці, об'єкт зберігає якість зображення при будь-якому дозволі і ідеальний для створення кадрів анімації. В Illustrator можна створити окремі кадри анімації на шарах і потім експортувати шари зображення в окремі кадри для використання на веб-сайті. Можна також визначити символив файлі Illustrator для зниження розміру анімації. При експорті кожен символ визначається в SWF-файлі тільки один раз.

Команда «Експортувати» (SWF)

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

Забезпечує більше контролю над сумішшю форматів SWF і битового у фрагментированном макеті. Ця команда пропонує менше параметрів зображення, ніж команда «Експортувати» (SWF), але використовує останні використані параметри команди «Експортувати» (див.).

При підготовці об'єкту до збереження в форматі SWF пам'ятайте наступні рекомендації.

За допомогою програми Device Central можна побачити, як буде виглядати графічний об'єкт Illustrator в додатку Flash Playerна різних кишенькових пристроях.

Вставка графічного об'єкта Illustrator

Створений в додатку Illustrator графічний об'єкт можна швидко, просто і без труднощів скопіювати і вставити в додаток Flash.

При вставці графічного об'єкта Illustrator в додаток Flash зберігаються такі атрибути.

Контури і фігури

• товщина штрихів

  визначення градієнтів

  Текст (включаючи шрифти OpenType)

  пов'язані зображення

• режими накладення

Крім того, Illustrator і Flash підтримують такі можливості при вставці графічного об'єкта.

При виділенні в графічному об'єкті Illustrator шарів верхнього рівняцілком і вставці їх в додаток Flash зберігаються шари і їх властивості (видимість і блокування).

Кольорові формати Illustrator, відмінні від RGB (CMYK, градації сірого і призначені для користувача формати), перетворюються додатком Flash у формат RGB. Кольори RGB вставляються звичайним чином.

При імпорті або вставці графічного об'єкта Illustrator можна за допомогою різних параметрів зберегти певні ефекти (наприклад, тінь, що відкидається текстом) у вигляді фільтрів Flash.

Flash зберігає маски Illustrator.

Експорт SWF-файлів з програми Illustrator

SWF-файли, що експортуються з програми Illustrator, відповідають за якістю і ступеня стиснення SWF-файлів, що експортуються з програми Flash.

При експорті можна вибрати один з численних заздалегідь заданих стилів, яке забезпечить найкращу висновок, і вказати спосіб використання декількох монтажних областей, спосіб перетворення символів, шарів, тексту і масок. Наприклад, можна вказати експорт символів Illustrator у вигляді роликів або графічних зображень, А також створення SWF-символів з шарів Illustrator.

Імпорт файлів Illustrator в додаток Flash

Щоб створити повний макет в додатку Illustrator, а потім імпортувати його в додаток Flash за один крок, Ви можете зберегти малюнок в власному форматі Illustrator (AI) і імпортувати його з високою точністю в додаток Flash за допомогою команд «Файл»> «Імпортувати в робочу область»Або« Файл »>« Імпортувати в бібліотеку ».

Якщо файл Illustrator містить кілька монтажних областей, виберіть монтажну область для імпорту в діалоговому вікні «Імпорт» програми Flash і вкажіть налаштування для кожного шару в цій монтажної області. Всі об'єкти в обраній монтажній області імпортуються в програму Flashяк єдиний шар. При імпорті інший монтажної області з того ж файлу AI об'єкти з цієї монтажної області імпортуються в програму Flash як новий шар.

При імпорті графічного об'єкта Illustrator у вигляді файлів AI, EPS або PDF додаток Flash зберігає ті ж атрибути, що і при вставці графічних об'єктів Illustrator. Крім того, якщо імпортований файл Illustrator містить шари, їх можна імпортувати одним із таких способів.

Перетворити шари Illustrator в шари Flash.

Перетворити шари Illustrator в кадри Flash.

Перетворити всі верстви Illustrator в один шар Flash.

Прозорий GIF в Adobe Illustrator робиться наступним чином. Заходимо в меню File> Save for Web & Devices (Alt + Ctrl + Shift + S). У вікні, в полі Optimized file format потрібно перш за все зайти у вкладку Image size(Розмір зображення). Справа в тому, що в вікно оптимізації потрапляє за замовчуванням вся сторінка, а в цьому зазвичай немає необхідності. Тому у вкладці Image Size знімаємо виділення з прапорця Clip to Artboard(Обрізати сторінки) і натискаємо кнопку Apply.

Потім в списку вибору формату вибираємо GIF і відзначаємо прапорець Transparency.

Після цього визначимо, які кольори будуть прозорими. Всі кольори, присутні в зображенні, містяться у вкладці Color Table(Таблиця кольорів) і відображаються у вигляді кольорових квадратиків. Вибираємо в панелі інструментів в лівій частині вікна інструмент Eyedropper(Піпетка).

Визначити кольору можна двома способами. Простіше за все вказати колір піпеткою безпосередньо на зображенні - після цього колір виділиться на таблиці кольорів темної обведенням. Ну, а якщо ви точно знаєте, який колір повинен бути прозорим, можна виділити його прямо на таблиці кольорів, натиснувши відповідний кольоровий квадратик. І в першому і другому випадку при необхідності вибору кількох кольорів потрібно працювати, натиснувши клавішу Shift (або Ctrl). Після вибору кольору, потрібно дати вказівку програмі зробити його прозорим. Для цього потрібно натиснути іконку Maps selected colors to Transparent(Додати вибрані кольори до прозорості). На малюнку ця кнопка обведена кружком, і червоний колір обраний прозорим. На зображенні з'явиться прозора область, а квадратик на таблиці кольорів змінить свій вигляд - частина його стане білим трикутником. Щоб скасувати обраний колір, потрібно виділити його в Color Table, а потім знову натиснути іконку Maps selected colors to Transparent.

Кілька слів про спосіб завдання прозорості. За нього відповідає меню, що випадає Specify Transparency Dither Algorithm, По-російськи - Алгоритм імітації прозорості (рис. Внизу). Можна зробити чотири вибору: No Transparency Dither - немає алгоритму, Diffusion Transparency Dither - дифузний алгоритм, Pattern Transparency Dither - алгоритм на основі візерунка і Noise Transparency Dither - алгоритм на основі шуму. У режимі дифузного алгоритму стає активним повзунок Amount(Величина), що дозволяє змінювати значення дифузії. Що застосовувати на практиці? Залежно від мети і зображення. Я не користуюся цією опцією і завжди залишаю за замовчуванням - No Transparency Dither.

Натискаємо Save - прозорий GIF готовий. Робота проводилася в Adobe Illustrator версії CS4 (v.14), але всі дії і клавіатурні скорочення актуальні і для більш ранньої версії CS3 (v. 13).

У вас є одна або дві іконки, які ви б хотіли оживити за допомогою анімації. З чого б ви почали? Припустимо, у вас є файли SVG, програми Illustrator CC і After Effects CC, але, рішення йде від вас.

У цій статті я збираюся продемонструвати, як можна легко анімувати SVG-файл, включаючи підготовку SVG-файлу в Illustrator і імпорт в After Effects CC. Також поясню, як можна конвертувати його в Shape Layers і додавати руху. І, нарешті, поговоримо про експортуванні і рендеринге.

Кінцевий результат роботи.

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

Підготовка SVG-файлу в Illustrator

Давайте почнемо з відкриття вашого SVG-файлу в Adobe Illustrator CC. Я буду анімувати маленьку автомобільну іконку, яка доступна безкоштовно на Week Of Icons.

Після відкриття файлу нам потрібно розгрупувати і розділити всі об'єкти на шари. Ви можете зробити це вручну або використовувати Release to Layers (Sequence)для прискорення процесу. Перш ніж імпортувати файл в After Effects, нам потрібно зберегти його у форматі файлу Illustrator.

Розгрупувати об'єкти ми можемо використовуючи Release to Layers (Sequence), щоб не витрачати дорогоцінний час.

Імпорт та організація файлу в After Effects CC

Тепер все готово для імпорту в After Effects CC. Давайте використаємо поєднання клавіш Ctrl + I (Windows)або Command + I (Mac), Щоб завантажити діалогове вікно Import File, Або перейдіть до File> Import> File ...Там же виберіть підготовлений нами файл Illustrator CC і натисніть Import.Повинно з'явитися невелике діалогове вікно з назвою обраного файлу. Оберіть Compositionзі списку під назвою Import Kind.

більш швидкий спосібімпортування файлу - двічі клікнути на місце стовпчика на проектної панелі.

На панелі Timeline Panel ми побачимо нову композицію. Двічі натискаємо на неї. Тепер ми повинні побачити шари Illustrator CC з помаранчевими значками зліва від назв.

Перш ніж приступити до справи, ми повинні перетворити всі ці шари в Shape Layers. Нам потрібно виділити їх все за допомогою Ctrl + A / Command + A, Або вручну за допомогою Shift + Left Mouse. Після цього клацніть правою кнопкою миші на шар і виберіть Create> Create Shapes from Vector Layer.

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

Конвертація шарів Illustrator CC в Shape Layers в програмі After Effects CC

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

Маркувати Shape Layers відповідними назвами, квітами, написами і розташуванням дуже практично.

Для налаштування параметрів використовуйте поєднання клавіш Ctrl + K / Command + Kабо Composition> Composition Settings ...З Composition Settings нам потрібно вибрати ширину, висоту, частоту кадрів і тривалість (Width, Height, Frame Rate, і Duration). Для цього проекту я вибрав 60 кадрів в секунду, щоб анімація була плавною.

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

Використовуйте Pick Whip, щоб призначити батьківський шар декількох шарів.

У нашому прикладі я призначив менш значні верстви (дочірні шари), такі як лобове скло, деталі кузова, дерево і мотузки первинного шару кузова (батьківського шару). Це дозволило мені контролювати стан і обертання всього автомобіля (за винятком коліс) за допомогою батьківського шару.

створення анімації

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

Малюнок з описом анімації

Насамперед потрібно було зробити елемент або шар у вигляді каменю, але замість того щоб повернутися в Illustrator CC для додавання іншого шару, я просто використав інструмент Pen Tool в After Effects CC. Це дозволило мені швидко спроектувати маленький камінь.

О, могутній Pen Tool!

Багажник був відносно простим завданням. Я встановив його ззаду машини і зробив опорну точку в нижній лівій вершині. Використовуючи Pick Whip, я призначив його батьківського шару кузова. Передостаннім кроком було надання ефекту обертання, який в свою чергу зробив момент підстрибування машини більш реалістічним.Bodymovin в поєднанні з мобільного бібліотекою Lottie.

P.S.ви можете знайти усі приєднані мною файли Illustrator CC і After Effects CC.

Набір іконок доступний для скачування безкоштовно на.