ТЗ на видеобаннер
Баннер истории Octopussy: безопасная зона Telegram
Холст остаётся 1080×1920. Меняется только расположение блоков внутри: сейчас заголовок и главный оффер попадают под интерфейс Telegram и не видны.
Что не так сейчас
Telegram рисует поверх истории свои элементы: сверху — полосу прогресса, аватар, имя и время; снизу — поле ответа, кнопку пересылки и реакции. На высоких экранах вдобавок подрезаются края.
Всё содержимое баннера сейчас занимает по вертикали 1521 px — от 197 до 1718. Видимая зона — только 1330 px. Разница и уходит под интерфейс.
| Блок | Сейчас, y | Видно? |
|---|---|---|
| Заголовок «Octopussy VPS» | 197 – 253 | под полосой прогресса |
| Подзаголовок, 2 строки | 290 – 332 | видно |
| Плашка про доступ | 434 – 471 | видно |
| Осьминог со щитом | 786 – 1227 | видно |
| «Поделись и получи» | 1378 – 1523 | видно |
| «3 месяца бесплатного доступа» | 1525 – 1718 | под полем ответа |
Границы, в которые нужно уложиться
- 1080×1920холст, 9:16 — не меняется
- 250 pxперекрыто сверху
- 340 pxперекрыто снизу
- 250 – 1580безопасная зона по y
- 290 – 1540рабочая зона с запасом
Безопасная зона — 1330 px высоты. Рекомендую работать в пределах 290–1540 (1250 px): запас по 40 px сверху и снизу закрывает разброс между клиентами и экранами разной вытянутости.
По горизонтали Telegram перекрывает только правый нижний угол — там реакции. Тексту достаточно полей 96 px от края холста; фон при этом идёт во весь кадр, без полей.
Предлагаемая раскладка
Размеры самих блоков почти не меняются — проблема не в них, а в том, что стопка смещена вверх и вниз за границы. Достаточно поджать промежутки и отцентрировать её в рабочей зоне.
| Блок | Стало, y | Высота | Отступ сверху |
|---|---|---|---|
| Заголовок «Octopussy VPS» | 300 – 372 | 72 | — |
| Подзаголовок, 2 строки | 396 – 462 | 66 | 24 |
| Плашка про доступ | 500 – 640 | 140 | 38 |
| Осьминог со щитом | 680 – 1140 | 460 | 40 |
| «Поделись и получи» + «3 месяца» | 1180 – 1520 | 340 | 40 |
Высота блока заголовка растёт с 57 до 72 px — в рабочей зоне есть место, а сейчас он мельче, чем позволяет формат. 57 px — это измеренная высота строки, не кегль шрифта.
Фон — во весь кадр, без рамки
Сейчас содержимое лежит «карточкой» внутри кадра: поля 136 px по бокам, 16 px сверху и 88 px снизу, а вокруг — размытая копия той же картинки. Эту рамку и подложку нужно убрать полностью.
Фон занимает весь холст 1080×1920 — без видимых границ, без второго слоя. Содержимое ложится прямо на него, в пределах безопасной зоны.
Карточка отнимает 272 px ширины, но часть уходит обратно на поля текста: чистый выигрыш — 80 px, поле контента растёт с 808 до 888 px.
По высоте выигрыша нет. Кромки карточки лежат на y = 16 и y = 1831, то есть за пределами видимой зоны — их и так никто не видит. Убираем их ради цельного кадра, а не ради места.
Требования к файлу
| Разрешение | 1080 × 1920 |
| Кодек, цвет | H.264, yuv420p |
| Частота кадров | 30 fps |
| Длительность | 8 сек, зацикленно |
| Звук | без звука |
| Вес | до 1 МБ |
| Постер | JPEG 1080 × 1920, первый кадр видео |
Проверка перед сдачей
- Ни один текст и ни одна значимая деталь не пересекает линии y = 250 и y = 1580.
- Оффер «3 месяца бесплатного доступа» полностью выше y = 1540 — это главное сообщение баннера.
- Заголовок полностью ниже y = 290.
- Правый нижний угол свободен от текста — там Telegram рисует реакции.
- Ни рамки, ни размытой подложки: фон идёт от края до края холста.
- Постер совпадает с первым кадром видео пиксель в пиксель.
- Проверено на реальной публикации в историю: на телефоне с вытянутым экраном (20:9) и на обычном (16:9).