TL;DR: Анімований логотип у After Effects робиться за 7 кроків: підготовка SVG/Illustrator-файлу з шарами → імпорт як композиція → анімація opacity і scale → easing F9 → motion blur → саундтрек → експорт у MP4 (соцмережі) або Lottie (веб). Час: 2-3 години для першого логотипу.
Чому варто анімувати логотип
Анімований логотип — це впізнаваність × 3. Статичний знак людина бачить 0,5 секунди. Анімація утримує погляд 2-4 секунди — час, за який мозок встигає зафіксувати бренд. За даними HubSpot, анімовані логотипи в Instagram Reels мають на 47% вищий engagement.
Що потрібно перед стартом
- Adobe After Effects (мінімум CC 2022). Безкоштовний триал — 7 днів.
- Векторний логотип у Adobe Illustrator (.ai) або SVG. Растровий .png не підійде — буде пікселізація.
- Шари мають бути розділені: окремо літери, окремо іконка, окремо фон.
Крок 1. Підготовка файлу в Illustrator
Відкрий .ai файл логотипу. У панелі Layers переконайся, що кожна частина — окремий шар з осмисленою назвою (letter_M, icon_drop, circle_bg). Згрупуй пов'язані елементи (Ctrl/Cmd+G). Збережи файл — це майбутні шари в After Effects.
Крок 2. Імпорт у After Effects як композиція
У After Effects: File → Import → File… → вибери .ai → у діалозі Import As: Composition - Retain Layer Sizes. Тепер у Project-панелі з'явиться папка з усіма шарами і композиція з тією ж назвою. Подвійний клік на композицію — і всі елементи готові до анімації.
Крок 3. Базова анімація: opacity + scale
Найпростіша і найефектніша комбінація:
- Виділи всі шари (Ctrl/Cmd+A).
- Натисни S — відкриється Scale. На
0:00постав ключ Scale = 0%, на0:15— Scale = 100%. - Натисни T — Opacity. На
0:00постав Opacity = 0, на0:10— Opacity = 100. - Розсунь шари по таймлайну на 2-3 кадри один від одного — отримаєш ефект каскаду.
Крок 4. Easing — секрет «соковитої» анімації
Лінійна анімація виглядає механічно. Виділи всі ключі (Ctrl/Cmd+A на таймлайні) → F9 — це Easy Ease. Для ще приємнішого результату відкрий Graph Editor (іконка з кривою) і витягни криву в S-форму: повільний старт → швидкий розгін → плавна зупинка. Це принцип №1 диснеївської анімації.
Крок 5. Motion Blur — реалізм руху
Без motion blur анімація виглядає як презентація PowerPoint. Увімкни його:
- На таймлайні над шарами знайди іконку Enable Motion Blur (стрілка з шлейфом) — увімкни.
- На кожному шарі активуй той самий перемикач у стовпці Motion Blur.
Тепер швидкий рух залишає природний слід. Рендер довший на ~30%, але результат вартий.
Крок 6. Звук (опційно, але дає +50% впливу)
Логоанімація без звуку — як обіцянка без підпису. Знайди безкоштовний whoosh+impact на Freesound або в Pixabay Sound Effects. Перетягни в композицію — він автоматично займе нижній шар як аудіодоріжка.
Крок 7. Експорт у потрібний формат
| Куди | Формат | Як |
|---|---|---|
| Instagram, TikTok, YouTube | MP4, H.264 | File → Export → Add to Adobe Media Encoder Queue |
| Веб-сайт (легкий, scalable) | Lottie JSON | Плагін Bodymovin (безкоштовно) |
| Telegram-стікери | WebM, до 256 КБ | Render → WebM, alpha channel |
Часті помилки початківців
- Пікселізація — імпортував .png замість .ai. Завжди працюй з векторами.
- Анімація «з'їжджає» — забув задати Anchor Point у центр об'єкта. Натисни Ctrl/Cmd+Alt+Home.
- Лагає при рендері — забув виключити motion blur у preview-режимі. Іконка під таймлайном.
Хочеш навчитися моушн-дизайну з нуля?
У Maslo Motion вчимо After Effects + Blender 3D від першої анімації до повноцінного портфоліо. Український онлайн-курс з персональним фідбеком від практикуючого моушн-дизайнера.
Дивитись програму курсу →Також читайте: Expressions в After Effects, Анімація тексту в After Effects, Плавна анімація і Graph Editor.
FAQ
Скільки часу потрібно на першу логоанімацію?
Якщо це твій перший раз у After Effects — 3-5 годин разом з вивченням інтерфейсу. Після 3-5 анімацій — 30-60 хвилин на простий логотип.
Чи можна замість After Effects використати Figma або Canva?
Для дуже простої появи з ефектом fade — так. Для каскадної анімації з easing, motion blur і експортом у Lottie — ні, потрібен After Effects або Rive.
Які плагіни After Effects найкорисніші для логоанімації?
Top-3: Motion v3 (безкоштовно, спрощує easing), Bodymovin (експорт у Lottie), Trapcode Particular (для частинок навколо логотипу).
Чому моя анімація виглядає «дешево»?
3 причини: (1) лінійні ключі без easing, (2) немає motion blur, (3) усі елементи рухаються одночасно. Виправ ці три — і результат стане в рази якіснішим.