Предпросмотр безопасной зоны Reels и TikTok: Кадрирование 9:16, наложения интерфейса и чистый экспорт
Вертикальные короткие видео и истории в Instagram Reels, Stories и TikTok используют стандартное соотношение сторон 9:16 (как правило, 1080×1920 пикселей). Однако мобильные приложения накладывают поверх видео заметные элементы интерфейса: аватар профиля, кнопку подписки, кнопки реакций (лайки, комментарии, репосты), текст описания, название аудиодорожки и системную строку состояния. Ключевой текст, призывы к действию (CTA) или логотипы, размещенные слишком близко к краям экрана, могут быть полностью перекрыты. Инструмент Предпросмотр безопасной зоны Reels и TikTok выполняет геометрическую валидацию на стороне клиента, гарантируя читаемость важной информации как в органической ленте, так и в платной рекламе.
Практический сценарий использования: Контент-мейкер готовит промо-видео 1080×1920 с субтитрами в нижней трети экрана. При загрузке в инструмент движок рассчитывает пересечения ограничивающих рамок в соответствии с официальными требованиями Meta (14% сверху, 35% снизу и 6% по бокам должны быть свободны от критического текста) и спецификациями TikTok In-Feed. Если логотип расположен на позиции Y=1650px, система мгновенно сигнализирует о конфликте с блоком описания и аудиотреком. Переключаясь между режимами «Вписать» (Letterbox) и «Заполнить» (Crop) или настраивая вертикальное смещение, автор легко возвращает элементы в безопасную зону перед публикацией.
Весь рендеринг медиа, перемотка видео, извлечение кадров и экспорт изображений осуществляются на 100% локально в памяти браузера с использованием HTML5 Canvas и HTMLVideoElement API. Ваши исходные файлы никогда не отправляются на серверы GoToolstack или сторонние ресурсы. Готовый файл экспортируется чистым, без рамок смартфонов, сеток и водяных знаков.
Архитектура и математическая формула
Safe Box = [X: W × m_left, Y: H × m_top, W_safe: W × (1 - m_left - m_right), H_safe: H × (1 - m_top - m_bottom)]
Проверка пересечений выровненных по осям ограничивающих рамок (AABB) относительно нормализованных координат макета 1080×1920.
Лучшие практики и ключевые рекомендации
- Размещайте субтитры выше нижней границы действий: Располагайте субтитры и CTA-текст в диапазоне от Y=650px до Y=1350px, чтобы их не перекрывали описание, кнопки взаимодействия и рекламные плашки.
- Учитывайте правую панель взаимодействия: В TikTok и Reels кнопки лайков и комментариев занимают 120–140 пикселей справа; избегайте выравнивания логотипов по правому краю в этой полосе (в арабском интерфейсе RTL эта панель переносится влево).
- Различайте обычные посты и платную рекламу: В рекламных форматах внизу закреплена широкая кнопка перехода; обязательно проверяйте оба шаблона при запуске кампаний.
- Экспортируйте чистые файлы без наложенных рамок: Убедитесь, что загружаемый файл содержит только откалиброванное изображение без лишней графики, сохраняя исходную четкость пикселей.