Twitch-канал помещает один знак в четыре места сразу, и три из них меньше превью. Это профильная картинка в круговой обрезке, знак в чате рядом с каждым сообщением, угол оверлея стрима и офлайн-экран, заполняющий плеер, когда стрим не в эфире. Спроектируйте самое большое первым — и самое маленькое провалится.
Это руководство по созданию анимированного логотипа Twitch, который переживает все четыре, — плюс правила платформы, решающие, что вам разрешено класть на экран, когда два логотипа делят кадр.
Четыре размещения, четыре разных рисунка
Инстинкт — нарисовать один логотип и изменить его размер. Это работает для словесного знака в слайд-деке и проваливается везде ещё, потому что четыре размещения на канале требуют по-настоящему разных рисунков. Аватар — круг, обрезающий всё у углов. Знак в чате — квадрат, отрисованный в несколько пикселей высотой. Оверлей сидит поверх движущегося видео с дикими перепадами яркости. Офлайн-экран — полный холст 16:9, который обычно первым видит новый посетитель.
Относитесь к ним как к одной идентичности, выраженной четырьмя способами, а не как к одному файлу, сброшенному четыре раза. Монограмма несёт аватар и знак чата; полный локап с названием канала принадлежит офлайн-экрану и баннеру; оверлей-версия — упрощённый знак плюс тот контур или плашка, что нужны для выживания в геймплее. Один бренд, четыре уровня детали.
Сначала проектируйте самый маленький экземпляр
Самое маленькое размещение задаёт ограничения для всего остального. Нарисуйте его первым — и остальная система вытекает из него. Нарисуйте его последним — и придётся перерисовывать.
Почему аватар — самый трудный слот
Twitch показывает профильную картинку в круговой обрезке и переиспользует её в размерах намного меньше загрузки. Отраслевые гайды по размерам ставят рекомендованную загрузку 256 на 256 пикселей и выше, но те же гайды указывают на важное: знак также появляется крошечным в чате и в каталогах каналов, поэтому он должен читаться задолго до того, как станет большим. Дизайн, работающий только в 256 пикселях, — дизайн, исчезающий в двух местах, где его видят чаще всего.
Тест на монограмму
Сведите название канала к сильнейшим двум-трём буквам и посмотрите, читаются ли они в минимальном размере, который можете смоделировать. Если нет, никакая работа над полным названием не исправит аватар. Три буквы — уже у предела читаемости внутри круга; пять — серый брусок. Стримеры, чьё имя не сводится естественно, должны выбрать две сильнейшие буквы, а не сжимать всё слово.
Толщина штриха в малых размерах
Тонкие линии — самая частая причина, по которой знак исчезает. Однопиксельный штрих в мастере 2000 пикселей становится долей пикселя в отрисовке чата и просто сереет. Задайте минимальную толщину штриха в мастере — достаточно тяжёлую, чтобы пережить самый маленький экспорт, — и примите, что большая версия будет чуть жирнее, чем вы представляли. Жирное читается; изящное исчезает.
Та же логика относится к внутренней детали. Тонкая штриховка, узкие контрфорсы и малые зазоры между штрихами заполняются, когда знак уменьшается. Постройте версию аватара как осознанное упрощение — меньше форм, шире зазоры, выше контраст, — а не как уменьшенную копию детального рисунка.
Офлайн-экран — самый просматриваемый ассет
Вот контринтуитивная часть брендинга канала: офлайн-экран обычно получает больше просмотров, чем стрим. Новые посетители попадают на канал в любой час дня, и большинство этих приходов — когда никто не в эфире. Графика офлайн-экрана 1920 на 1080 заполняет плеер в этот момент, что делает её единственным изображением с наивысшим рычагом на канале.
Опубликованные гайды по размерам Twitch трактуют офлайн-экран как стандартный 16:9 HD — 1920 на 1080, точно совпадающий с плеером, с рекомендованным минимумом 1280 на 720 и анимированной опцией, принимающей GIF в рамках лимита размера файла. Справочник размеров изображений Twitch от StreamScheme — полезный рабочий чек-лист для всего набора арта канала, включая ширину панели 320 пикселей, которую большинство стримеров делают неверно при первой загрузке.
На что должен отвечать офлайн-карточка
Три вопроса, в этом порядке: что это за канал, когда в следующий раз в эфире и где ещё его найти. Анимированный логотип Twitch сидит в первом ответе — это подтверждение идентичности, говорящее посетителю, что он попал туда. Всё остальное — текст, и текст должен оставаться достаточно крупным, чтобы читаться на телефоне, — именно там большинство офлайн-экранов тихо разваливаются.
Безопасная для цикла анимация
Если офлайн-экран анимирован, шов цикла становится виден примерно через десять секунд просмотра — примерно столько посетитель решает, подписываться ли. Анимированный логотип Twitch, построенный для офлайн-карточки, должен большую часть времени стоять неподвижно — медленная пульсация, тонкое свечение, одно движение в такт каждые несколько секунд — и возвращаться ровно в тот кадр, с которого начался. Постоянное движение на странице, которую никто не смотрит, читается как зависшее видео, а зависшие видео закрывают.
Оверлей и алерты: движение, переживающее геймплей
Оверлей — самое трудное техническое размещение, потому что знак сидит поверх видео, меняющего яркость, цвет и деталь несколько раз в секунду. Логотип, чёткий поверх цветного образца, может полностью исчезнуть поверх яркого неба или загруженного взрыва.
Контур и плашка
Две правки, применённые по порядку. Сначала контрастный контур шириной два-три пикселя, отделяющий знак от того, что за ним, не меняя его цвет. Затем мягкая плашка — скруглённый прямоугольник 40–60 процентов прозрачности — для загруженных сцен, где одного контура недостаточно. Обе — настройки оверлея, а не изменения рисунка, что значит: один анимированный файл может нести их во все сцены вместо перекрашенной версии на каждую игру.
Одно движение, а не три
Штамп — знак приходит слегка увеличенным и хлопается в такт — движение, несущее категорию, потому что читается в любом размере и естественно парится с падением, следующим за алертом. Наложение тряски, цветового расщепления и вспышки на один такт — частая ошибка: три эффекта, приземляющиеся вместе, взаимно уничтожаются, и знак перестаёт читаться в тот самый момент, когда должен зарегистрироваться. Одно сильное движение бьёт сильнее трёх конкурирующих.
Правила платформы, когда два знака делят кадр
Анимированный логотип Twitch редко появляется один. Он сидит на офлайн-экране с интерфейсом платформы, в превью клипа с ключевой графикой игры и рядом со знаками Discord или YouTube на панели. У каждого свои правила, и самая безопасная отправная точка — собственная страница ассетов платформы, а не копия третьей стороны: страница фирменных ассетов Twitch — канонический источник знаков платформы, и она говорит об этом же в своей первой строке, благодаря посетителей за нахождение правильных ассетов вместо скачивания фан-арта.
Та же дисциплина относится к другим платформам, куда выкладывает стример. Руководство Google по брендингу каналов для YouTube необычайно конкретно насчёт того, что должен терпеть баннер: минимальная загрузка 2048 на 1152 пикселей, безопасная зона 1235 на 338 пикселей, внутри которой текст и логотипы гарантированно остаются видимыми, рекомендованные 2560 на 1440 для телевизора и указание не добавлять декоративные тени, рамки или фреймы. Как отмечает документация Google по брендингу каналов, один и тот же баннер показывают на компьютерах, мобильных устройствах и телевизорах, но обрезают по-разному на каждом, — и именно в этом весь довод держать знак внутри безопасной зоны, а не центрировать под один экран.
Discord — третий знак, который обычно оказывается в одном изображении. Бренд-гайдлайны Discord устанавливают собственные правила использования знака, а практический вывод для стримера тот же, что везде: держите знак платформы неизменённым, давайте ему чистое пространство и никогда не вписывайте его в свой локап так, будто он — один из ваших элементов.
Сборка за один день
Порядок сборки важнее инструментов. Начните с монограммы в минимальном размере, который можете смоделировать, и добейтесь её чтения. Масштабируйте её в аватар. Добавьте название канала, чтобы получить офлайн-локап, затем постройте оверлей-вариант из упрощённого рисунка с применённым контуром. Только затем анимируйте — и анимируйте упрощённую версию: движение усиливает то, чем знак уже является, поэтому загромождённый рисунок становится движущейся размазней, а чистый — движущейся идентичностью.
Сама анимация — короткая работа, когда рисунки готовы. Загрузите прозрачный SVG или PNG, выберите фоновые кадры, выберите трек — и пусть инструмент нарежет движение по меткам бита, затем экспортируйте 9:16 для клипов и Shorts и 16:9 для офлайн-экрана и трейлера канала из одного источника. Заставка вокруг читаемого первого кадра делает этот экспорт пригодным и как статичное превью, а редактор в браузере прогоняет весь проход без таймлайна для изучения. Если знак рисуется с нуля, а не анимируется, правила дизайна игровых знаков охватывают решения по рисунку, предшествующие этому шагу.
Часто задаваемые вопросы
Какого размера должен быть анимированный логотип Twitch?
Стройте его из векторного мастера, чтобы размер перестал быть решением. На практике вам нужен квадрат, переживающий круговую обрезку аватара, упрощённая версия, остающаяся читаемой в чате, и композиция 1920 на 1080 для офлайн-экрана. Аватар — ограничение, которое важно: если знак не читается в минимальном размере, в котором рендерит платформа, никакой бóльший экспорт не спасёт его.
Можно ли анимировать мою профильную картинку Twitch?
Профильная картинка Twitch — статичное изображение, поэтому анимированная версия принадлежит размещениям, принимающим видео или GIF: офлайн-экран, алерты, оверлеи и трейлер канала. Относитесь к аватару как к стоп-кадру вашей анимации: если этот кадр читается как законченная композиция, анимированная версия тоже, и требование статики перестаёт быть компромиссом.
Стоит ли анимировать офлайн-экран?
Тонкий цикл помогает, загруженный — вредит. Офлайн-карточка часто — первое впечатление посетителя, и её обычно смотрят на втором мониторе или телефоне, пока происходит что-то ещё. Медленное, редкое движение возвращает взгляд к названию канала и расписанию. Постоянное движение конкурирует с текстом и читается как видео, не загрузившееся.
Как держать логотип читаемым поверх геймплея?
Сначала примените контрастный контур шириной два-три пикселя, затем добавьте мягкую плашку 40–60 процентов прозрачности, если сцена всё ещё слишком загружена. Обе — настройки уровня оверлея, поэтому один файл покрывает каждую игру, а не один файл на сцену. Если знак всё ещё спотыкается, проблема обычно в рисунке, а не в обработке — упростите его и попробуйте снова.
Могу ли я использовать свой анимированный логотип Twitch на других платформах?
Да, и должны, с одной поправкой: уважайте безопасные зоны каждой платформы. Руководство YouTube по баннерам — самый ясный пример: оно гарантирует текст и логотипы только внутри области 1235 на 338 пикселей загрузки 2048 на 1152. Знак, центрированный под офлайн-экран Twitch, будет обрезан на телевизоре, поэтому экспортируйте под каждое размещение, а не переиспользуйте один файл везде.
Главное
Стройте анимированный логотип Twitch назад от самого маленького размещения, которое он когда-либо займёт. Добейтесь чтения монограммы в размере чата, упрощайте рисунок, пока тонкие штрихи не выживут, дайте оверлею контур, чтобы он работал поверх любой игры, и сделайте офлайн-цикл возвращающимся в первый кадр. Затем анимируйте упрощённую версию, а не детальную, потому что версия, читаемая в 32 пикселя, — это версия, читаемая в 1080. Всё остальное — изменение размера.