Як зробити GIF-анімацію: покроково для початківців

Крок 1

Сплануйте гіфку до того, як відкрити програму

GIF — формат з обмеженнями, і їх краще врахувати на старті. За специфікацією GIF89a палітра кольорів містить щонайбільше 256 кольорів, а затримку кожного кадру задають у сотих частках секунди. Тож найкраще в GIF виглядають пласкі кольори, іконки, текст і проста графіка, а фото й м'які градієнти — гірше. Перед стартом запишіть:

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

💡 Намалюйте на папері ключові пози: початок, кульмінацію й повернення. Так одразу буде видно, чи зійдеться цикл.

Крок 2

Оберіть інструмент

Окрема програма для анімації не потрібна: GIF уміють робити інструменти, якими ви, ймовірно, вже користуєтеся. Принцип усюди однаковий: кадри, час для кожного кадру, цикл, експорт.

• •Photoshop — покадрова анімація в панелі Timeline і експорт у GIF. Це платна підписка Adobe з 7-денним пробним періодом;
• •Figma — анімацію з Figma Motion можна експортувати в GIF. Figma Motion зараз у відкритій беті, тож функції можуть змінюватися, а доступ залежить від тарифу й типу місця;
• •Procreate на iPad — режим Animation Assist для мальованої покадрової анімації з експортом в Animated GIF.

💡 Для іконок і інтерфейсних анімацій зручніша Figma, для мальованого руху — Procreate, для гіфок з фото й шарів — Photoshop.

Крок 3

Зробіть кадри

У Photoshop: відкрийте Window > Timeline і Window > Layers, у центрі панелі Timeline натисніть стрілку й оберіть Create Frame Animation. Кожен об'єкт, який рухається окремо, тримайте на своєму шарі. Кнопка Duplicate Selected Frames унизу панелі додає новий кадр — у ньому змініть шари: увімкніть чи вимкніть видимість, зсуньте позицію, змініть прозорість. Якщо кадри вже лежать у шарах, у меню панелі Timeline є Make Frames From Layers. У Procreate: Actions (іконка гайкового ключа) > Canvas > Animation Assist. Кожен шар стає кадром, кнопка Add Frame додає порожній кадр, а «кальки» (onion skin) показують сусідні кадри напівпрозорими — до 12 штук.

• •змінюйте за кадр щось одне: позицію, розмір, колір або прозорість;
• •що менший крок між кадрами, то плавніший рух;
• •перевіряйте результат кнопкою Play після кожних кількох кадрів.

Крок 4

Таймінг і безшовний цикл

Тепер задайте швидкість. У Photoshop під кожним кадром є затримка: клацніть на неї й оберіть тривалість. Унизу панелі Timeline оберіть повтор: Once, Forever або Other. У Procreate швидкість задають у Settings повзунком Frames Per Second, від 1 до 60 кадрів на секунду. Довідка Procreate зазначає, що звичайна анімація має близько 12 унікальних малюнків на секунду, а кіноякісна — до 24. Там же можна обрати режим відтворення: Loop, Ping Pong (вперед і назад) або One Shot.

• •безшовний цикл: останній кадр має вести в перший, а не повторювати його, інакше в момент повтору буде помітна пауза;
• •Ping Pong рятує рух, що повертається сам у себе, як-от пульсація чи гойдання;
• •затримка на ключових позах: довший кадр на початку чи в кінці дає оку відпочити.

💡 Якщо рух видається «дерев'яним», додайте більше проміжних кадрів біля початкової й кінцевої пози, а менше — посередині: предмет плавно рушить і плавно зупиниться.

Крок 5

Експорт і вага файлу

Photoshop: File > Export > Save for Web (Legacy). У туторіалі Adobe радять пресет GIF 128 Dithered, у меню Colors — 256, за потреби менші Width і Height, а в Looping Options — Forever. Кнопка Preview покаже гіфку в браузері. Інший шлях — File > Save As і формат GIF. Figma: виділіть фрейм верхнього рівня з анімацією, у розділі Export перейдіть на вкладку Animated, оберіть GIF, розмір, частоту кадрів і Loop. Procreate: Actions > Share > Animated GIF, далі Max Resolution (краща якість, більший файл) або Web Ready (менший файл).

• •менший розмір кадру — менша вага, саме тому Adobe радить зменшувати Width і Height для гіфок в інтернеті;
• •менше кадрів і нижча частота кадрів — менший файл;
• •що менше кольорів у налаштуваннях експорту, то помітніший дизеринг (dithering): порівнюйте варіанти в Preview;
• •для довгого чи фотографічного руху краще відео: Procreate зазначає, що MP4 зазвичай легший за GIF.

💡 Гіфка, яка сама запускається на сайті й триває понад 5 секунд, за WCAG 2.2 має мати спосіб зупинитися. І ніколи не робіть більше трьох спалахів за секунду.