UI/UX ДИЗАЙН УРОК 10. АНIМАЦIЯ В AFTER EFFECTS У ЦЬОМУ УРОЦІ МІСТЯТЬСЯ АНІМОВАНІ МАТЕРІАЛИ, ПОЗНАЧЕНІ ЗНАЧКОМ ПОВЕРХ РИСУНКА. Клацніть на значок, щоб переглянути анімацію, яка відкриється в окремому вікні. Для коректного перегляду рекомендуємо відкрити урок у безкоштовних програмах Adobe Acrobat Reader або Foxit PDF Reader.
Зміст3 Зміст Види та приклади анімації для веб та мобільних пристроїв . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Прелоадери сайтів . . . . . . . . . . . . . . . . . . . . . . 12 Основний функціонал After Effects . . . . . . . . . . . . 23 Основний функціонал Principle . . . . . . . . . . . . . . . 45
Види та приклади анімації для Веб та мобільних пристроїВ4 Види та приклади анімації для Веб та мобільних пристроїВ Коли перша анімація з’явилася на сайтах, вона виглядала як непотрібна прикраса. Але зі зростанням швидкостей підключення, по кращенням пропускної спроможності та розвитком браузерів, анімація стала фундаментом інтерактиву. Ключем до якісного дизайну з гарною анімацією є помірність. Маленькі, прості та ненав’язливі анімації додають різноманітності взаємодії з сайтом та про грамою, не відволікаючи користувача від перегляду контенту. Велика анімація привертає більше уваги, але якщо дизайнер починає додавати занадто багато рухомих ефектів, це створює зайвий хаос (рис. 1). Сьогодні анімація не перевантажує вебсайти та сервери, а ефекти оптимізуються для швидкого завантаження.Сучасний дизайн передбачає наявність великої кількості підказок для повного розуміння функціоналу сайту. З цими функціями чудово справляється проста анімація. З її допомогою можна додавати інструкції взаємодії з користувачем, спрямовувати його, не вно сячи великих змін до загальної стилістики. Анімація робить користувацькі інтерфейси більш зручними. Очевидно, що недостатньо відмалювати ролик, вставити його на сторінку, а потім сподіватися, що він підвищить коефіцієнт конверсії. Як і будь-який інший аспект дизайну, анімацію потрібно узгоджува ти із проєктом. Також слід зважати на фактичні деталі її реалізації.Анімацію часто використовують для підкреслення інтерфейсних елементів. Цей тип анімації підтверджує успішну (або ні) дію користувача (наприклад, натис кання або вибір). Користувач взаємодіє з інтерфейсом для того, щоб зробити певну дію, наприклад, перейти на іншу сторінку, відкрити бічну панель чи модальне вікно, відправити листа тощо. Тому він повинен розу міти різницю між інтерфейсом та просто прикрасою. Рисунок 1
Види та приклади анімації для Веб та мобільних пристроїВ5 Анімація інтерфейсних елементів створює зво ротний зв’язок, необхідний для комфортної взаємодії з сайтом. Вона може бути реалізована непомітно, на приклад через зміну фону кнопок при наведенні. До цього виду анімації можна також віднести ковзання бічних панелей на сторінці, збільшення вкладок або вспливаючих повідомлень (рис. 2). Досить поширеною є анімація очікування (прелоадер). Ця анімація розширює зворотний зв’язок із користувачем. Вона показує процеси у фоновому ре жимі та закликає дочекатися їх закінчення. Користь такої анімації була очевидна ще на ран ніх етапах розвитку користувацьких інтерфейсів. Кур сор миші в перших ОС перетворювався на пісочний годинник. Це був сигнал до того, що комп’ютер не за вис. Ще один приклад – анімація перелітаючих доку ментів з однієї папки в іншу (при копіюванні або за вантаженні файлів) (рис. 3). Рисунок 2 Рисунок 3
Види та приклади анімації для Веб та мобільних пристроїВ6 Цікавим видом анімації є Storytelling-анімація. Багато сайтів містять анімацію, яка розповідає ко ристувачеві історію при взаємодії з нею. Наприклад, при скролі сторінки перед користувачем «збираєть ся» продукт, або з’являються анімовані персонажі, які стежать за діями на екрані (рис. 4). Як правило, така анімація призначена для створення необхідного емоційного настрою користувача. Рисунок 4
Види та приклади анімації для Веб та мобільних пристроїВ7 Незвичайна анімація здатна справити враження на користувача. Гарний приклад – сторінка девай су Mac Pro на сайті компанії Apple. Користувачеві при прокручуванні показують, що знаходиться всере дині системного блоку (рис. 5). Іноді анімацію розміщують без певної цілі просто для того, щоб вона була. Найчастіше це декоративна анімація. Такий підхід лише відвертає увагу користувача та заважає створювати потрібні акценти на сто рінці.Якщо дизайнеру необхідно показати важливість продукту, він може вкласти в анімацію заклик до дії. У випадках, коли користувач надто відволікається на анімацію, не звертаючи уваги на контент, анімацію вартоДекоративнаприбрати. анімація має переміщатися на другий план, показувати її потрібно після того, як завер шиться заклик до дії. Також можна додавати анімації, які запускають ся лише після того, як користувач здійснить будь-яку дію, наприклад, наведе вказівник на якийсь малень кий елемент. Хорошим прикладом може стати сайт Siaperitivos (рис. 6). Рисунок 5 Рисунок 6
Види та приклади анімації для Веб та мобільних пристроїВ8 Анімація також є досить поширеною для реклами. Якщо дизайнер хоче привернути увагу до реклами, анімація – відмінний спосіб це зробити. Але цей тип інтерактиву має ту саму проблему, що і декоратив ний: він відволікає користувача від перегляду основ ного контенту сторінки (рис. 7). Загалом існує 8 функцій анімації в сучасному вебдизайні: 1. Привернути увагу. Загальноприйнято вважати, що рух привертає увагу. Якщо більша частина вебсайту статична, око автоматично фокусуватиметься на русі. Цю особли вість можна використовувати, щоб направляти увагу користувачів. Анімація працює добре, коли потрібно сповістити користувачів про нові повідомлення або функції на сторінці. Як приклад можна навести випли ваючі вікна онлайн-підтримки (рис. 8). Рисунок 7 Рисунок 8
Види та приклади анімації для Веб та мобільних пристроїВ9 2. Навчити. Припустимо, що у програмі користувач закриває меню, а анімація зрушує його вліво. Це сигналізує про те, що користувач може повторно відкрити його свайпом вправо або кліком по іконці (рис. 9). Рисунок 10Рисунок 9 Анімовані візуальні ефекти можуть навчати ефек тивніше, ніж текст або статичні зображення. Найе фективніша анімація – hover. Якщо об’єкт змінює свої властивості при наведенні, це сигналізує про його інтерактивність та можливості взаємодії. Коли корис тувач не впевнений в інтерактивності об’єкта, він на водить курсор на нього, щоб переконатися в цьому (рис. 10).
Види та приклади анімації для Веб та мобільних пристроїВ10 3. Зробити зміну екрану плавною. Анімації переходу додають плавності зміні екра нів. Дратуючий ефект різких переходів може зашко дити UX, тому краще згладити такі переходи анімаці єю (рис.Можна11). використовувати анімацію переходу, щоб продемонструвати індивідуальність сайту та зробити процес взаємодії більш плавним. 4. Зробити плавним скролінг. Без ефектів анімації прокрутка ніколи не стала б красивою. Прокрутка – це один довгий перехід, і саме анімація здатна забрати різкі ефекти такого пе реходу.Плавні переходи створюють ілюзію єдиного екрана, відповідно, скролінг стає зручнішим і менш дратівливим. Наприклад, як на сайті Beoplay (рис. 12). Рисунок 11 Рисунок 12
Види та приклади анімації для Веб та мобільних пристроїВ11 5. Відволікти від процесу завантаження. Довге завантаження – значний мінус вебдизайну. Красива анімація може зменшити роздратування ко ристувача від очікування. Поки сайт завантажується, цікава анімація дозволяє користувачеві розслабити ся, переключити увагу (рис. 13). 6. Розважити користувачів. Нарешті, анімацію можна використовувати у її оригінальній формі – для розваги. Один з варіантів такої анімації – інтерактивні фони, де переміщення курсору зсуває всі зображен ня. Ці невеликі тригер-ефекти дозволяють користува чам взаємодіяти з сайтом, надаючи йому ігрову спря мованість. Такий варіант непогано реалізований на сайті Trainrobber (рис. 14). Рисунок 13 Рисунок 14
прелоадери сайтіВ12 прелоадери сайтіВ По суті, preloaders (також відомі як прелоадери або завантажувачі) – це анімація або статичне зображення, яке бачить користувач, доки завантажуєть ся основна частина вмісту сторінки. За допомогою прелоадерів можна покращити час очікування користувачів під час обробки опера цій сервера.Найбільш поширений вид прелоадерів – смуги, що рухаються, або миготливі кола, які показують час завантаження. Такий варіант допомагає корис тувачам не нудьгувати під час початку завантажен ня до кінця (рис. 15). Розглянемо деякі характеристики ефективного прелоадера. 1. Прелоадери повинні бути простими та цікавими. Користувачі краще сприймають та запам’ятову ють прості прелоадери. Крім того, завантажувач має відповідати основному стилю сайту. Не варто розмі щувати в прелоадери велику кількість анімації. Це від волікатиме відвідувача від перегляду контенту. 2. Для прелоадерів важливою складовою є швидке завантаження. З технічної точки зору дизайнер може помістити в прелоадер все: анімацію, графіку, звукові ефекти і т. д. Однак це не має сенсу. Мало того, прелоаде ри повинні швидко відтворюватися навіть за низьких швидкостей інтернету. Для цього варто оптимізувати контент прелоадера. 3. Прелоадери мають бути унікальними. Звичайні прелоадери (наприклад, кола, що обер таються) досить зручні у застосуванні. Проста форма та графіка – найкращий для сприйняття варіант. Але не слід забувати про додавання унікальності в прело адер. Він повинен відображати основний посил ком панії та відповідати її стилю. Наприклад, Google та Apple добре зарекомендували себе фірмовою іден тичністю. 4. Показники завантаження. Це надзвичайно важливий момент підтримки по зитивного досвіду користувачів, особливо, якщо сайт Рисунок 15
прелоадери сайтіВ13 важкий. У таких випадках в анімацію завантаження варто поставити зворотний відлік або індикатор про гресу. Основна мета цих анімацій – утримувати ко ристувачів на сторінці. Існує багато причин для використання прелоаде рів наНайпоширенішавебсайтах. причина – виграти час для завантаження сайту (рис. 16). Іноді сайтам, перевантаженим інформацією, по трібен деякий час для повного завантаження. Саме прелоадери виграють час та затримують увагу корис тувачів.Прелоадери також широко використовують, щоб звернути увагу користувача з тривалого завантаження на анімацію (рис. 17). Рисунок 16 Рисунок 17
прелоадери сайтіВ14 Одним із завдань прелоадера є відволікання ува ги користувачів від очікування. Тобто, користувачі замість того, щоб чекати завершення завантаження, зайняті спостереженням за анімацією. Прелоадери більш привабливі та цікаві, ніж про сте завантаження браузера (рис. 18). Це хороша альтернатива порожньому білому вікну браузера. Замість того, щоб змушувати користувачів дивитися у порожнє вікно, дизайнер може за тримати їхню увагу на цікавому, добре спроєктовано му прелоадері.Прелоадери також створюють приємне перше враження (рис. 19). Анімація завантаження – це перший елемент, який користувач бачить на сторінці. Якщо дизайнер створив якісний сайт, то варто також докласти небагато зусиль і створити такий же якісний прелоадер. Саме цікаве завантаження може сформувати приємне перше враження, що запам’ятовується. Це особливо важливо для сайтів-портфоліо (графічних дизайнерів, ілюстраторів, фотографів, студій дизайну, gamedev студійДобретощо).продуманий анімований прелоадер має колосальний потенціал у створенні позитивного вра ження від сайту або програми. Крім того, прелоадер дозволяє пожвавити інтерфейс, зробити його наба гато цікавішим. Ця невелика, але важлива деталь під креслює індивідуальність бренду чи проєкту. Рисунок 18 Рисунок 19
прелоадери сайтіВ15 Розглянемо приклади сайтів з якісними та цікави ми прелоадерами. 1. Pashant Sani. Цікавий прелоадер розміщено на сайті вебдизайнера Pashant Sani (рис. 20). В такому випадку як попередній завантажувач використовуються стилізо вані ініціали автора. Вони ніби промальовуються кількома кольорами, після чого перетворюються на логотип сайту. Подібні прелоадери – не рідкість для сайтів портфоліо, і цей варіант – добрий тому приклад. 2. Creative Cruise. Сайт Creative Cruise був створений для того, щоб запросити людей поринути у творчу атмосферу Ам стердаму. Щоб підкреслити основний стиль сайту та його ідею, дизайнери вирішили створити прелоадер із веселим чоловіком, який танцює брейк-данс. Анімація завантаження виконана в стилі самого сайту, інтригу ючи відвідувачів та змушуючи їх дочекатися повного завантаження (рис. 21). Рисунок 20 Рисунок 21
прелоадери сайтіВ16 3. Open Continents. Це вебсайт, призначений для кінематографічного дослідження. Анімація завантаження зачаровує своїм інтерактивним елементом: користувачі взаємодіють із ним за допомогою курсору. Разом з переміщенням миші також переміщаються і зірки, розташовані в колі в центрі екрана. Цей прелоадер несе в собі якусь таємницю, спонукаючи відвідувачів досліджувати сайт (рис. 22). 4. ЦеKokopako.сайт-портфоліо дизайнера та артдиректора Clement Pavageau. У прелоадер добре інтегровані особисті дані власника, «87» – це не тільки зворотний відлік до кінцевого завантаження, але і показ року, важливого для (рис. 23). Рисунок 22 Рисунок 23
прелоадери сайтіВ17 5. ЦейMcWhopper.вебсайт був створений для продажу спеці альної пропозиції від McDonald’s та Burger King. Його прелоадер є анімованим бургером, що підстрибує, який дає можливість побачити всі інгредієнти, додаю чи цікавості очікуванню завантаження (рис. 24). Рисунок 24
прелоадери сайтіВ18 Варто також виділити кілька інших якісних прелоадерів. 1. LoaderView кольоровий квадратний прелоа дер. LoaderView прикрашає очікування користу вачів, оскільки відвідувачі спостерігають за плав ним переміщенням його частин (рис. 25). 2. DotsLoaderView побудований на анімації чорних кульок, що підстрибують, які з’являються з нізвідки, а потім зникають (рис. 26). Рисунок 25 Рисунок 26
прелоадери сайтіВ19 3. Simple Preloader – хороший приклад прело адера, який нагадує колесо лотереї, що обер тається. Такі прелоадери можна зробити інте рактивними, щоб посилити елемент взаємодії користувача з анімацією (рис. 27). 4. Bird Preloader поєднує у собі прості геометричні фігури, що нагадують птаха. Така анімація добре підходить для сайтів зоозахисних організа цій, зоопарків або вебсайтів для дітей (рис. 28). Рисунок 27 Рисунок 28
прелоадери сайтіВ20 5. LittlePin Spinner. Прелоадери з анімацією ге оточки добре підходять для сайтів та додатків про подорожі та онлайн-карти. Подібні анімовані елементи можуть зробити завантаження прива бливішим та цікавішим (рис. 29). 6. No Halftime Loaders Petrick – захоплююча анімація зі спортивними м’ячами. Такий прелоадер може ідеально доповнити спортивний ін тернет-магазин або сайт про спортивні події (рис. 30). Рисунок 29 Рисунок 30
прелоадери сайтіВ21 7. Monkey Swinging Loader Hello Dribbble –веселий прелоадер з мавпою, що розгойдується. Такий елемент завантаження приємно здивує ко ристувачів та затримає їхню увагу. Також підхо дить для сайтів зоопарків, дитячих вебресурсів, сайту мультфільму і т. д. (рис. 31). 8. Cooper loader прелоадер у формі знака безкінечності, що плавно рухається. Така анімація завантаження з мінімальним дизайном може за стосовуватися практично скрізь (рис. 32). Рисунок 31 Рисунок 32
прелоадери сайтіВ22 9. Ping-Pong Loader – цікавий анімований прело адер у вигляді гри в пінг-понг. Анімація підігріває інтерес користувачів до сайту (рис. 33). 10. SurveyPlanet app Loader цікавий прелоадер з планетою і ракетою, що обертається навколо неї. Така анімація завантаження – гарне рішення для різних глобальних компаній та організацій (рис. 34). Рисунок 33 Рисунок 34
осноВний функціонал After effects23 осноВний функціонал After After Effects — спеціалізована програма компанії Adobe, призначена для створення складних анімаційних композицій та спецефектів. Вона широко використовується як у вебдизайні, так і у сферах реклами, телебачення та кінематогра фу, а також під час створення музичних кліпів. Остання версія програми датується 2022 роком. Щоб завантажити та встановити After Effects, необхідно зайти на офіційний сайт Adobe, на сторінку обраної програми. Тут можна купити повну ліцензійну версію або завантажити пробний тріал (рис. 35). Завантажуємо архів у будь-яку зручну директорію на комп’ютері (рис. 36). Рисунок 35 Рисунок 36
осноВний функціонал After effects24 Розпаковуємо теку і подвійним кліком запускаємо файл інсталятора setup.exe (рис. 37). У результаті почнеться встановлення програми Adobe Creative Cloud (рис. 38). Рисунок 37 Рисунок 38
осноВний функціонал After effects25 Після завершення цього процесу відкриється ві кно Creative Cloud. Тут потрібно ввести дані обліково го запису Adobe та клікнути Sign In (рис. 39). Далі приймаємо умови ліцензійної угоди та на тискаємо Continue (рис. 40). Рисунок 39 Рисунок 40
осноВний функціонал After effects26 Відкриється список усіх тріальних продуктів Adobe, доступних для завантаження. Вибираємо After Effects та натискаємо на кнопку Try (рис. 41). Очікуємо завершення встановлення програми. Після цього слід натиснути Start Trial, щоб запустити пробну версію After Effects (рис. 42). Рисунок 41 Рисунок 42
осноВний функціонал After effects27 Запуститься вікно ініціалізації (рис. 43). На рисунку 44 зображено, як буде виглядати про грама при першому запуску. Рисунок 43 Рисунок 44
осноВний функціонал After effects28 Будь-які вікна інтерфейсу можна зміщувати, вклю чати та вимикати, налаштовуючи зовнішній вигляд під власні потреби (рис. 45). Щоб повернутися до початкового розташування вікон, натисніть кнопку Standard на верхній панелі ін струментів (рис. 46). Рисунок 45 Рисунок 46
осноВний функціонал After effects29 Список доступних вікон з додатковими інструмен тами та настройками знаходиться в меню Window. Якщо якесь вікно було закрито помилково, його завж ди можна знайти у цій вкладці (рис. 47). Рисунок 47 Рисунок 48 Рисунок 49 Для початку роботи з програмою потрібно ство рити новий проєкт: меню File > New > New Project. При першому запуску After Effects він відкривається за замовчуванням (рис. 48). Панель Project, яка знаходиться ліворуч від робо чої зони, відіграє найважливішу роль у створенні про єкту. Сюди поміщаються вихідні файли, наприклад, відео, малюнки, логотипи, які використовуватимуться у роботі (рис. 49).
осноВний функціонал After effects30 Щоб додати файли в проєкт, слід натиснути ПКМ в області вікна Project і натиснути Import > File. Вихід ні файли також можна безпосередньо перетягнути з теки до програми (рис. 50). У результаті сформується список доданих об’єктів (рис.Щоб51). було зручніше орієнтуватися, можна помістити файли до тек. Це допоможе чітко структурувати проєкт (рис. 52). Рисунок 50 Рисунок 51 Рисунок 52
осноВний функціонал After effects31 Щоб розпочати роботу над конкретним роликом, потрібно створити композицію. Для цього клікаємо по кнопці New Composition в центрі робочої області, або відкриваємо Composition > New composition (хот кей Ctrl + N) (рис. 53). У результаті відкриється вікно з попередніми на лаштуваннями проєкту, що розробляється. Тут визначається роздільна здатність файлу (наприклад, 1920 х 1080 px), частота кадрів в секунду – Frame Rate і тривалість ролика – Duration, яка вимірюється в се кундах або в кількості кадрів (рис. 54). Рисунок 53 Рисунок 54
осноВний функціонал After effects32 Натискаємо кнопку OK та отримуємо порожню композицію (Comp1) (рис. 55). У центральному вікні формується проєкт (рис. 56). Рисунок 55 Рисунок 56
осноВний функціонал After effects33 Щоб помістити будь-які файли в композицію, до статньо перетягнути їх із панелі Project у стек шарів на панелі Timeline. Принцип накладання шарів такий самий, як і у програмі Adobe Photoshop: кожен новий об’єкт у сцені автоматично додається на окремий шар, який розміщується поверх інших (рис. 57). Шари також можна блокувати або включати/ вимикати їх видимість (рис. 58). Рисунок 57 Рисунок 58
осноВний функціонал After effects34 Додаткові налаштування приховані під іконками в нижньому правому куті панелі Timeline (рис. 59). Якщо деактивувати всі три іконки, можна звільни ти більше місця для доріжок анімації. Це дуже зручно при роботі на маленькому моніторі (наприклад, ноут буці) (рис. 60). Рисунок 59 Рисунок 60
осноВний функціонал After effects35 За допомогою хоткею F4 можна перемикатися між різними видами налаштувань (рис. 61-62). Аналогічну функцію виконує кнопка Toggle Switches/Modes внизу панелі (рис. 63). Рисунок 61 Рисунок 62 Рисунок 63 Рисунок 61-62
осноВний функціонал After effects36 Принцип анімації простий: After Effects дозво ляє динамічно змінювати будь-які фізичні параметри об’єктів у часі. Щоб розкрити список найпростіших анімацій, які можна застосувати до будь-якого об’єкта за замовчуванням, слід клікнути по стрілці ліворуч від назви шару. У підменю Transform задається розташу вання файлу в просторі сцени (Position), його масштаб (Scale), поворот (Rotation) та ступінь прозорості (Opacity). Опція Anchor Point відповідає за положення «якірної» точки об’єкта, відносно якої проводиться ані мація (рис. 64). Біля кожного параметра знаходиться малень ка піктограма секундоміра. Якщо натиснути на неї, на часовій шкалі з’явиться невелика точка – ключовий кадр, у якому фіксується поточний стан об’єкта. Варто також відзначити, що кожен параметр анімації має власну часову шкалу (рис. 65). Якщо пересунути бігунок тимчасової шкали на кілька секунд вперед і змінити розташування фай лу, програма створить ще один ключ із новими зна ченнями. При цьому положення об’єкта у всіх проміж них кадрах між ключами прорахується автоматично (рис. 66). Рисунок 64 Рисунок 65 Рисунок 66
осноВний функціонал After effects37 Також у програмі існує колірна ідентифікація ша рів, залежно від їхнього змісту. Наприклад, композиції за замовчуванням позначаються бежевим кольором, футажі – зеленим, векторні фігури та шляхи – синім (рис.Цей67). параметр можна оперативно змінювати за допомогою спеціальних вікон ліворуч від назви шару (рис. 68). Рисунок 67 Рисунок 68
осноВний функціонал After effects38 До кожного шару можна застосувати додатко ві ефекти. Список доступних пресетів можна знайти на панелі Effects & Presets праворуч від робочої об ласті. За замовчуванням ця панель завжди відкрита (рис.Аналогічний69). список міститься у меню Effects на верхній панелі (рис. 70). Кожен ефект має власний набір параметрів, який також анімується. Його параметри показуються на панелі Project. Крім того, ефекти та пресети мож на накладати один на одного для створення цікавішої анімації (рис. 71). Рисунок 69 Рисунок 70 Рисунок 71
осноВний функціонал After effects39 Хоткей U дозволяє відсортувати лише ті власти вості, в яких присутня анімація. Таким чином, можна оптимізувати екранний простір і не губитися у великій кількості розгорнутих доріжок (рис. 72). Багато хоткеїв відображаються в меню навпроти найбільш часто використовуваних команд (рис. 73). Готову анімацію можна переглянути у робочій області, натиснувши клавішу Space. Але перш ніж програти ролик, програма повинна скопіювати його на пам’ять комп’ютера. Тому при першому запуску ві део може відображатися дискретно. Це буде особли во помітно, якщо комп’ютер має недостатній обсяг пам’яті, оскільки зелена смуга над доріжками анімації не заповниться (рис. 74). Рисунок 72 Рисунок 73 Рисунок 74
осноВний функціонал After effects40 Після того як анімація налаштована, потрібно вивести проєкт у демонстраційний файл. Для цього відкриваємо меню Composition і вибираємо команду Add to Render Queue (Додати до черги рендера), хот кей Ctrl + M (рис. 75). Рисунок 75 Рисунок 76 Рисунок 77 Внизу відкриється вікно зі списком поточних рен дерів (рис. Перший76).рядок (Render Setting) відповідає за базо ві налаштування (рис. 77). Якщо натиснути на цей напис, відкриється додат кове вікно (рис. 78).
осноВний функціонал After effects41 Тут можна задати якість та роздільну здатність рендеру, вказати відрізок часу та кількість кадрів за хвилину, а також вибрати цільовий файл візуаліза ції (повну композицію або робочу область) (рис. 78). У рядку Output Module налаштовуються формат та колірна схема створюваного ролика (рис. 79-80). Рисунок 78 Рисунок 79 Рисунок 80 Рисунок 79-80
осноВний функціонал After effects42 У рядку Output To потрібно вказати шлях, куди буде збережено готовий файл (рис. 81). Потрібно переконатися, що композиція, яку по трібно відрендерити, позначена галочкою. Вона буде включена за замовчуванням, якщо у черзі знаходить ся лише один файл. Після цього слід натиснути кнопку Render (рис. 82). Готовий відеоролик можна переглянути у стан дартному плеєрі або залити на YouTube. Швидкість рендеру залежить від складності та тривалості проєк ту, а також кількості використаних ефектів. Інший метод рендерингу передбачає наявність додаткового програмного забезпечення – програ ми Adobe Media Encoder, яку потрібно встановити окремо. Це пов’язано з тим, що у пізніших версіях After Effects зі списку стандартних відеоформатів було виключено кілька найпопулярніших (наприклад, MPEG-4 H.264). Щоб скористатися Adobe Media Encoder, від криваємо меню Composition > Add to Adobe Media Encoder Queue (рис. 83). Під час виконання цієї команди завантажиться програма, куди автоматично буде перенесена ком позиція. Далі, як і у випадку з After Effects, потрібно встановити бажані налаштування і запустити сам рендер. Рисунок 81 Рисунок 82 Рисунок 83
осноВний функціонал After effects43 Усі важливі параметри інтерфейсу знаходяться в меню Edit > Preferences > General. Хоткей для швид кого виклику – Ctrl + Alt + ; (рис. 84). Відкриється додаткове вікно зі списком параме трів (рис. 85). Як і в будь-якій іншій програмі, налаштування After Effects можна скинути до початкового стану. Для цього потрібно закрити програму, натиснути клавіші Ctrl + Alt + Shift, та запустити програму знову. При цьо му з’явиться попередження з питанням, чи потрібно видалити всі налаштування, які існують (рис. 86). Рисунок 84 Рисунок 85
осноВний функціонал After effects44 Натискаємо ОК. У результаті відкриється стандартна версія After Effects зі скинутими налаштуваннями. Будь-які зміни у положенні вікон або оформленні інтерфейсу будуть видалені. Одним із найважливіших параметрів, якого слід налаштувати перед початком роботи, є автозбере ження. В останніх версіях програми ця стандартна функція активна за замовчуванням. Інтервал збере ження краще задати в межах 10-15 хвилин, кількість резервних копій не більше 5, щоб не перевантажу вати комп’ютер. Тут же прописується шлях для файлів, що зберігаються. Найкращий варіант – тримати бекапи в тій самій теці, що й основний проєкт (рис. 87). Рисунок 86 Рисунок 87
осноВний функціонал PrinciPle45 осноВний функціонал Princi Principle дозволяє створювати інтерактивні прототипи. З його допомогою можна реалізувати скролінг та навігацію на різних пристроях (рис. 88). Тріальну версію даної програми можна заванта жити з офіційного сайту Principle (рис. 89). Зберігаємо завантажений архів у будь-якій зруч ній теці на комп’ютері та розпаковуємо файл (рис. 90). Запускаємо Principle. З’явиться вікно реєстрації, де можна ввести серійний номер продукту. Тут же, у правому нижньому кутку знаходиться кнопка Continue Trial, яка дозволить ознайомитись із пробною версією програми протягом 14 днів. Клікаємо по ній, щоб від крити Principle (рис. 91). Рисунок 88 Рисунок 89 Рисунок 90 Рисунок 91
осноВний функціонал PrinciPle46 Зовнішній інтерфейс розділений на три зони: па нель інструментів (ліворуч), робоча зона (посередині) та вікно попереднього перегляду (праворуч) (рис. 92). Вся анімація та дії задаються за допомогою різних тригерів – дотику, прокручування тощо (рис. 93). Створення смартоб’єктів реалізовано за допо могою компонентів. У компоненти можна об’єднати як окремі елементи, так і анімацію, а також виставити тип та ступінь м’якості переходу з одного екрана на ін ший. Рисунок 92 Рисунок 93
осноВний функціонал PrinciPle47 Анімація та тригери прикріплюються наступним 1.чином:Задається початковий вид елемента до взаємодії (рис. 94). 2. Після – тригер, при якому відбуватиметься аніма ція (рис. 95). 3. Задається вид елемента після виконання тригера (рис. 96). Рисунок 94 Рисунок 95 Рисунок 96
осноВний функціонал PrinciPle48 Створені анімації доступні у вікні перегляду. Од нак, анімації мають деякі особливості, наприклад, всі анімації тривають 0,5 с. За необхідності, тривалість і плавність можна змінити (рис. 97). Анімації переходів створюються за допомогою компонування та встановлення необхідних тригерів на об’єкти. Рисунок 97
осноВний функціонал PrinciPle49 Перш ніж імпортувати артборди в Principle, по трібно розставити їх у порядку переходів. Для ство рення ефекту безшовних переходів варто забрати зайві елементи інтерфейсу (рис. 98). Рисунок 98
© STEP IT Academy www.itstep.org Усі права на фото-, аудіо- і відеотвори, що охороняються авторським правом і фрагменти яких використані в матеріалі, належать їх законним власникам. Фрагменти творів використовуються в ілюстративних цілях в обсязі, виправданому поставленим завданням, у рамках учбового процесу і в учбових цілях, відповідно до законодавства про вільне використання твору без згоди його автора (або іншої особи, яка має авторське право на цей твір). Обсяг і спосіб цитованих творів відповідає прийнятим нормам, не завдає збитку нормальному використанню об’єктів авторського права і не обмежує законні інтереси автора і правовласників. Цитовані фрагменти творів на момент використання не можуть бути замінені альтернативними аналогами, що не охороняються авторським правом, і відповідають критеріям добросовісного використання і чесного використання. Усі права захищені. Повне або часткове копіювання матеріалів заборонене. Узгод ження використання творів або їх фрагментів здійснюється з авторами і правовлас никами. Погоджене використання матеріалів можливе тільки якщо вказано джерело. Відповідальність за несанкціоноване копіювання і комерційне використання матеріалів визначається чинним законодавством. UI/UX ДИЗАЙН УРОК 10. АНIМАЦIЯ В AFTER EFFECTS