ИИ-картинки для рассылки: шапка, разделитель и подвал в одном стиле

Письмо - самое строгое место, где может жить картинка. Ширину задаёт почтовое приложение читателя, оно может блокировать изображения до нажатия, инвертировать ваши цвета в тёмной теме и вовсе не показать ваш шрифт. Поэтому ИИ-картинку для рассылки нужно планировать с конца, от этих ограничений. Это чек-лист для набора из трёх элементов, шапки, разделителя и подвала, которые выглядят так, будто их сделала одна рука.

Начните с колонки, а не с картинки

Большинство рассылок идёт в одной центрированной колонке шириной около 600 пикселей, и проектировать нужно только её. Телефоны её сжимают, а десктопные клиенты просто ставят по центру пустого поля. Сначала решите, какой ширины колонка, и уже от неё считайте три кадра.

• Шапка: во всю ширину колонки, широкая и невысокая. Выберите широкий кадр в списке соотношений сторон, а высоту обрежьте в редакторе.
• Разделитель: во всю ширину, очень тонкий. Ни одна модель не рисует такую тонкую полосу сразу; создайте широкий кадр и вырежьте узкую полосу из самого спокойного места.
• Картинка подвала: той же ширины, что и шапка, чуть выше разделителя, чтобы письмо заканчивалось формой, а не юридическим текстом.

Создавайте в ширину примерно вдвое больше колонки и уменьшайте в редакторе, тогда картинки останутся чёткими на экранах телефонов с высокой плотностью. Студия делает изображения до 2K, а это больше, чем нужно колонке. Руководство по соотношению сторон объясняет, почему широкий кадр лучше квадрата, который потом приходится обрезать.

Весь текст держите вне картинки

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

Текст на шапке проще разместить, если в картинке уже есть тихая область. Назовите её в запросе, как показано в статье о месте под текст, а объект поместите с противоположной стороны. Добавьте и альтернативный текст к картинке: некоторые читатели увидят только его. Хватит короткой простой фразы; шаблон есть в статье об альтернативном тексте.

Одна палитра, прописанная во всех трёх запросах

Три отдельные генерации разойдутся, если их не закрепить. Выберите два-три цвета, назовите их в каждом запросе и сохраняйте один и тот же тип объекта и тот же свет. В примере выше это сливовый, фиолетовый и песочный с мягким светом фонариков. Руководство по цветовым палитрам показывает, как их сформулировать, чтобы модель не меняла их местами.

Затем используйте первую утверждённую шапку как референс для разделителя и подвала и скажите, что сохранить (палитру и свет), а что изменить (объект). Это разобрано в статье о референсах. Для всех трёх берите одну модель; Still - хороший вариант по умолчанию от €0.40 за генерацию, а Still Lite от €0.30 хватит, чтобы пробовать композиции перед финалом.

Подгоните картинку под фон письма

Сначала выберите цвет фона письма и сделайте так, чтобы края каждой картинки сливались с ним. Шапка, которая заканчивается резкой линией на белой странице, выглядит как приклеенный прямоугольник. Можно позволить картинке растворяться в точный цвет страницы у нижнего края, а можно указать цвет страницы в запросе и попросить мягкую виньетку. Проверяйте результат в своём почтовом инструменте, а не только в студии.

Тёмная тема - вторая проверка. Некоторые приложения инвертируют светлый фон, и картинка со светлой каймой может получить некрасивый ореол. Картинка с тёмным или среднетоновым краем лучше всего переносит оба режима, и это хороший повод держать палитру на тёмной стороне.

Файлы: плоские, небольшие и в скучном формате

Почтовые приложения гораздо менее современны, чем браузеры. Сохраняйте каждый элемент как JPEG, а если в нём плоские цвета, то как PNG, и избегайте новых форматов, поддержка которых в почте нестабильна. Стремитесь к файлу, достаточно маленькому, чтобы письмо открывалось сразу даже при плохой мобильной связи; спокойная картинка с малым количеством деталей сжимается заметно лучше загруженной, и тихая область под заголовок здесь тоже помогает. После сжатия проверьте плавные тёмные градиенты в полном размере: полосы проступают именно там.

Чего студия здесь не умеет

Она создаёт растровые картинки, но не собирает само письмо: ни HTML, ни нарезки, ни подгонки под вашу колонку, ни сжатия для почтовых приложений. Всё это делается в вашем редакторе или инструменте рассылок. Тончайший разделитель как таковой она тоже не рисует, поэтому его вырезают из более широкой генерации. Прозрачный результат есть лишь у некоторых моделей, и для почты он не стоит риска: клиенты непредсказуемо обрабатывают прозрачный файл в тёмной теме, поэтому лучше свести картинку на сплошной цвет. И она не обещает, что три генерации совпадут точно: палитра и референс приблизят результат, так что если бренду нужны точные цвета, выровняйте набор в редакторе.

Откройте студию, сначала создайте и утвердите шапку, затем сделайте по ней разделитель и подвал. Если стиль не подошёл, сравните модели изображений на странице моделей. Наша статья о картинках-шапках для блога описывает то же ремесло для веб-страницы, где правила мягче.