---
name: prtv-design-mockups
description: Дизайн-приёмы с живыми информерами в конструкторе вывесок PRTV (prtv.pro) — штатная перспектива редактора (правый клик → «Включить режим работы с перспективой» → углы к углам рамки) и готовые мокапы — новости на рекламном щите на фоне города с датой и источником на панелях под щитом, экран в интерьере клиента с бликом стекла, газетная полоса из нескольких информеров, три экрана на фасадах с одной движущейся анимацией, матовая карточка поверх фото; общие правила — фон элементом «Изображение» на нижнем слое, информер без подложки с прозрачным фоном, один движущийся элемент в кадре, подсказки, читаемые с ТВ. Использовать, когда нужен эффектный демо-слайд, промо или презентация экрана клиенту, «экран в экране», информер на щите, в газете или поверх фото. Triggers (EN) signage mockup, billboard mockup, screen in interior mockup, perspective widget, newspaper layout widget, glass card over photo, PRTV design tricks.
license: CC-BY-4.0
metadata:
  author: PRTV (prtv.pro)
  product: Конструктор цифровых вывесок PRTV (prtv.pro)
  version: "1.0"
  date: "2026-10-10"
  language: ru
  scope: интерфейс редактора и конструкторов информеров; без вызовов внутреннего API
  related: prtv-informer-rss, prtv-informer-google, prtv-element-layout, prtv-widgets, prtv-slide-settings, signage-screen-design
---

# Мокапы и дизайн-приёмы с информерами PRTV

Живой информер сам по себе — карточка в прямоугольнике. Тот же информер, вписанный в рекламный щит на улице, в экран на стене кафе или в колонку газеты, превращается в демонстрацию: клиент видит не «виджет», а свой будущий экран в своей обстановке. Приёмы ниже собраны и проверены на обучающих слайд-шоу информеров PRTV RSS и PRTV Google (октябрь 2026) и делаются только штатными средствами редактора и конструкторов.

## 1. Общие правила

1. **Фон — элемент «Изображение» на весь слайд на нижнем слое**, а не поле «Фоновое изображение» слайда: так фон гарантированно грузится и виден на всех устройствах. Положение на нижнем слое — «Позиция → Под всеми» или кнопки «Глубина» (prtv-element-layout §2). Порядок слоёв проверять после всех правок содержимого.
2. **Фон — JPEG, 1920×1080, около 100–200 КБ** (качество ~85–90). PNG только там, где нужна прозрачность (блик стекла, затемнение). Фон в PNG на 2–3 МБ грузится на ТВ 10–15 секунд.
3. **Информер поверх картинки — без своей подложки:** в конструкторе «Тема → Без подложки» + **«Прозрачный фон вокруг карточек»**, в редакторе — альфа фона HTML-элемента 0. Цвет текста подбирать под фон, на фото включать «Тень под текстом».
4. **Не больше одного движущегося элемента в кадре.** Если на слайде несколько информеров, движется один (карусель с коротким «Время на новость»), у остальных «Время на новость» 120 с — за показ слайда (15–20 с) они не меняются. Глаз должен знать, куда смотреть.
5. **Подсказки и подписи читаются с ТВ:** подписи от 40 px, заголовки от 56–110 px в пространстве 1920×1080 (prtv-element-layout §7); мельчайший текст внутри мокапа (колонка газеты, панель под щитом) — не меньше ~24 px. Проверять в предпросмотре на весь экран, а не на холсте редактора.
6. **Пустая рамка до загрузки.** Информер появляется через несколько секунд после смены слайда. Рамку под ним на фоне рисовать «выключенным экраном» (тёмное стекло) или нейтральной поверхностью — тогда пауза выглядит естественно. Слайду давать не меньше 15–20 с.
7. **Фон рисовать без чужих брендов и узнаваемых реальных зданий**; фото — свои или со свободной лицензией.

## 2. Штатная перспектива редактора

Вписать информер в наклонную рамку (щит, экран на стене, фасад) — штатная функция редактора, CSS-обёртки в коде HTML не нужны.

1. Положить HTML-элемент с кодом информера примерно поверх рамки на фоне и растянуть его по размеру рамки (prtv-element-layout §1). Пропорция элемента ≈ пропорции рамки «в лоб» (щит 6×3 — 2:1, ТВ — 16:9).
2. Правый клик по элементу на холсте → **«Включить режим работы с перспективой»**.
3. Тянуть углы элемента по одному к четырём углам рамки на фоне. Перед этим увеличить масштаб холста — угол в несколько пикселей на экране легко промахнуть.
4. Проверить в предпросмотре слайд-шоу: углы информера совпадают с углами рамки, текст не размыт и читается. Крупный шрифт в конструкторе (64–96) — перспектива уменьшает дальний край.
5. Перспектива применяется ко всему элементу, включая содержимое iframe. В браузерах телевизоров её отображение отдельно не проверялось — на целевом ТВ смотреть обязательно.

Перспектива подходит и для обычных картинок (бликов, рамок). Не включать её случайно: пункт меню — тумблер (prtv-element-layout §4).

## 3. Мокапы

### 3.1. Новости на рекламном щите

- **Фон:** город (небо с градиентом, дымка, окна домов) и щит 6×3 на опоре, повёрнутый под небольшим углом; под щитом — две пустые светлые панели.
- **Информер:** PRTV RSS, тип **«Свободная компоновка»**, «Только новости с картинкой». На холсте конструктора: Фото — левая часть щита, Заголовок — правая, а блоки **Дата** и **Источник** опущены вниз, на место панелей под щитом. Тема «Без подложки», прозрачный фон, «Скругление» и «Отступ» 0, крупный шрифт (Oswald 96), «Время на новость» 8 с.
- **Вписывание:** один HTML-элемент на щит и панели, штатная перспектива по углам (§2). Дата и источник меняются вместе с новостью, потому что это один информер.

### 3.2. Экран в интерьере клиента

- **Фон:** стена заведения (кирпич, полка, лампа) и телевизор на стене под углом; экран телевизора на фоне — тёмное стекло.
- **Информер:** карусель с картинкой слева, тёмная тема, тематические ленты (кулинария для кафе, авто для автомойки), акцент в цвет интерьера.
- **Вписывание:** перспектива по углам экрана. **Блик стекла** — отдельный элемент «Изображение» с PNG (прозрачный диагональный блик) **слоем выше** информера, с той же перспективой или нарисованный уже в перспективе. Без блика экран выглядит наклейкой.
- Этот мокап удобно делать с фото настоящего зала клиента: «вот так будет у вас».

### 3.3. Газетная полоса из нескольких информеров

- **Фон:** лист газеты — шапка с названием, линейки колонок, рубрики, бумажная фактура; места колонок пустые, без текста-заглушки.
- **Информеры:** по HTML-элементу на каждую колонку, **у каждой колонки своя лента и своя рубрика** (культура, наука, кухня, афиша, путешествия); рубрика — через «Подпись на экране» у ленты или напечатана на фоне. Все — «Свободная компоновка», «Тема → Без подложки», прозрачный фон, тёмный текст (#1A1A1A), один газетный акцент (тёмно-красный), шрифт PT Sans.
- **Движение:** листается только главная статья («Время на новость» ~12 с), у колонок — 120 с, они за показ слайда не меняются.
- Колонки без картинок в ленте — только заголовок или заголовок с текстом; так газета выглядит естественнее.

### 3.4. Три экрана на фасадах

- **Фон:** вечерняя площадь, три медиаэкрана на фасадах под разными углами.
- **Информеры:** у каждого экрана свой HTML-элемент, своя ссылка и своя перспектива; содержание разное (спорт, наука, путешествия) и разный вид (фото фоном; только заголовки по центру; картинка сверху на светлой карточке).
- **Движение:** анимирован один экран (карусель 7 с), у двух других «Время на новость» 20 с и больше — в кадре ровно одна смена за раз.

### 3.5. Матовая карточка поверх фото

- **Фон:** спокойное фото (закат, озеро, интерьер) с уже нарисованной полупрозрачной матовой карточкой — размытие и светлая кромка делаются в картинке, а не в информере.
- **Информер:** лента или карусель **без подложки, с прозрачным фоном**, белый текст, тёплый акцент, «Тень под текстом», «Шапка над лентой» («Куда сходить и поехать»); ленты по теме фото (путешествия, афиша).
- HTML-элемент точно по карточке, без перспективы.

## 4. Порядок сборки

1. Нарисовать или подобрать фон 1920×1080 (JPEG), загрузить элементом «Изображение», растянуть на весь слайд, опустить вниз.
2. Собрать информер в конструкторе (prtv-informer-rss, prtv-informer-google), проверить на предпросмотре нужного размера.
3. HTML-элемент → код → альфа фона 0 → размер по рамке → перспектива (если нужна).
4. Слои выше информера (блик, рамка) — отдельными картинками.
5. Подписи и подсказки — нативным текстом в свободной части кадра (небо, стена), не на главном объекте.
6. Показ слайда 20 с, переход «Затухание»; предпросмотр на весь экран; проверка на ТВ.

## Чего не делать

- Не класть фон в поле «Фоновое изображение» слайда, когда сверху мокап, — фон элементом.
- Не оставлять у информера подложку на фоне-картинке: белая карточка на щите или в газете разрушает иллюзию.
- Не запускать две карусели в одном кадре.
- Не писать подсказки мельче 24 px и не класть их поверх главного объекта.
- Не собирать перспективу CSS-трансформациями в коде HTML-блока, когда есть штатный режим.
- Не обещать, что перспектива на любом ТВ выглядит как в предпросмотре, — проверять на целевом устройстве.

## Связанные скиллы

prtv-informer-rss · prtv-informer-google · prtv-element-layout · prtv-widgets · prtv-slide-settings · signage-screen-design