Как создать рекламный баннер Faberlic и добавить свой текст в Figma

Сегодня разберём практический урок: как для сгенерированной фотографии добавить свой рекламный текст в Figma и получить готовый баннер для лендинга.

Ранее мы уже разбирали, как правильно создать персонажа для генерации в статье «Как заменить рекламный баннер на лендинге Faberlic и сделать его персональным». Если вы ещё не создавали своего персонажа, сначала выполните часть шагов из предыдущей статьи.

Что будем создавать

Наша задача – выбрать продукт Faberlic, создать для него рекламное изображение, добавить текст и подготовить баннер для шаблона «Стартовая форма».

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

Коротко об акции для баннера

С 14 апреля по 3 мая 2026 года в Faberlic действует акция на пептидные коктейли. При покупке двух продуктов участники получают 50 драйвов и травяной сбор Herbal Tea в подарок.

В акции участвуют три варианта коктейлей: пептидный коктейль без вкуса, арт. 16158, со вкусом малинового десерта, арт. 16159, и со вкусом шоколадно-ореховой пасты, арт. 16160.

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

Для консультанта это хороший повод сделать понятный баннер: продукт, польза, бонус и простое приглашение зарегистрироваться.

Что понадобится для работы

Для примера будем использовать сервис Unitool. Он работает в России без ограничений и содержит разные инструменты на базе ИИ.

В статье используются ChatGPT для подготовки промпта, Nanobanana для генерации изображения, iloveimg для увеличения изображения и удаления фона, а также Figma для сборки итогового баннера.

• свои фотографии лица в разных ракурсах
• сервис ChatGPT: https://unitool.ai/ru/chatgpt
• сервис Nanobanana: https://unitool.ai/ru/nanobanana
• сервис Figma: https://www.figma.com/
• сервис iloveimg: https://www.iloveimg.com
• готовый лендинг на go.faberlic.com
• шаблон «Стартовая форма»
• готовый промпт из этой статьи

Все сервисы, указанные в статье, являются примером. Вы можете использовать другие похожие инструменты, с которыми вам удобно работать.

Шаг 1. Соберите все материалы в одну папку

Первое, что нужно сделать, – сохранить все изображения в одной папке. Так вы не будете искать нужные файлы по телефону или компьютеру во время работы.

Это особенно удобно, когда вы используете сразу несколько сервисов: генератор изображений, удаление фона и Figma.

• фотографии персонажа в разных ракурсах
• фотографии продукта
• готовые варианты генерации
• изображение после увеличения
• изображение без фона
• финальный баннер

В нашем примере используются 3 фотографии продукта. Изображения товара лучше брать с официального сайта Faberlic в максимальном качестве: https://faberlic.com/ru/ru/product/0122-093811.

Чем качественнее исходники, тем аккуратнее будет итоговый баннер.

Шаг 2. Продумайте композицию баннера

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

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

• верхняя часть баннера остаётся свободной под заголовок
• персонаж находится немного ниже центра
• товары хорошо видны в руках
• один продукт расположен чуть ближе к зрителю
• фон светлый и не мешает тексту
• композиция подходит для формата 4:5

Шаг 3. Сгенерируйте рекламное изображение

Теперь можно переходить к генерации. В настройках Unitool я выбрал, чтобы Nanobanana сделала два варианта генерации, а формат изображения указал 4:5.

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

Реалистичная рекламная сцена в стиле премиального wellness-бренда (уровень Apple / Dyson / premium nutrition), вертикальный формат 4:5, high-end commercial photography.

ФОН:
Чистый светлый фон с мягким градиентом (белый → молочный → светло-бежевый).
Верхние 25–30% кадра — полностью чистое пространство без объектов, предназначенное под рекламный текст.
Лёгкий направленный световой градиент снизу вверх (создаёт визуальное движение к заголовку).
В центре за персонажем мягкое свечение (glow halo), усиливающее фокус.
Тонкие световые линии с направлением движения вверх/в сторону, плавные и премиальные.
Очень лёгкие частицы (5–10), полупрозрачные, создают ощущение воздуха и глубины.

ПЕРСОНАЖ:
Женщина 30–45 лет, славянская внешность, ухоженная, реалистичная, вызывает доверие.
Волосы средней длины (до плеч), мягкие естественные волны, аккуратная укладка, боковой пробор, controlled natural volume, здоровый блеск.
Кожа с мягким естественным свечением (clean beauty), натуральный макияж.

ЭМОЦИЯ:
Спокойная уверенность + лёгкая живая улыбка.
Прямой контакт с камерой.
Ощущение: "я сама этим пользуюсь и рекомендую".

ОДЕЖДА:
Минималистичный верх (свитер / топ), премиальная текстура ткани.
Цвета: молочный / кремовый / бежевый.
Без логотипов и принтов.

КОМПОЗИЦИЯ:
Персонаж смещён немного ниже центра (оставлено пространство под текст).
Средний план (по грудь).
Корпус слегка развёрнут, поза естественная.
Композиция с явной визуальной иерархией (product-first).

ОБЪЕКТЫ (КРИТИЧНО):
В руках две РАЗНЫЕ коробки пептидных коктейлей Faberlic:

— одна розовая (вкус малины)
— одна коричневая (шоколадно-ореховый вкус)

ТРЕБОВАНИЯ:
— коробки строго разные
— не дублируются
— не зеркальные копии
— различаются по цвету и дизайну
— обе повернуты лицом к камере
— полностью читаемы

АКЦЕНТ (КЛЮЧ ДЛЯ 10/10):
Одна коробка (главная) расположена ближе к камере на 10–15% → создаёт глубину и доминирование.
Продукты визуально немного ярче и контрастнее лица.
Мягкий световой акцент (subtle glow + edge light) на коробках → они главный фокус.
Лёгкое свечение и микро-частицы вокруг продуктов (очень аккуратно).

МАСШТАБ:
Коробки реалистичного размера (примерно формат A5).
Без искажений масштаба.

ВЗАИМОДЕЙСТВИЕ:
Пальцы естественно обхватывают коробки.
Объекты не висят в воздухе.
Есть ощущение веса.
Нет пересечений геометрии.

СВЕТ:
Мягкий студийный свет спереди + мягкий контровой свет сзади.
Дополнительный лёгкий rim light по краям (даёт "дорогой" объём).
Продукты освещены чуть ярче лица (визуальный приоритет).
Свет подчёркивает текстуру упаковки.

ДОПОЛНИТЕЛЬНО:
Малая глубина резкости (фон слегка размыт).
Чистая, не перегруженная сцена.
Premium minimalism + cinematic lighting + volumetric light.
Чёткая визуальная иерархия: продукты → лицо → фон.

ЗАПРЕТЫ:
— никаких одинаковых коробок
— никаких лишних объектов
— никаких ярких фруктов
— никакого визуального шума
— не перегружать сцену
— не делать "плоскую" композицию

Шаг 4. Выберите стиль баннера

После генерации можно сравнить разные варианты. В моём примере первый вариант получился более спокойным, дорогим и современным. Он создаёт ощущение доверия и премиального продукта.

Минус такого варианта в том, что он может быть менее «вау». Он не такой яркий, но зато выглядит аккуратнее и лучше подходит для лендинга, где важно доверие.

• плюс: выглядит дорого
• плюс: современная подача
• плюс: вызывает доверие
• плюс: даёт премиальное ощущение
• минус: немного спокойный
• минус: меньше эффекта «вау»

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

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

• плюс: больше динамики
• плюс: выглядит «вкуснее»
• плюс: лучше цепляет взгляд
• плюс: подходит для стоп-скролла
• минус: может дешевить стиль
• минус: напоминает старый рекламный подход
• минус: меньше доверия

Шаг 5. Придумайте текст для баннера

Когда изображение выбрано, нужно продумать текст. Текст не должен перегружать баннер. Лучше использовать короткий заголовок и понятный подзаголовок.

Я остановился на таком варианте: сверху заголовок, в центре изображение, снизу короткое пояснение.

Попробуйте Faberlic со скидкой 20%

Простая регистрация и доступ к выгодным ценам без обязательств

Мне нравится эффект, когда изображение немного закрывает заголовок. Так появляется глубина: кажется, что человек и продукт находятся перед текстом.

Чтобы сделать такой эффект, понадобится три слоя: исходное изображение, текст и такое же изображение, но уже без фона.

1. нижний слой: исходное изображение
2. средний слой: рекламный текст
3. верхний слой: изображение без фона

Шаг 6. Увеличьте изображение перед удалением фона

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

Перейдите по ссылке https://www.iloveimg.com/upscale-image, выберите изображение, увеличьте его и сохраните результат.

Шаг 7. Удалите фон у изображения

Теперь нужно удалить фон. Для этого перейдите по ссылке https://www.iloveimg.com/remove-background.

Загрузите увеличенное изображение, удалите фон и сохраните результат. Именно этот файл мы потом положим верхним слоем в Figma.

Почему лучше удалять фон после увеличения? Увеличенное изображение часто даёт более аккуратный край волос, рук и предметов. Это особенно важно, если верхний слой будет закрывать часть текста.

Шаг 8. Соберите баннер в Figma

Для сборки баннера используем Figma. Это бесплатный сервис, который достаточно легко освоить для простых задач.

Также можно использовать Canva или похожий редактор, если вам так удобнее. Но в этом уроке пример будет на Figma.

Вот ссылка на пример, который используется в уроке. Название frame «custom_banner»: https://www.figma.com/design/tUpD2ORnnpv8BauwdwEQED/Баннер-Фаберлик?node-id=0-1&p=f&t=daFuGQxSxv5FYz2x-0.

Чтобы редактировать файл, зарегистрируйтесь в Figma и создайте копию файла.

Шаг 9. Настройте размер баннера

Размер нашего баннера будет иметь соотношение сторон 4:5, как у сгенерированного изображения. Это удобно, потому что картинку не придётся сильно обрезать.

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

Шаг 10. Правильно расставьте слои

Чтобы получить эффект глубины, важно правильно расположить слои. Верхний слой должен быть изображением без фона. Под ним размещается текст, а ещё ниже – исходное изображение с фоном.

Так создаётся ощущение, что персонаж частично перекрывает заголовок.

1. дополнительный текст: «Простая регистрация и доступ к выгодным ценам без обязательств»
2. небольшой бежевый градиент для улучшения читабельности текста
3. изображение без фона, немного изменённое по размеру
4. рекламный текст: «Попробуйте Faberlic со скидкой 20%»
5. исходное изображение, немного изменённое по размеру

Очень важно: размер финального изображения и размер изображения без фона должны совпадать. Если они будут разными, верхний слой не совпадёт с нижним, и эффект глубины будет выглядеть неаккуратно.

После расстановки слоёв проверьте, чтобы текст хорошо читался, лицо не закрывалось, а продукт оставался главным акцентом.

Шаг 11. Экспортируйте готовый баннер

Когда баннер собран и вы довольны результатом, его нужно экспортировать. Желательно выбрать формат PNG, чтобы изображение получилось более чётким.

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

Шаг 12. Проверьте результат перед загрузкой

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

Проверьте, не обрезана ли голова, не выходят ли руки и продукция за края, не изменилось ли лицо, нет ли лишних пальцев или странного контакта с предметами.

• лицо похоже на исходные фотографии
• голова полностью в кадре
• руки выглядят естественно
• предметы не висят в воздухе
• размер продукции выглядит правдоподобно
• фон чистый и не отвлекает
• есть место под текст или кнопку
• изображение подходит под формат лендинга
• текст читается на телефоне
• баннер не выглядит перегруженным

Шаг 13. Загрузите баннер в шаблон «Стартовая форма»

Когда баннер готов, откройте go.faberlic.com и перейдите к редактированию лендинга. Выберите шаблон «Стартовая форма» и найдите блок с рекламным баннером.

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

Дополнительная идея: тестируйте разные баннеры

Вы можете использовать разные баннеры и сравнивать, какой из них даёт лучший отклик. Например, один вариант сделать спокойным и премиальным, а второй – более ярким и рекламным.

Когда вы найдёте более сильный баннер, его можно улучшать дальше: менять заголовок, добавлять поясняющий текст под баннером, усиливать предложение или тестировать разные товары.

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

Так баннер будет работать не один, а вместе с текстом страницы.

Что сделать прямо сейчас

1. Создайте или подготовьте своего персонажа по предыдущей статье
2. Скачайте фотографии продукта с официального сайта Faberlic
3. Соберите все материалы в одну папку
4. Сгенерируйте рекламное изображение в формате 4:5
5. Выберите лучший вариант: спокойный премиальный или более рекламный
6. Придумайте короткий заголовок и подзаголовок
7. Увеличьте изображение через iloveimg
8. Удалите фон у увеличенного изображения
9. Соберите баннер в Figma из трёх слоёв
10. Экспортируйте баннер в PNG
11. Загрузите его в шаблон «Стартовая форма»
12. Проверьте результат на телефоне

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

Сделайте один аккуратный персональный баннер, и ваш лендинг сразу будет выглядеть заметно сильнее.