Анимация логотипа это его короткое движение: логотип собирается из частей, проявляется, отзывается на нажатие. Её видят в начале и конце роликов, на загрузке сайта и приложения, в аватарке и эмодзи канала. Хорошая анимация занимает секунду-две и делает логотип запоминающимся, плохая отнимает время и раздражает. Разбираем, как сделать первую.
Где анимация логотипа работает на бренд
- Ролики. Заставка в начале и концовка с логотипом в конце: зритель запоминает, чьё это видео.
- Сайт. Логотип на загрузке или на первом экране, реакция на наведение в шапке.
- Приложение. Экран запуска, пока подгружаются данные.
- Telegram. Анимированная эмодзи с логотипом в постах и реакциях, стикер с логотипом в паке канала.
- Презентации и экраны на событиях. Петля логотипа на заставке.
Какие бывают анимации логотипа
- Сборка. Части логотипа появляются и собираются в логотип. Классика для заставки ролика.
- Петля. Логотип мягко дышит, вращается или переливается, без начала и конца. Для загрузки и экранов ожидания.
- Реакция. Короткое движение на наведение или нажатие. Для сайта и интерфейса.
- Логотип в эмодзи. Тот же логотип в формате TGS для Telegram: в постах, реакциях и статусах.
Обычно делают одну основную сборку и из неё короткие версии под остальные места, чтобы движение везде было одним характером.
Форматы
| Формат | Где | Особенность |
|---|---|---|
| MP4 | ролики, соцсети, презентации | любая сложность, но это видео: вес и чёткость зависят от размера |
| Lottie | сайт, iOS, Android | вектор в JSON, лёгкий и чёткий на любом экране |
| TGS | эмодзи и стикеры Telegram | Lottie по правилам Telegram: 512 × 512, до 3 секунд, до 64 КБ |
Если анимация нужна и в ролике, и на сайте, и в Telegram, это лучше сказать до начала работы: тогда её собирают в векторе и выгружают во все три формата, а не переделывают каждый раз.
Как делают анимацию логотипа
- Векторный логотип. Основа это логотип в векторе, разложенный на части: буквы, элементы, фон.
- Характер движения. Резкое и точное или мягкое и упругое, под характер бренда.
- Раскадровка. Несколько ключевых кадров статикой: как логотип появляется и где останавливается.
- Анимация и звук. Для ролика добавляют короткий звук или ставят анимацию под трек.
- Версии. Длинная и короткая, светлый и тёмный фон, нужные форматы и пропорции.
Частые ошибки
- Слишком долго. Заставка на 6–8 секунд перед коротким роликом съедает внимание. Хватает 1–3 секунд.
- Логотип теряется. Если в движении логотип искажается до неузнаваемости, анимация работает против бренда.
- Чужой характер. Мультяшная пружинистость у строгого финансового бренда выглядит странно.
- Только видео. Без Lottie и TGS анимацию не поставить на сайт и в Telegram без потери чёткости.