# Как подготовить баннер с ИИ-изображением

> Как подготовить баннер с ИИ-изображением: безопасная зона для заголовка, два формата и проверка на телефоне.

Каноническая страница: [https://images.rateai.tech/guides/banner-image/](https://images.rateai.tech/guides/banner-image/)
Дата материала: 2026-11-14

Рубрика: Практическое руководство

## Когда пригодится

Баннер должен работать с текстом и кнопкой в конкретном макете.

## Рабочий порядок

| Этап | Что сделать |
| --- | --- |
| Подготовка | Узнайте размеры блоков для компьютера и телефона. |
| Черновик | Разместите смысловой объект вне области текста. |
| Проверка | Текст и действие остаются видимыми на обоих экранах. |

## Пример применения

Для анонса курса оставьте спокойный фон под заголовком слева.

## Типичная ошибка и исправление

Широкая картинка может обрезать героя на мобильном; сделайте отдельный кадр.

## Два макета для одного сообщения

Для анонса курса подготовьте широкий вариант с человеком справа и спокойным полем слева. Для телефона соберите отдельный вертикальный кадр, где лицо не обрезано, а поле под заголовок расположено выше. Не уменьшайте широкий файл до размера телефона без проверки композиции.

Точный заголовок и кнопку добавьте в HTML или графическом макете, а не генерируйте буквами внутри картинки. Так они останутся читаемыми и доступными для исправления. После экспорта проверьте оба варианта вместе с реальным текстом и кнопкой.

## Приёмка баннера

- Главный объект не перекрывает заголовок.
- Текст остаётся читаемым на узком экране.
- Картинка не содержит выдуманного логотипа или предложения.

## Читайте также

- [Все руководства](https://images.rateai.tech/guides/)
- [Базовое руководство](https://images.rateai.tech/guides/image-prompt/)
- [Как сделать миниатюру, читаемую в выдаче](https://images.rateai.tech/guides/thumbnail-image/)
- [Как собрать карточку для соцсети](https://images.rateai.tech/guides/social-card-image/)
- [Как подобрать изображение для обложки статьи](https://images.rateai.tech/guides/cover-image/)
- [Как подготовить первый экран сайта с ИИ-картинкой](https://images.rateai.tech/guides/website-hero-image/)