Зміст
- 01. Створіть нову послідовність
- 02. Сортуйте робочі місця
- 03. Зробіть кілька фігур
- 04. Додати колір
- 05. Скопіюйте свої шари
- 06. Використовуйте опорні точки
- 07. Похитування часу
- 08. Додайте більше кольорів
- 09. Зробіть перший попередній перегляд
- 10. Створіть ключовий кадр
- 11. Створіть ще один ключовий кадр
- 12. Створіть більше ключових кадрів
- 13. Попередній перегляд
- 14. Налаштуйте послаблення
- 15. Додайте логотип
- 16. Попередній перегляд та експорт
- 17. Зайдіть у Photoshop
- 18. Перевірте, чи все добре
- 19. Експортуйте свій GIF
- 20. Ви готові!
Хороший візуальний дизайн стає простішим та легшим. Стає важче сказати, у кого справжні дизайнерські відбивні, а хто просто має доступ до справді приємних шаблонів веб-сайтів або наборів інтерфейсу. Це означає, що для того, щоб створити вражаючу взаємодію з користувачем, вам потрібно вийти за межі того, що очікують люди.
Деякі найпам’ятніші штрихи - це маленькі. Подумайте про відому «мавпочку руку п’ять» MailChimp, яка з’являється, коли ви натискаєте кнопку «Відправити» у своїй кампанії. Замість загального повідомлення про успіх, як ви могли б очікувати, вони поглибили трохи глибше і вправили свій бренд у досвід. Ми не будемо тут анімувати жодних лап мавп, але ми зробимо барвисту анімацію завантаження, яку легко налаштувати за допомогою власних кольорів бренду та логотипу. Приклад InVision ви можете переглянути нижче:
Ми використаємо After Effects для створення послідовності завантаження анімації, а потім перенесемо наш експортований відеофайл у Photoshop і перетворимо його на полегшений GIF, який можна запустити в будь-якому місці, де вам потрібен анімований елемент завантаження.
Перш ніж зануритися, вам потрібно вибрати чотири кольори бренду та мати під рукою невелику, одноколірну, прозору версію вашого логотипу. Якщо ви мали намір навчитися After Effects, це прекрасна можливість для вас заскочити, створити щось своє, і навчитись чудовим основним технікам у процесі.
Перегляньте цей ексклюзивний скринкаст або виконайте наведені нижче дії, щоб створити анімацію завантаження.
01. Створіть нову послідовність
Відкрийте After Effects і натисніть cmd + N щоб створити нову послідовність. Оскільки наше відео буде квадратним, замість стандартного співвідношення сторін 16: 9, змініть ширину та висоту на 120 пікселів у налаштуваннях композиції та натисніть OK. Рекомендований кінцевий результат нашого GIF становитиме 60 пікселів, але ми також хочемо мати можливість враховувати екрани Retina.
02. Сортуйте робочі місця
Перш ніж продовжувати, давайте переконаємось, що наші робочі області After Effects однакові. У верхньому меню перейдіть до Вікно> Робоча область> Стандартне. Таким чином, коли я кажу "Клацніть на цю річ внизу праворуч на екрані", вона насправді буде внизу праворуч на екрані.
03. Зробіть кілька фігур
Тепер давайте створимо декілька квадратних фігур, які стануть нашими анімованими кольоровими блоками. Клацніть на вашу послідовність (чорний квадрат посередині екрана), натисніть Питання, тоді Shift + клацання та перетягування квадрат на екрані, щоб краї виходили за межі країв композиції.
Доброю практикою є ідеальне центрування фігури на екрані. На панелі «Вирівняти» внизу праворуч клацніть «Вирівнювання по горизонталі по центру» та «Вирівнювання по вертикалі по центру».
04. Додати колір
Поки вашу фігуру все ще вибрано, натисніть опцію «Заливка кольором» у верхній частині екрана та введіть один із основних кольорів бренду як шістнадцяткове чи RGB-значення. Ви також можете використовувати піпетку для вибірки кольорів з будь-якого місця на екрані, включаючи кольори поза вікном After Effects, що корисно.
05. Скопіюйте свої шари
Внизу екрана ви побачите часову шкалу з одним шаром із назвою «Shape Layer 1». Виберіть його, натиснувши на ім'я або синю смужку на шкалі часу, і натисніть ctrl / cmd + D чотири рази, щоб дублювати його. У вас повинно вийти п’ять однакових шарів на вашій шкалі часу. Вони будуть називатися Shape Layer 1, 2, 3, 4 і 5.
06. Використовуйте опорні точки
Кожна фігура збирається анімувати з іншого боку екрану. Щоб полегшити це, ми заздалегідь змінимо розташування наших опорних пунктів. Виберіть Shape Layer 2 і натисніть Y щоб відкрити інструмент Anchor Point. Потім клацніть на свою опорну точку (вона схожа на перехрестя десь у вашій фігурі) і перетягніть її до нижнього краю вашого квадрата. Повторіть на шарах 3-5, розмістивши кожну опорну точку на іншому краї, ніж останній. Вам не потрібно нічого робити для Shape Layer 1.
07. Похитування часу
Тепер настав час зрушити час наших фігур на шкалі часу. Натисніть V щоб перейти до інструменту вибору та на вашій шкалі часу shift + клацання сині смуги для шарів 3-5 і перетягніть їх праворуч, відставляючи кожен на одну секунду. Вони повинні починатися з позначок 1, 2 та 3 секунди на вашій хронології. Якщо ваша шкала часу занадто зменшена, натисніть і утримуйте висота і прокрутіть вниз - ця дія збільшить і зменшить масштаб вашої шкали часу.
08. Додайте більше кольорів
Індивідуально виберіть фігури 2-4 та змініть їх колір заливки, як це було на кроці 4. Ви можете перетягнути головку відтворення (вертикальну червону лінію прогресу) по фігурі, яку ви редагуєте, щоб побачити, як внесені зміни. Ми залишимо Shape Layers 1 і 5 однаковими кольорами, тому що ми створимо цикл, який починається і закінчується одним кольором. Якщо зараз це не має сенсу, не хвилюйтеся - це буде.
09. Зробіть перший попередній перегляд
Пора попередньо переглянути свої ручні роботи. Натисніть кнопку пробіл і спостерігайте за зміною кольорів на екрані. Хіт пробіл ще раз, щоб зупинити це (або вихід якщо це не спрацює).
10. Створіть ключовий кадр
Клацніть та перетягніть головку відтворення назад на початок вашої шкали часу. Виберіть Shape Layer 2, а потім натисніть S на клавіатурі, щоб відобразити параметри масштабу для цієї форми. Тепер клацніть піктограму секундоміра поруч із шкалою, вимкніть піктограму посилання поруч із відсотками шкали та перетягніть друге значення до 0%. Маленький діамант з’явиться на вашій хронології в поточному місці вашого плеєра. Вітаємо! Ви щойно створили ключовий кадр!
11. Створіть ще один ключовий кадр
Перетягніть головку відтворення на 1 секунду і встановіть значення фігури назад на 100 відсотків. Інший ключовий кадр повинен з’явитися у вашій шкалі часу на відтворювальній головці. Перетягніть головку відтворення назад на початок часової шкали та натисніть пробіл, щоб переглянути анімацію. Ви повинні побачити масштаб фігури вгору та закрити Shape Layer 1.
12. Створіть більше ключових кадрів
Повторіть ці кроки ще раз на Shape Layers 3-5, кожного разу починаючи анімацію на початку синьої смуги шару, яку ми розпочали на 1 секунду раніше. Завершивши, перший ключовий кадр кожного шару повинен збігатися з останнім ключовим кадром шару під ним.
13. Попередній перегляд
Закінчивши додавати ключові кадри, перегляньте свою роботу. Ви повинні побачити різні форми, що ковзають одна на одну під різними кутами. Якщо це так, переведіть плеєр на 4 секунди та натисніть N. Це позначить кінець вашої анімації та повторить попередній перегляд, коли ви знову натиснете пробіл. Якщо Shape Layer 1 і Shape Layer 5 однакового кольору, він повинен утворювати безшовну петлю.
14. Налаштуйте послаблення
Настав час додати свій логотип, але не зовсім. Зараз анімація, мабуть, виглядає дещо лінійною (читай: нудною) - давайте оживимо її, змінивши послаблення. Утримуючи зміна клавішу, виберіть остаточний ключовий кадр кожного шару та клацніть правою кнопкою миші на одному. Виберіть швидкість ключового кадру, потім встановіть вхідну швидкість на 100 відсотків і залиште Розміри X та Y в спокої. Натисніть OK і перегляньте ще раз. Ви помітите, що анімація сповільнюється в самому кінці, створюючи більш динамічне відчуття.
15. Додайте логотип
Тепер ми готові додати ваш логотип поверх анімації. На панелі проекту ліворуч на екрані двічі клацніть порожню область під Comp 1 та імпортуйте файл зображення (найкраще, якщо це прозорий формат зображення, наприклад, PNG або EPS.) Потім перетягніть його на початок вашого шкала часу, роблячи її найвищим шаром. Можна вдарити S ще раз, щоб масштабувати ваш логотип вгору або вниз, і знову використовуйте панель «Вирівняти», щоб розмістити його в центрі композиції.
16. Попередній перегляд та експорт
Коли вас влаштовує розмір та розміщення вашого логотипу, натисніть кнопку відтворення ще раз і переконайтеся, що все ще виглядає добре. Якщо так, пора експортувати своє відео. Йти до Файл> Експорт> Додати до черги візуалізації, потім встановіть для параметрів візуалізації значення Найкраще, модуль виводу - Без втрат і виберіть, куди покласти свій відеофайл, клацнувши ім'я файлу в області Вивід до.
17. Зайдіть у Photoshop
Тепер настав час завантажити Photoshop і перетворити наше відео в анімований GIF. У Photoshop перейдіть до Файл> Імпорт> Відеокадри до шарів і виберіть свій відеофайл. У наступному підказці ви можете налаштувати ряд параметрів імпорту для вашого відео. Однак, оскільки ця анімація настільки коротка, ми просто натиснемо OK.
18. Перевірте, чи все добре
Щоб переконатися, що з GIF у Photoshop нічого не виглядає забавно, перейдіть до Вікно> Хронологія щоб відобразити часову шкалу, і натисніть кнопку відтворення в нижньому лівому куті. Відтворення може здійснюватися не зі 100% швидкістю, тому не хвилюйтеся занадто сильно, якщо це здається повільним. Ви просто хочете переконатися, що все пройшло нормально, і що це все здається гладким і безшовним при циклі.
19. Експортуйте свій GIF
Щоб зберегти GIF, натисніть ctrl / cmd + alt + shift + S щоб відкрити вікно Зберегти для Інтернету. Вгорі виберіть тип файлу GIF, а в попередньо встановленому спадному меню вище виберіть GIF 128 No Dither. У нижній частині вікна ви можете налаштувати розмір зображення до 60 пікселів для остаточного виводу. Переконайтеся, що для параметрів циклу анімації встановлено значення «Назавжди», адже подібно до діамантів, GIF назавжди (або, принаймні, так і повинно бути).
20. Ви готові!
Вітаємо! Тепер у вас є фірмовий GIF ручної роботи, який ви можете впровадити на своєму веб-сайті чи в додатку, використати для додавання реалістичних станів „завантаження“ до своїх прототипів або поставити Dribble або Behance, щоб його бачив увесь світ.
Ця стаття спочатку з'явилася в чистий, провідний світовий журнал для веб-дизайнерів та розробників. Підпишіться тут.
