Тренд 2027: кінетична типографіка — шрифт, що рухається

Звідки взялася кінетична типографіка

Рухомий шрифт має довгу історію в титрах фільмів, де дизайнери на кшталт Сола Басса робили початкові титри частиною оповіді, а також у телевізійних заставках і кліпах. Сам термін «кінетична типографіка» зріс разом із програмами для моушн-графіки, коли кілька слів можна було підігнати під голос і анімувати за години, а не за тижні.

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

Як зробити шрифт у русі читабельним

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

Уся майстерність — у таймінгу. Дайте кожному слову побути на екрані стільки, щоб його встигли прочитати двічі, а останній кадр тримайте довше, ніж здається потрібним: саме його запамʼятовують і скриншотять. Поява по літері пасує до трьох-чотирьох слів, а не до речення; довші рядки діліть на слова.

Пастки кінетичного шрифту

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

Перевірте формат, перш ніж під нього дизайнити. Відео записує кожен кадр таким, яким він намальований, разом з ефектами. Файл Lottie — це вектор і ключові кадри, тож усе, чого Lottie не вміє описати, — фото, ефект на кшталт «Відлуння», стиль — потрапляє у файл зображенням, яке однаково рухається, а вікно «Експорт» перелічує кожен такий шар ще до експорту. Прозорий WebM грає з прозорістю в Chrome, Edge і Firefox, а Safari та багато відеоредакторів показують чорне тло.

Зроблено в Paletoo

Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:

Як зробити це в Paletoo

1. Відкрийте дизайн і виберіть заголовок. Шлейф найкраще видно на жирному шрифті й темному простому тлі; тут це «See you on the floor.» на фінальному дописі фестивалю — білі літери під рожевою дзеркальною кулею.

2. Відкрийте вкладку Ефекти й розгорніть групу Розмиття і рух; якщо «Відлуння» немає в першому ряду, натисніть Усі.

   

3. Натисніть Відлуння. У списку Застосовано зʼявиться один крок із пресетом Шлейф: шість копій заголовка, кожна на 14 px нижче й правіше за попередню, що згасають позаду літер. Це не шари — змініть слова, і кожна копія піде за ними.

   

4. Клацніть рядок Відлуння, щоб відкрити його. Угорі — пресети Шлейф, Слід відлуння (довгий шлейф, тонований градієнтом) і Наближення (копії, що більшають позаду літер), під ними Копії, Згасання, Крок X, Крок Y і Розміщення: Позаду, Попереду чи Обидва.

   

5. Під Деталі — Крок масштабу й Крок повороту, щоб кожна копія була трохи більшою чи повернутою, і Зміна кольору, яка тонує копії одним кольором або дає Градієнт від найближчої копії до останньої.

6. Щоб шрифт справді рухався, відкрийте вкладку Анімація, виберіть появу — Підйом, Друк чи Стрибок, — у рядку Поділ поставте Слова або Літери й натисніть Відтворити.

7. Натисніть Експорт: PNG чи PDF для статичного постера; MP4, GIF чи WebM для руху — WebM із фоном Прозоре, щоб накласти на відео, — або Lottie для сайту чи застосунку.

Зробіть по-своєму

Напрям шлейфу — це напрям, звідки ніби прилетів шрифт. Крок X і Крок Y — від −100 до 100 px на копію: 14 і 14 (як у пресеті) — коротке падіння по діагоналі, 0 і 20 — пряме падіння вниз, а відʼємний Крок X веде шлейф ліворуч. Тримайте загальну довжину — копії, помножені на крок, — меншою за висоту літери, інакше шлейф почне читатися як другий заголовок.

Копії — до 30. Шість-вісім із високим Згасання (80–90 %) дають мʼякий шлейф, що тане майже до нуля; 20 і більше з дрібним кроком перетворюються на суцільний видавлений блок — постерний вигляд обʼємного шрифту. Розміщення на Обидва розносить копії вперед і назад, і це читається як вібрація, а не політ.

На фото розфарбуйте шлейф: відкрийте Деталі, у Зміна кольору виберіть Градієнт і візьміть два кольори з картинки — тоді копії відділяться від тла. Для вибуху натисніть Наближення й підніміть Крок масштабу; невеликий Крок повороту на 2–4° додасть закручування. А тоді натисніть Відтворити на вкладці Анімація й подивіться, як шлейф читається, поки слова рухаються.

Шаблони з цим ефектом

• Пост: нічна подія, великі години
• Пост: до зустрічі

Зробити онлайн

• Анімація Lottie онлайнАнімація Lottie онлайн без After Effects: анімуйте шрифт і фігури — по кліку на кожну — й експортуйте легкий файл для сайтів і застосунків.
• Ефекти для тексту онлайнХром, золота фольга, тиснення, вирізані літери, обведення й викривлення для вашого тексту — а слова лишаються текстом, який можна редагувати.

Безкоштовні шаблони для дизайну: Шаблони дописів для соцмереж

Читайте далі

• 

  Як викривити текст сіткою без растеризації

  Натягніть сітку на заголовок — слова лишаються редагованими.
• 

  Як викривити текст і пустити по контуру в Photoshop — і за хвилину

  Три способи вигнути заголовок у Photoshop — і одна секція «Викривлення», де слова лишаються живими.
• 

  Як експортувати анімацію з прозорим фоном

  Анімований шрифт без нічого позаду: WebM зі справжньою прозорістю для відео, Lottie для сайтів і застосунків.

Огляд: тренди графічного дизайну 2027