Канал Twitch показывает ваш знак в большем числе мест, чем почти любая другая платформа, и большинство из них крошечные. Значок в эфире рядом с сообщениями чата. Аватар в сетке каталога, соревнующийся со сотней других миниатюр. Офлайн-баннер, висящий на экране, пока никто не стримит. Угол оверлея во время трансляции, лежащий поверх игрового видео, меняющего цвет каждые несколько секунд. И стартовый экран трансляции — единственная поверхность с достаточным местом, чтобы показать знак, реально движущийся.
Это ограничение, которое стоит усвоить заранее: на Twitch анимация — исключение, а крошечные стоп-кадры — правило. Это значит, что анимация логотипа Twitch должна быть спроектирована вокруг стоп-кадра, который уже работает везде остальном. Сделайте статику правильно, и анимация становится коротким, высокоценным дополнением. Пропустите её, и анимация — украшение поверх знака, который никто не может прочитать.
Где знак на самом деле появляется
Помогает разделить поверхности по тому, сколько места они дают, потому что проектные решения прямо вытекают из этого.
Миниатюры каталога и офлайн-баннеры — самые крупные статичные размещения, и первое показывается, только когда вы в эфире. Каталог — место, где происходит обнаружение, поэтому знак соревнуется с каждым другим каналом в категории.
Аватары появляются в чате, в списках подписчиков и рядом с уведомлениями о рейде. Маленькие, повторяемые и часто — единственная версия, которую видит постоянный зритель.
Угол оверлея — единственное размещение без фиксированного размера, потому что зависит от вашей собственной сцены. Он также самый враждебный, поскольку лежит поверх движущегося игрового видео: знак оверлея должен держаться против произвольных меняющихся фонов.
Оповещения, переходы и стартовый экран трансляции — там, где живёт движение. Это поверхности, созданные для брендированного момента, а не для постоянной идентичности, и именно там анимированный знак зарабатывает своё место.
Офлайн-баннер — самая игнорируемая поверхность
Когда канал не в эфире, страница всё ещё существует, и что видит посетитель — офлайн-баннер плюс аватар плюс панели ниже. Для канала, стримящего несколько вечеров в неделю, это большая часть его жизни. Значительная доля впервые пришедших, и почти все, кто приходит из поиска или общей ссылки не в тот час, встречают сначала офлайн-состояние.
Два правила заставляют эту поверхность работать. Во-первых, композиция должна читаться завершённой без движения, потому что на ней ничто не движется. Во-вторых, она должна работать в размере каталога, потому что тот же актив часто переиспользуется как миниатюра, которую зритель видит в сетке обзора.
Практический провал здесь — баннер, сделанный для просмотра страницы во всю ширину и переиспользованный как миниатюра. Композиция, заполняющая широкий прямоугольник, теряет свои самые характерные элементы, когда её сжимают в маленькую карточку, и знак с словесным знаком в итоге соревнуются за несколько видимых пикселей. Сначала делайте маленькую версию — это тот же принцип, что применяется к любому экспорту <a href="/logo-animation-templates/logo-video-maker">создателя видеологотипов</a>, и здесь он действует с большей силой, потому что так много размещений Twitch маленькие.
Как сделать анимацию, переживающую просмотр без звука
Стартовые экраны трансляций и сцены переходов воспроизводят фоновую музыку чаще, чем кто-либо ожидает, а зритель, попавший на страницу канала, часто делает это без звука. Сам Twitch автовоспроизводит прямые трансляции без звука, а поведение автовоспроизводимых медиа в браузерах хорошо описано в документации MDN по автоплею: краткая версия в том, что воспроизведение начинается без действия пользователя, поэтому на звук рассчитывать нельзя.
Это порождает самый полезный тест для анимации логотипа стрима. Выключите звук и посмотрите до конца. Если появления кажутся произвольными без трека, тайминг неверен, и никакая работа со звуком не исправит это. Если знак по-прежнему ложится с намерением в тишине, анимация делает свою работу, а музыка становится улучшением, а не костылём.
Второй тест — поведение петли, и Twitch делает его необычайно важным. Стартовый экран трансляции идёт минутами, поэтому любая анимация там зацикливается десятки раз для одного зрителя. Последовательность, хорошо читаемая один раз, может стать раздражающей на пятнадцатом повторе, а жёсткая отсечка в точке петли, незаметная в первый проход, становится тем, что вы замечаете на десятом.
Решение — сделать петлю бесшовной, а не длинной. Знак, который оседает, а затем растворяется в своей собственной начальной позиции, будет зацикливаться без видимого шва, тогда как последовательность, открывающаяся из чёрного и возвращающаяся в чёрное, объявляет каждый перезапуск. Если на стартовом экране вы проверяете только одно, проверьте точку петли.
Цвет, контраст и проблема оверлея
Знак оверлея лежит поверх игрового видео. Это значит, что его фон — всё, что рендерит игра, меняющееся непрерывно, иногда яркое, иногда почти чёрное. Знак, зависящий от контраста с предсказуемым фоном, этого не переживает.
Работают три подхода.
Дайте знаку оверлея собственный изолированный фон — небольшая сплошная или едва заметно оформленная плашка за символом. Это стоит немного площади экрана и делает знак читаемым независимо от того, что происходит под ним.
Используйте знак с сильным внутренним контрастом, чтобы хотя бы один элемент оставался видимым на любом фоне. Однотонный знак исчезнет на видео того же тона в какой-то момент сессии. Это не гипотеза; это происходит на первом же стриме.
Уберите его из действия полностью. Большинство игровых интерфейсов держат свои статусные элементы в предсказуемых углах, и знак оверлея обычно принадлежит одному из пространств, которые они оставили в покое, — это та же логика, что стоит за конвенциями безопасной зоны, которые графика вещания использует десятилетиями.
За этим стоит задокументированная дисциплина. Установившийся принцип использования знака в том, что логотип не должен украшаться добавленными тенями, рамками или обводками, — руководство YouTube по брендингу канала формулирует то же правило для аватаров и оформления канала, и оно обобщается: если знаку нужна рамка, чтобы быть видимым, лежащая в основе проблема контраста не решена. Интересно, что плашка оверлея в этом смысле не украшение — она решает проблему читаемости, поэтому читается как намеренная там, где падающая тень читается как ошибка.
Есть также полезный аргумент сдержанности в пользу того, чтобы держать всё это простым. исследование Nielsen Norman Group об анимации в пользовательских интерфейсах отделяет движение, сообщающее о смене состояния, от движения ради него самого, и находит, что вторая категория стоит внимания, не возвращая ничего. Переход стрима сообщает, что контент вот-вот начнётся, — это реальная смена состояния. Знак, который крутится, подпрыгивает, взрывается и собирается заново, сообщает лишь то, что кому-то понравился таймлайн.
Размеры, которые вам нужны, и как часто
Рабочий набор для канала меньше, чем ожидают, и большая часть его исходит из одного рисунка.
Квадратный статичный для аватаров, экспортированный в максимальном размере, который принимает платформа, и подтверждённый читаемым внутри круговой обрезки. Широкий статичный для офлайн-баннера и миниатюры каталога, построенный так, чтобы композиция переживала показ в малом размере. Вертикальная анимация для сторис, Shorts и любых коротких клипов, нарезанных из стримов. Широкоэкранная анимация для стартового экрана трансляции, переходов и оповещений. И стоп-кадр, экспортированный из чистой фиксации анимации, для панелей и любого размещения, не принимающего движение.
Для экспортов анимации важны и разрешение, и соотношение сторон. руководство YouTube по соотношению сторон и разрешению документирует 9:16 вертикаль, 1:1 квадрат и 16:9 широкий экран вместе с рекомендацией 1080 на 1920 для вертикального видео, и клипы с Shorts Twitch сидят в тех же форматах. Экспорт всех трёх из одного источника сохраняет одинаковым тайминг входа между ними, что важно, потому что переход стрима и его парный короткий клип часто смотрят один за другим.
Порядок производства, избегающий переделки анимации
Последовательность ниже упорядочена так, чтобы держать неловкие решения перед дорогой работой, а не позади неё.
Раз. Экспортируйте графику как SVG или как прозрачный PNG в максимальном доступном размере и подтвердите прозрачность на тёмном фоне.
Два. Сделайте квадратную обрезку аватара и посмотрите в реальном размере чата. Это самое маленькое размещение, и оно ограничивает всё остальное.
Три. Спроектируйте широкую композицию баннера так, чтобы она переживала показ в виде маленькой миниатюры, и проверьте в том размере, а не во всю ширину.
Четыре. Решите размещение оверлея и его плашку до постройки анимации, потому что плашка меняет кадр, в котором сидит знак.
Пять. Постройте анимированную версию как появление в одну секунду с чистой фиксацией, затем добавьте бесшовную петлю для стартового экрана.
Шесть. Экспортируйте три формата плюс стоп-кадр и протестируйте анимацию без звука в каждом размере, в котором она реально появится.
Если хотите увидеть ту же последовательность, применённую к другой платформе, наш разбор <a href="/blog/youtube-animated-logo">анимированных логотипов для YouTube</a> подробнее охватывает широкоэкранный случай, а <a href="/blog/video-logo">то, чем видеологотип должен отличаться</a> охватывает лежащие в основе изменения дизайна, применимые к любому каналу.
Что чаще всего идёт не так
Пять повторяющихся провалов, все предотвратимые.
Знак нечитаем в чате. Аватары чата маленькие, а знак был спроектирован для страницы канала. Решите это, сначала сделав самую маленькую обрезку, как описано выше.
Оверлей исчезает на ярком игровом видео. Однотонный знак всегда исчезнет на чём-то. Используйте плашку или встройте контраст до того, как строить анимацию.
На стартовом экране виден шов петли. Зритель просиживает эту петлю десятки раз за сессию. Исправьте точку петли, а не длину.
Анимация работает только со звуком. Проверьте её без звука, потому что значительная доля ваших зрителей приходит именно так.
Баннер прекрасен во всю ширину и нечитаем как миниатюра. Сначала сделайте маленькую композицию, а широкую версию пусть следует за ней.
Частые вопросы
Куда идёт анимированный логотип на канале Twitch?
Стартовые экраны трансляций, переходы, оповещения и офлайн-баннер, если он поддерживает видео. Это поверхности, созданные для брендированного момента. Аватары, значки чата и угол оверлея почти всегда статичны, поэтому анимированную версию следует считать дополнением, а не заменой.
Какого размера должна быть анимация логотипа Twitch?
Экспортируйте 9:16 в 1080 на 1920 для вертикальных размещений и 16:9 для стартовых экранов и переходов, оба из одного источника, чтобы тайминг совпадал. Статичные аватар и баннер — отдельные экспорты со своими требованиями, и оба следует проверять в том размере, в котором они реально отображаются, а не во всю ширину.
Должна ли анимация логотипа иметь звук?
Спроектируйте её так, чтобы работала без звука. Зритель, попадающий на страницу канала, часто без звука, поэтому визуальная последовательность должна лечь сама по себе. Добавьте аудио как улучшение для зрителей, у которых звук есть, вместо того чтобы делать тайминг от него зависимым.
Как остановить исчезновение знака оверлея в стриме?
Либо дайте ему изолированную плашку за символом, либо встройте достаточно внутреннего контраста, чтобы один элемент оставался видимым на любом фоне. Однотонный знак поверх игрового видео исчезнет в какой-то момент сессии, и падающая тень этого не исправит.
Нужен ли каналу Twitch отдельный логотип от основного бренда?
Обычно не отдельный дизайн, а отдельный набор экспортов. Каналу нужен знак, переживающий круговой аватар, маленькую миниатюру каталога, угол оверлея и широкоэкранный стартовый экран. Один рисунок может служить всем четырём, если самый маленький спроектирован первым.
Главное
Откройте свой канал так, как открыл бы чужой: не в тот час, когда он офлайн, в окне браузера размером примерно с телефон. То, что вы видите, видят большинство людей. Если знак там читаем и баннер по-прежнему читается, когда он размером с миниатюру, у вас есть фундамент, а анимация — короткое, дешёвое дополнение поверх него. Если нет, никакое движение не спасёт знак, который уже проигрывает в том самом размере, в котором его показывают чаще всего.