Як зробити анімацію в Adobe Illustrator. Tips&Tricks in Adobe illustrator: Трюки в ілюстраторі. Можливості створення графіки в Ілюстраторі (порівняно з Adobe Flash) Як зробити gif анімацію в Ілюстраторі

Формат файлу 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.

У вас є одна або дві іконки, які ви хотіли б оживити за допомогою анімації. З чого ви почали б? Допустимо, у вас є файли 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.

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

Тепер дещо ускладнимо завдання - виготовимо анімований Flash-банер. Говорити про повноцінну Flash-анімацію, в даному випадку, звичайно, не доводиться - для цього є спеціалізовані пакети. Але для створення нескладного, аматорського ролика можна використовувати Illustrator.

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

Створіть банер, на якому буде лише текст.

Згрупуйте символи командою Object › Group(Об'єкт › Групувати).
Наступне завдання – зробити із символів шрифту контурні об'єкти, інакше не вийде коректне формування шарів. Для цього виділіть групу та виберіть Type › Create outlines(Шрифт › Трасування).
Після цього відкрийте меню панелі Layers(Шари), клацнувши на кнопці у вигляді стрілки на палітрі (рис. 8.11).

Мал. 8.11. Меню палітри Layers

Нас у цьому меню цікавить команда Release to Layer (Sequence)(Перетворити на шари (Послідовно)), яка переводить кожен окремий об'єкт на новий шар. Зверніть увагу, що при застосуванні команди має бути виділено саме групу Group, а не шар Layer 1.

Те, як має виглядати палітра Layers(Шари) після виконання Release to Layer (Sequence)(Перетворити на шари (Послідовно)), показано на рис. 8.12.

Мал. 8.12. Палітра Layers після виконання Release to Layer (Sequence)

На цьому підготовка закінчена, можна зберігати за допомогою Save for Web(Зберегти для Web) у SWF. SWF- це основний формат графіки, що базується на Flash-технологіях. Точніше сказати, що це і є Flash-формат (рис. 8.13).

Напевно, сьогодні вже всі користувачі тією чи іншою мірою знайомі з Flash. В даний час це найбільш поширений формат анімації в Інтернеті, за допомогою якого побудовано переважну більшість мультимедійних інтернет-сторінок.

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

Мал. 8.13. Налаштування оптимізації для формату SWF

Існують такі параметри.

Read Only(тільки читання). Якщо ви встановите прапорець, файл буде записаний таким чином, що його вже не можна буде відкрити для редагування в будь-якій програмі. Це, з одного боку, зменшує розмір файлів, з другого, захищає ваші авторські права.
Налаштування, позначене 1. Параметр, який визначає тип збереження, - зображення або анімація.
Якщо ви виберете варіант AI File to SWF File(Файл Illustrator у файл SWF), зображення буде збережено у вигляді статичної картинки, що повністю повторює те, що ви бачите на екрані під час роботи в Illustrator.
Layers to SWF Frames(Шари у SWF-фрейми) дозволяє зробити анімацію на основі наявних шарів, які будуть представлені як кадри. Нам потрібно вибрати цей варіант.
Curve Quality(Якість кривих). Точність повторення кривими файлу кривих вихідного зображення. При зменшенні цього параметра значно знижується якість, особливо в області дрібних деталей, зате зменшується розмір файлу. Для нашого випадку оптимальне значення "7".
Frame Rate(Затримка кадру). Частота зміни кадрів та, як наслідок, швидкість анімації. Щоб ефект був правильним, виставте не більше 4 кадрів за секунду.
Loop(Повторювати). Програвати анімацію багаторазово. Підходить для анімації, для якої важливий цикл, що повторюється. Банер відноситься саме до такого типу.

Сьогодні ми не зовсім звичайний урок Adobe Illustrator. Тому що цього разу ми будемо робити не статичну картинку, а справжнісіньку анімацію. Уявіть собі, виявляється, за допомогою Adobe Illustrator можна ще й мультики малювати:)

А знадобиться нам для цього всього нічого. Грамотна організація шарів та експорт кінцевої роботи у формат swf, де кожен шар перетворюється на кадр анімації. У сьогоднішньому уроці ми намалюємо анімацію зворотного відліку у стилі ретро фільму. На виході повинен вийде флеш ролик із цим зворотним відліком.

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

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

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

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

Подібним чином нам потрібно накопичувати 12 шарів із кадрами кіноплівки, що задають її рух.

Ось тепер у нас ціла купа шарів, і всі вони видно. У тому сенсі, що верхні шари загороджують нижні, що не дуже зручно для роботи. Тому можна вимкнути якісь шари, натиснувши на іконку з вічком зліва від назви шару. Щоб вимкнути або ввімкнути відразу всі шари, тримайте Alt, коли натискаєте на іконку вічка. Включаючи та вимикаючи шари, ви можете бачити саме те, що розташоване у певному кадрі нашої майбутньої анімації. І зараз, щоб нам додати до руху плівки легке тремтіння, потрібно посувати отримані кадри трохи в різні боки. Для цього вмикайте лише той шар, з яким збираєтеся працювати в даний момент, а потім зрушуйте кадр на пару пікселів у будь-який бік.

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

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

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

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

Далі потрібно додати текстуру до наших шарів. Включаємо перший шар і копіюємо текстуру з вихідного файлу з запчастинами.

Потім по черзі включаємо такі шари і копіюємо туди цю саму текстуру. Щоб вона виглядала по-різному на кожному кадрі просто повертайте її на кут 90 градусів. Як ви вже здогадалися, нам потрібно додати текстуру до 12 кадрів.

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

Тепер, коли готовий основний цикл із анімацією плівки, залишилося додати цифри. Так як відлік у нас йде з 3 до 1 плюс ще слово Go!, то нам потрібно ще більше шарів. Не 12, а 48. Для цього потрібно зробити ще три копії вже готових шарів з анімацією плівки.

А далі все просто. Включаємо перший шар і ставимо туди цифру три.

Потім потрібно копіювати цю цифру в наступні шари, доки не закінчиться анімація кола. Коли ви дійдете до наступної копії шарів, де коло знову буде повністю зафарбовано, потрібно ставити вже цифру два. Так само скопіюйте в потрібні шари цифру один. А коли ви дійдете до заключних шарів, призначених для напису Go!!!, просто видаляйте коло, перш ніж скопіювати напис в потрібний шар.

На цьому з анімацією все. Головне тут – не заплутатися. Можна давати шарам якісь зручні назви, але мені було якось ліньки:) І ще, коли ви закінчите роботу, обов'язково включіть назад усі шари, натиснувши на іконку вічка.

У вікні з налаштуваннями експорту обов'язково встановіть Export As: AI Layers to SWF Frames. Саме ця опція перетворює шари ілюстратора на кадри анімації. Далі натисніть Advanced.

Відкриються додаткові параметри. Тут необхідно встановити частоту кадрів Frame Rate. У мене коштує 12 кадрів за секунду. Галочка Looping відповідає за циклічність анімації. Завдяки їй ролик відтворюватиметься по колу. І опція Layer Order: Bottom Up відтворює шари ілюстратора знизу нагору в панелі. Саме так ми й будували нашу анімацію.

На виході отримуємо флеш ролик із нашою анімацією.

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

Але для створення довгих роликів або інтерактивних програм все ж таки краще використовувати Adobe Flash або інші флеш редактори. Наприклад, цього кота я робив у старенькому Macromedia Flash, який відкопав у себе на роботі.

Також останнім часом все частіше для створення анімації застосовується HTML5 та CSS3. Цей код підтримується сучасними браузерами та не вимагає використання флеш плеєра.

Роман aka dacascasспеціально для блогу