Як експортувати анімацію з прозорим фоном
Анімований шрифт без нічого позаду: WebM зі справжньою прозорістю для відео, Lottie для сайтів і застосунків.
Експортувати анімацію з прозорим фоном — здавалося б, одна галочка. Насправді майже ніколи. Ви анімуєте заголовок, логотип чи наліпку, експортуєте, кладете поверх відео — а воно приходить на суцільній чорній чи білій плашці. Просто у вибраному форматі не було де зберегти порожні місця.
Це прохання знову й знову зʼявляється на форумах дизайнерських інструментів. На дошці побажань Adobe Express експорт прозорого відео просять уже роками, а на форумі Figma ідея експортувати прототип у відео чи GIF узагалі — одна з найпереглядуваніших. Людям потрібні титри для YouTube, анімовані наліпки для сторіз, логотип, що рухається, у шапці сайту, — усе те, що працює лише поверх чогось іншого.
У цьому посібнику — які формати справді зберігають прозорість, чим дизайнери користуються сьогодні й де кожен спосіб кульгає, а далі — як це зробити в Paletoo: постер у дусі Баугаузу, де цитата підіймається літера за літерою, експортований як прозорий WebM і як файл Lottie.
Чому фон постійно повертається
Прозорість у відео — це альфа-канал: четверте значення для кожного пікселя, яке каже, наскільки він прозорий. У формата, яким користуються майже всі, його немає. MP4 з H.264 — файл, який грає кожен телефон і кожна соцмережа, — зберігає лише колір, тож усе прозоре під час експорту заливається суцільним кольором. GIF уміє зробити один колір прозорим, але тільки повністю або ніяк: без мʼяких країв, без тіней і зі світлим ореолом довкола згладженого шрифту.
Форматів, що зберігають альфу, небагато. ProRes 4444 у файлі MOV — те, чого чекають відеоредактори: чудовий і дуже важкий. WebM із кодеком VP9 тримає альфу при розмірі, придатному для вебу; Chrome, Edge і Firefox відтворюють його прозорим, а Safari та багато відеоредакторів показують чорний фон. HEVC з альфою — власний шлях Apple для Safari. А Lottie — узагалі не відео: невеликий файл JSON із векторних фігур і ключових кадрів, який програвач малює наживо, і він прозорий від природи.
Чим користуються зараз — чесно
After Effects — стандартний шлях, і заслужено: рендер у ProRes 4444 з RGB і альфою прийме будь-який редактор, а Lottie для застосунків експортує плагін Bodymovin. Це точно й перевірено. Але й чимало техніки для десятисекундного заголовка: підписка, черга рендера й файли на сотні мегабайтів у Full HD.
Обхідні шляхи всім знайомі. Рендер на рівному зеленому з кеїнгом у редакторі лишає кольорову облямівку на мʼяких краях і тінях. Послідовність PNG — по картинці на кадр, кожна зі справжньою альфою, — надійна, але це тека на сотні файлів. Спеціальні інструменти для моушну, як-от Jitter, Lottielab і SVGator, експортують Lottie напряму, і роблять це добре. У багатьох браузерних дизайнерських сервісах експорт відео — це MP4 або GIF, тож перевірте, чи є у вашому прозорий формат, перш ніж будувати в ньому анімацію.
Як зробити правильно
Спершу вирішіть, куди піде файл. На сторінках сайтів і в браузерних редакторах WebM з альфою працює як є. Для настільного редактора, який альфу з WebM не читає, переконвертуйте файл у ProRes 4444 конвертером, що зберігає прозорість. Для застосунку чи анімації на сайті, яка має бути чіткою в будь-якому розмірі, експортуйте Lottie. Для Instagram, TikTok чи YouTube Shorts прозорість не важить: платформа все одно все сплющує, тож експортуйте MP4.
Далі проєктуйте під фон, якого ви не бачили. Заголовок поверх відео має читатися і на світлому, і на темному: дайте темному шрифту світлий контур чи мʼяку тінь і перевірте файл на обох. Анімація має бути короткою й завершеною: поява, яка приземляється й тримається, легше вріжеться в монтаж, ніж та, що ніяк не заспокоїться.
Зроблено в Paletoo
Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:
Як це зробити в Paletoo
«Відкрити в Paletoo» відкриває приклад із цього посібника, постер «форма йде за кольором.», новим документом — вашою власною копією. З вашим дизайном так само: рухатися може будь-що на артборді, а формати нижче зʼявляються в експорті, щойно щось рушить.
Клацніть цитату, щоб вибрати її. Вкладка Дизайн праворуч покаже її шрифт — щільний геометричний гротеск, — розмір і колір. Рух належить кожному обʼєкту окремо, тож фігури, рядок над цитатою й номер випуску стоятимуть на місці, якщо не анімувати і їх.
Постер у дусі Баугаузу відкрито в Paletoo, цитату вибрано, праворуч вкладка «Дизайн» Відкрийте вкладку Анімація й натисніть Підйом; кожна плитка під курсором програє рух на ваших власних словах. Спершу «Підйом» рухає слово за словом: відкрийте Більше налаштувань, задайте Поділ — Літери, а тоді натисніть Відтворити під полотном і подивіться, як цитата виростає літера за літерою.
Цитата анімована «Підйомом», літера за літерою, у вкладці «Анімація» Натисніть Експорт (⇧ ⌘ E). Оскільки щось рухається, вікно відкриється на форматах анімації: виберіть WebM, «Відео VP9, може бути прозорим». Відкрийте в рядку Налаштування експорту й задайте Фон — Прозоре.
Вікно «Експорт»: вибрано WebM, а «Фон» — «Прозоре» Експортуйте. Кремового паперу у файлі не буде; чорні літери й кольорові фігури збережуть мʼякі краї, бо альфа справжня. Щоб записати прозорий WebM, потрібен Chrome, Edge або Firefox 130 чи новіший — в іншому браузері варіант буде сірим, а причину покаже підказка.
Для сайту чи застосунку експортуйте ту саму роботу в Lottie — «Векторна анімація для застосунків і сайтів». У рядку Текст виберіть Контури — літери фігурами, без жодних шрифтів — або Текстові шари; файлом виберіть JSON чи dotLottie й натисніть Перегляд, щоб побачити, як він грає в lottie-web, ще до того, як віддати його розробникові.
Для стрічки соцмереж виберіть натомість MP4 чи GIF. Вони завжди зберігають фон — а стрічці саме це й треба, — і на жодному експорті немає водяного знака.
Зробіть по-своєму
Спершу налаштуйте час. Швидкість задає темп — Спокійно, Звичайно чи Швидко, — а Зсув у Більше налаштувань — наскільки окремо стартують літери. Заголовок поверх відео найкраще читається на «Звичайно» з невеликим зсувом; цитата з трьох слів може дозволити собі «Спокійно». Тримайте всю появу до двох секунд і дайте їй постояти: монтажерові потрібен чистий нерухомий хвіст, щоб різати.
Перш ніж надсилати файл, перевірте його на світлій картинці й на темній. Чорний шрифт на прозорому фоні зникає на нічному кадрі; світлий контур чи мʼяка тінь на тексті це виправляють, і у WebM мʼякий край тіні зберігається, бо кожен піксель має власну прозорість. У GIF — ні.
Тримайте Lottie легким. Звичайний текст, фігури й градієнти йдуть у файл вектором; фото, ефекти й стилі — картинками, і вікно «Експорт» перелічує кожен такий шар із причиною ще до експорту. На артборді цього постера є дрібне зерно, якого Lottie описати не може, тож вікно покаже весь артборд картинкою на кожен кадр. Вимкніть зерно на артборді — і файл буде легким і векторним, а Контури вибирайте завжди, якщо розробникові не треба правити слова.
Шаблони з цим ефектом
Запитання
Чи підтримує MP4 прозорий фон?
На практиці ні. MP4 з H.264, який грають телефони й соцмережі, не має альфа-каналу, тож прозорі місця стають суцільним кольором. Для прозорості беріть WebM, MOV у ProRes 4444 або Lottie.
Чому мій прозорий WebM показує чорний фон?
Програвач не читає альфу з WebM. Chrome, Edge і Firefox відтворюють його з прозорістю; Safari та багато відеоредакторів показують чорне. Для настільного редактора переконвертуйте файл у ProRes 4444 конвертером, що зберігає прозорість.
Lottie краще за відео?
Для сайтів і застосунків — зазвичай так: це вектор, тож він чіткий у будь-якому розмірі, важить набагато менше за відео й прозорий від природи. Для фото й важких ефектів простіше відео, бо в Lottie ці частини потрапляють картинками.
Чи можна зробити прозорий GIF?
GIF уміє робити піксель лише повністю прозорим або повністю суцільним, тож мʼякі краї отримують ореол, а GIF із Paletoo зберігає фон. Для прозорості виберіть WebM або Lottie.
Експорт безкоштовний?
Так. Анімація й експорт у Lottie, MP4, GIF і WebM нічого не коштують і не мають водяного знака. Кредити потрібні лише для генерації зображень ШІ та матеріалів.
Зробити онлайн
- Анімація Lottie онлайнАнімація Lottie онлайн без After Effects: анімуйте шрифт і фігури — по кліку на кожну — й експортуйте легкий файл для сайтів і застосунків.
- Сторіз для Instagram онлайнШаблони сторіз для Instagram на весь екран, 1080 × 1920: змініть слова й фото, за бажання додайте рух і збережіть як зображення чи відео.
Безкоштовні шаблони для дизайну: Шаблони сторіз і Reels
Читайте далі
Тренд 2027: кінетична типографіка — шрифт, що рухається
Великий жирний шрифт, що рухається — або виглядає так, ніби щойно рухався.
Безшовна карусель в Instagram, що збігається на кожному розрізі
Один широкий артборд, зображення крізь розрізи й окремий файл на кожен слайд.
Мокапи без Photoshop: як показати дизайн на справжній речі
Телефони, постери, одяг і пакування — ваш дизайн у перспективі й світлі, без жодного PSD.
Спробуйте на своєму дизайні
Paletoo відкривається в браузері, без реєстрації. Кожен ефект тут живий: замініть фото чи слова — і ефект підлаштується.
Відкрити в Paletoo