Аватар канала на YouTube отображается в 98 на 98 пикселей. Это меньше, чем большинство людей предполагают, когда экспортируют мастер в 4000 пикселей и считают дело сделанным. Рядом с ним баннер канала тянется на 2560 пикселей в ширину и показывает лишь часть себя на телевизоре. А в конце каждого видео тот же знак должен сидеть рядом с двумя миниатюрами конкурентов, не теряя читаемости.
Значит, анимация логотипа YouTube — это не один ресурс. Это один знак, нарисованный один раз и адаптированный к трём рамкам, почти не имеющим общей геометрии, — а затем анимированный один раз для всех трёх. Перепутаете порядок, и знак придётся перерисовывать трижды. Сделаете правильно, и всё уложится в один день. Если вы раньше не анимировали знак, начните с основ анимации логотипа.
Три рамки, которые должна заполнить анимация логотипа YouTube
Помогает относиться к каждому размещению как к ограничению дизайна, а не к изменению размера. У трёх нет ничего общего, кроме самого знака.
Аватар квадратный, отображается внутри круговой обрезки и крошечный. Всё, что вне вписанного круга этого квадрата, обрезается, поэтому знак должен сидеть внутри круга по замыслу — а не быть прямоугольником, у которого просто есть свободное место вокруг.
Баннер широкий и большей частью невидим. YouTube показывает безопасную зону 1235 на 338 пикселей внутри загрузки 2048 на 1152 пикселя, а телевизор обрезает ещё сильнее. Всё, что вне этой центральной полосы, — украшение для зрителей одного конкретного размера экрана, что приятный бонус, но никогда не основа дизайна.
Конечный экран — тот, который вовлекает других людей. Ваш знак появляется как маленький круглый элемент рядом с карточками видео и кнопкой подписки, поверх кадров, которые вы не контролируете. Он должен читаться и на ярком лице говорящего, и на тёмной сцене боя в одной и той же сессии.
Сначала спроектируйте аватар 98 пикселей
Начните с самого маленького размера и двигайтесь вверх. Не наоборот и не как проверку в конце.
Логика проста. Переход от большого к малому теряет детали: вы рисуете словесный знак, прекрасно читаемый в масштабе баннера, а затем обнаруживаете в размере аватара, что буквы слились в серую размазню, и теперь приходится перерисовывать. Переход от малого к большому ничего не теряет, потому что знак, читаемый в 98 пикселей, читается в любом большем размере. Маленькая версия — это ограничение; всё большее — пространство, которое вам не понадобилось.
Практически это значит проектировать аватар как самостоятельный символ, пока вы над ним работаете, а затем добавлять словесный знак для баннера и конечного экрана. Это разделение — та же логика, что и при создании GIF-логотипа или любого малоформатного ресурса вокруг монограммы: версия, переживающая самую жёсткую обрезку, — та, которую стоит анимировать.
Выберите знак, который работает в круге
Две формы неизменно проваливаются в круговой обрезке. Всё, у чего важный контент в углах ограничивающего прямоугольника, — словесный знак, выровненный влево-вправо, компоновка с символом рядом с именем, — теряет концы имени. И всё, построенное как широкий прямоугольник с внутренними интервалами, рассчитанными на эту ширину, будет выглядеть не по центру, когда круг врежется в него.
Исправление — проектируйте так, будто рамка уже круг. Держите знак внутри круга, вписанного в квадрат, оставьте поле примерно восемь-десять процентов диаметра с каждой стороны, и если у бренда есть словесный знак, считайте его отдельным ресурсом для широких размещений, а не тем, что должно появляться в размере аватара. Монограмма плюс необязательный словесный знак — структура, переживающая все три рамки.
Проверяйте знак в реальном размере, а не в приближении
Проектируйте в 4000 пикселей, оценивайте в 98. Экспортируйте знак в его реальном размере отображения, положите на телефон на вытянутой руке и посмотрите на него меньше чем за секунду. Тонкие штрихи исчезают, негативное пространство сжимается, а любой градиент превращается в плоский средний тон. То, что переживёт этот тест, — тот рисунок, который вы анимируете.
Неприятная часть в том, что тест обычно убивает самую интересную версию знака. Это не причина его пропускать. Каждый канал, использующий детальную иллюстрацию как аватар, в итоге заменяет её, и заменяет чем-то близким к тому, что этот тест произвёл бы изначально.
Движение тоже должно читаться в размере аватара
Та же логика применима к анимации, и именно здесь проваливается большинство логотипов каналов. Появление, построенное из сдвига, масштабирования и вращения, читается неплохо в 1080 пикселей и становится нечитаемой кашей в 98, потому что это всё движения позиции и размера, а в малом масштабе глаз не может их проследить.
Что переживает малый размер — это изменение формы и прозрачности: вытирание, прорисовка, затухание между двумя состояниями одного силуэта. Они читаются как смена состояния, а не как движение, и регистрируются мгновенно даже в элементе размером с миниатюру.
Механика за этим задокументирована в модели CSS-анимаций, которая разделяет анимируемые свойства на те, что можно плавно интерполировать, и те, что нельзя: w3.org — спецификация CSS-анимаций. Opacity и transform интерполируются чисто и дёшево; всё, что заставляет полностью пересчитывать раскладку посреди анимации, и тяжелее для рендера, и труднее для чтения в малых размерах. Тот же принцип работает, будь анимация запущена в браузере или отрендерена в видео.
Ещё два ограничения идут от платформы. Во-первых, анимация должна приземлиться и удержаться — на аватар смотрят мельком, поэтому знак должен находиться в финальном состоянии большую часть времени. Во-вторых, точка цикла должна возвращаться к первому кадру, если ресурс будет использоваться как движущаяся миниатюра или во вступлении, потому что движущийся знак, сбрасывающийся заметным скачком, выглядит сломанным.
Анимированные конечные экраны и заставки
Два места, где анимированный знак канала оправдывает себя помимо аватара.
Первое — короткая заставка канала: одна-три секунды, знак появляется, удерживается, уходит. Держите её меньше трёх секунд, потому что каждая секунда заставки — это секунда удержания зрителя, потраченная до начала контента. Более плотная версия этого формата — анимация заставки логотипа, где первый кадр спроектирован как самодостаточный.
Второе — конечный экран. Собственная документация YouTube по брендингу канала просит создателей не добавлять тени, рамки или обводки к элементам, появляющимся рядом с другими карточками канала, потому что платформа уже применяет свой собственный стиль, а наложенные эффекты делают раскладку шумной. Анимированный знак на конечном экране поэтому должен быть с чистым краем и самодостаточным, без свечения или обводки для акцента.
Оба размещения делят с аватаром правило: начинайте с логотипа в его финальном состоянии. Собственное руководство YouTube — загружать аватар минимум 98 на 98 пикселей, который будет отображаться кругом, и держать сообщение баннера внутри безопасной зоны 1235 на 338 — остальную часть загрузки 2048 на 1152 часто обрезают полностью: support.google.com/youtube/answer/10456525. Как отмечает эта документация, баннер, спроектированный на всю ширину загрузки, будет выглядеть по центру на компьютере и потеряет обе половины на телевизоре.
Одна анимация, три экспорта
Постройте анимацию один раз под обрезку аватара, затем экспортируйте её в каждом соотношении, которое нужно каналу. Тайминг, сглаживание и удержание остаются идентичными; меняется только кадр вокруг знака.
Краткий список: квадратный экспорт в размерах аватара и миниатюры для статичного и анимированного ресурса профиля, горизонтальный экспорт для области баннера канала и любого использования на сайте или в прессе, и экспорт 16:9 для заставки и конечного экрана. Если канал также публикует вертикальные Shorts, добавьте сокращение 9:16 — тот же исходный файл, то же совмещение с битом.
Битрейт экспорта здесь важнее, чем на обычном видео, потому что высококонтрастный знак на плоском фоне — это где артефакты сжатия появляются первыми. H.264 с High-профилем, интервал ключевых кадров около двух секунд и скорость потока выше того, что платформа рекомендует для обычного видео, не дадут тонким штрихам звенеть.
В том же окне скрыто второе решение экспорта. Знак на плоском фоне необычайно чувствителен к ошибкам цветового пространства, и стоит подтвердить, что контейнер несёт ожидаемые значения, а не полагаться, что по умолчанию всё верно, — разница проявляется как фирменный цвет, который слегка смещается на чужом экране. Проверка того, как формат обрабатывает метаданные, — часть работы, а не дело второго плана: developer.mozilla.org — справка по обработке форматов.
Где ещё появляется знак
Знак канала живёт не только в трёх официальных рамках. Он появляется в местах, для которых YouTube не даёт вам спецификации, и именно там анимированная версия делает больше всего работы.
Миниатюры — очевидный случай. Маленький знак в углу миниатюры — это опознавательный сигнал, и лучше всего он работает, когда идентичен на каждом видео: та же позиция, тот же размер, та же обработка. Как только угловой знак начинает перемещаться между загрузками, узнаваемость рушится и он становится украшением.
Shorts — второй случай. Вертикальное сокращение того же знака работает как конечная карточка для Short, и кадр 9:16 — это где видео с логотипом, собранное из одного исходного файла, оправдывает себя: тайминг переносится без изменений, отличается только кадр вокруг знака.
Третий — полностью за пределами платформы. Тот же анимированный знак попадает в подпись электронной почты, пресс-кит, сервер Discord и спонсорскую подборку. Всё это — причины держать исходный файл в одном месте, а не пересобирать движение каждый раз, когда кто-то просит версию.
Сравнение, которое стоит держать в уме
Три размещения отличаются не только размерами, и полезно иметь различия перечисленными в одном месте до начала экспорта.
Аватар — квадратный, отображается в круге, примерно 98 пикселей на экране, оценивается меньше чем за секунду, лучше всего строится как самостоятельный символ с сплошным или просто контрастным фоном.
Баннер — широкий, фактически 1235 на 338 для всего, что должно оставаться видимым, загружается в 2048 на 1152, читается на компьютере и телевизоре в разных обрезках, лучше всего строится со знаком на одной стороне и сообщением внутри безопасной полосы.
Конечный экран — маленький, круглый, размещён поверх неконтролируемых кадров, конкурирует с видеокарточками и кнопкой подписки, лучше всего строится как знак с чистым краем без добавленной обводки или тени и коротким удержанием, а не длинной анимацией.
Один знак, один язык движения, три набора чисел. Запишите числа рядом с файлами экспорта, чтобы следующий, кто возьмётся за канал, не пересобирал знак по памяти и не сошёл с бита на два кадра.
FAQ
Какого размера должен быть логотип YouTube-канала?
Загружайте минимум 98 на 98 пикселей, а если есть — и больше: собственное руководство платформы — минимум 98 пикселей для аватара, который отображается в круговой обрезке. Проектируйте в 4000 пикселей, но оценивайте в 98 и держите всё важное внутри вписанного круга квадрата.
Можно ли анимировать логотип YouTube-канала?
Сам аватар — это статичное изображение, но тот же знак можно анимировать для заставок, конечных экранов, движущихся миниатюр и каждого размещения за пределами платформы. Постройте одну анимацию под обрезку аватара и экспортируйте её в нужных соотношениях, чтобы тайминг оставался идентичным, где бы знак ни появился.
Почему мой логотип выглядит размытым как аватар канала?
Почти всегда — тонкие штрихи и мелкая деталь. В 98 пикселей однопиксельный штрих либо исчезает, либо мерцает, и обычно мерцает. Упрощайте рисунок, пока он не держится в самом маленьком размере, увеличьте контраст между знаком и фоном и анимируйте упрощённую версию, а не детальную.
Стоит ли помещать название канала в логотип?
Относитесь к имени как к отдельному ресурсу. Словесный знак не прочитается в размере аватара — буквы сливаются в серую размазню, — поэтому используйте монограмму как основной знак и добавляйте словесный знак только в баннере, заставке и конечном экране, где есть ширина, чтобы на неё потратиться.
Какой длины должна быть анимация заставки канала?
Одна-три секунды, и ближе к одной для каналов, публикующихся еженедельно. Знак появляется быстро, удерживается в такт и уходит, прежде чем внимание зрителя придётся зарабатывать снова. Всё длиннее меняет удержание на логотип, что плохая сделка в каждом видео, которое вы когда-либо опубликуете.
Главное
Проектируйте в 4000 пикселей и решайте в 98. Одна эта привычка — строить знак под обрезку аватара до баннера и анимировать изменения формы вместо больших перемещений позиции — и производит анимацию логотипа YouTube, работающую во всех трёх размещениях без второй перерисовки. Аватар канала — единственная версия, которую большинство зрителей когда-либо увидит в полном размере; всё остальное — контекст вокруг неё. Вы можете проверить обрезку малого размера на своём знаке в браузерном редакторе до того, как привяжетесь к анимации.