--- name: "cp-cover" description: "Делает обложки и превью — превью YouTube 1280×720, обложку карусели и поста, обложку PDF-лид-магнита. Проверяет читаемость на ширине 320 px, держит текст вне зоны таймкода и честно предупреждает, где превью почти ничего не решает и тратить на него время не стоит. Use when the user needs a thumbnail, a cover image, a preview or a title card. Триггеры — «обложка», «превью для ютуба», «тамбнейл», «первый кадр», «титульная картинка», «обложка pdf», «обложка канала», «превью не кликают»." --- Перед применением прочитай [правила интеграции «Блог с нуля»](../../context/10-blog-runtime.md). Они задают единый запуск, текущий проект и производственные ограничения; не начинай второй независимый бриф. # cp-cover · Обложки и превью Три разные задачи с одной механикой: одна картинка должна за полсекунды на маленьком экране сказать, что внутри. ## Когда не этот скилл - Нужна последовательность слайдов, а не одна картинка → `cp-carousel`. - Обложка придумана, нужно получить PNG → `cp-carousel-render`. - Нет палитры и шрифтов → сначала `cp-design-system`. - Нужен фон генерацией → `cp-image-prompt`, текст всё равно вёрсткой. ## Контекст Читай из `context/`: `06-design.md` (§2 читаемость, §6 размеры и правила превью, §7 тема), `01-platforms.md` (сетка профиля, обложка поста, механика второго шанса), `04-hooks.md` (обложка — тот же хук, только глазами). Профиль бренда — `brands//`: `assets.md` (тема), `brand.md`, `offer.md`. Не нашлось — скажи одной строкой и работай по врезке ниже, факты спрашивай, не выдумывай. --- ## Врезка констант **Размеры.** | Что | Размер | Соотношение | |---|---|---| | Превью YouTube | 1280×720 | 16:9 | | Обложка поста и карусели Instagram | 1080×1350 | 4:5 | | Слайд под сетку профиля | важное в центральных ~1012×1350 | 3:4 | | Квадрат ВК, универсальный | 1080×1080 | 1:1 | | Обложка PDF, A4 при 150 dpi | 1240×1754 | — | **Правила читаемости превью (уровень C, ремесленный свод):** - проверять на ширине **320 px** — это мобильная выдача, там принимается решение; - **3–5 слов**, больше не читается; - **лицо занимает 30–50% кадра**, если лицо вообще есть; лица может не быть; - **два цвета плюс акцент**, не больше; - **текст не заходит в правый нижний угол** — там таймкод. **Оговорка, которую надо сказать вслух.** Для Shorts и вертикальных роликов превью почти не имеет значения: подавляющее большинство просмотров приходит из ленты, где превью не показывается. Формулировка практика, опубликованная в официальном блоге YouTube, звучит жёстче: «99,9% просмотров приходят из ленты Shorts» (уровень C, формулировка практика в блоге платформы, дата публикации не установлена). Практический вывод: **на превью для Shorts время не тратится** — работает первый кадр и первая секунда, это `cp-hook` и `cp-script-short`. Превью для Short имеет смысл ровно в одном случае: ролик будет виден на вкладке видео канала и в поиске, и там нужна опрятная сетка. **Обложка карусели — это два слайда, а не один.** Платформа часто даёт карусели второй шанс и автоматически показывает второй элемент тем, кто не свайпнул (уровень A, заявление главы платформы, октябрь 2024). Значит, обложек две: слайд 1 и слайд 2, каждая самостоятельная. Подробнее — `cp-carousel`. **Сетка профиля Instagram — 3:4** по данным, которые расходятся между источниками (уровень C): держать важное в центральных ~1012×1350, тогда работают обе версии сетки. Превью в профиле правится после публикации: «···» → Adjust Preview. **Контраст** текста к фону: 4,5:1, для крупного 3:1. На превью текст почти всегда крупный, но фон — фотография, и контраст там неравномерный: под текстом нужна подложка, затемнение или плашка. --- ## Вход 1. **Что за обложка:** превью YouTube, обложка карусели или поста, обложка PDF, обложка канала или сообщества. 2. **Название материала** и одна мысль, ради которой его открывают. 3. **Есть ли фото** — своё, с человеком, кадр процесса, скриншот. 4. **Формат ролика**, если это YouTube: длинный или Short. Short — предупреди про бессмысленность превью и переходи к первому кадру. 5. **Тема бренда** — slug или «нет». --- ## Процесс 1. **Отсеки лишнее.** Short → скажи, что превью не решает, и предложи вместо этого поработать над первым кадром. 2. **Сформулируй обещание** одной фразой: что человек получит, открыв. Это не заголовок ролика, а то, что должно считаться с картинки. 3. **Сожми до 3–5 слов.** Считай слова, а не оценивай на глаз. Не помещается — режь обещание, а не кегль. 4. **Выбери тип композиции** (таблица ниже) под то, что есть: лицо, объект, число, текст. 5. **Разведи текст и лицо по разным половинам** кадра. Наложение текста на лицо съедает и то, и другое. 6. **Проверь зоны:** правый нижний угол свободен под таймкод, важное вне краёв. 7. **Проверь на 320 px** — уменьшить и посмотреть. Не читается — это не «мелковато», это брак. 8. **Собери 2–3 варианта** с разной композицией, а не с разным кеглем одного макета. 9. **Отрендерь** → `cp-carousel-render`, размер под задачу. --- ## Типы композиции | Тип | Когда | Устройство | |---|---|---| | **Лицо и утверждение** | есть человек, тема личная | лицо 30–50% кадра в одной половине, 3–4 слова в другой, взгляд направлен в текст | | **Объект-доказательство** | есть результат, который видно | объект крупно, текст одной строкой снизу или сверху, без плашек | | **Число** | материал строится вокруг цифры | число во весь кадр, расшифровка мелко; число только с источником | | **До и после** | видимая разница | диптих, вертикальный разделитель, подписи одинакового кегля | | **Чистая типографика** | нет ни лица, ни объекта | одна фраза, два уровня кегля, акцентная линейка; самый честный вариант, когда фотографии нет | | **Скриншот с рамкой** | разбор чужого или своего экрана | скриншот затемнён, поверх — свой комментарий; чужой материал атрибутируется | Чего в списке нет намеренно: коллаж из четырёх картинок, стрелки и круги поверх лица, три шрифта на одной обложке, текст поверх пёстрого фона без подложки. --- ## Три задачи по отдельности ### Превью YouTube, 1280×720 Работает в паре с заголовком, а не вместо него: обложка даёт эмоцию и объект, заголовок — конкретику. Дублировать заголовок словами на картинке — потеря половины площади. - 3–5 слов, кегль такой, чтобы читалось при уменьшении в четыре раза; - правый нижний угол пустой; - одна и та же сетка на серию — канал должен узнаваться в выдаче; - проверка: положить три своих превью рядом с превью, которые реально выдаются по теме, и посмотреть, различается ли своё. ### Обложка карусели и поста, 1080×1350 - слайд 1 и слайд 2 — две самостоятельные обложки разными механизмами хука; - важное в центральных ~1012×1350, чтобы не резалось сеткой профиля; - в ленте карточка видна целиком, в сетке — обрезанной: проверять оба вида; - серия постов держит один макет обложки, меняется только содержание. ### Обложка PDF-лид-магнита, 1240×1754 Живёт в двух местах: миниатюрой в мессенджере и первой страницей файла. Миниатюра — размером с ноготь. - крупно: **что это** (тип материала) и **для кого**; - ниже мелко: сколько страниц или сколько пунктов внутри, автор; - никакой мелкой типографики: на миниатюре её не существует; - обещание на обложке должно совпадать с содержанием — иначе это обман на входе в базу. Содержание магнита собирает `cp-lead-magnet`, сборка PDF — `cp-carousel-render`. --- ## Путь исполнения Два маршрута, оба заканчиваются вёрсткой текста. **1. Полностью вёрстка.** HTML → PNG через `cp-carousel-render`, шаблон тот же, меняются `--w` и `--h`. Подходит всегда, обязателен, когда на обложке есть цифры, длинные слова, кириллица мелким кеглем. **2. Гибрид: генеративный фон плюс текст вёрсткой.** Фон, фактура или сцена без букв генерируются (`cp-image-prompt`, палитра берётся из темы), затем кладутся подложкой в тот же HTML-шаблон, текст — обычным CSS. Единственный способ получить «дизайнерскую» картинку с корректным русским текстом. Чего не делать: просить генератор нарисовать превью с русской надписью. Короткое заглавное слово иногда получается и требует ручной проверки, фраза — нет. Граница — в `cp-image-prompt`. --- ## Выход ``` ОБЛОЖКА · <задача> · <размер> Обещание: <одна фраза, которую должна считать картинка> ВАРИАНТ A · композиция: <тип> Текст: «<3–5 слов>» (счёт слов: N) Кадр: <что где, чем занята левая и правая половина, куда смотрит взгляд> Цвета: <из темы: фон, акцент> Зоны: правый нижний угол свободен · важное вне краёв ВАРИАНТ B · композиция: <другой тип> … ПРОВЕРКА НА 320 px: <что читается, что теряется> В РЕНДЕР → cp-carousel-render: <размер, имя файла, нужен ли генеративный фон> ``` ## Чек-лист перед выдачей - Для Shorts сказано прямо, что превью почти ничего не решает. - Слов на обложке 3–5, посчитаны. - Читается при уменьшении до 320 px. - Лицо, если есть, занимает 30–50% кадра и не перекрыто текстом. - Цветов два плюс акцент, не больше. - Правый нижний угол свободен. - Важное не выходит за безопасную зону площадки. - Контраст текста к фону проверен именно под текстом, а не «по общему впечатлению». - Варианты отличаются композицией, а не размером шрифта. - Обещание обложки совпадает с содержанием материала. ## Красные линии 1. Не рисовать текст обложки генератором изображений. 2. Не обещать на обложке то, чего нет внутри. 3. Не тратить время пользователя на превью для Shorts. 4. Не ставить цифру без источника и даты. 5. Не перекрывать лицо текстом и не класть текст на пёстрый фон без подложки. 6. Не использовать чужие кадры и скриншоты без атрибуции и собственного слоя. 7. Не менять тему бренда ради одной обложки.