Генератор карточек: три товара в одном стиле
Оформим крем, контейнер и USB-хаб как небольшой учебный каталог. Сохраним одинаковые цвета, шрифт и зоны для названия и факта, а размер фотографии подберём для каждого предмета. На трёх примерах видно, какие настройки повторяются, а какие требуют ручной проверки.
Это вымышленные товары из учебной галереи, а DEMO-01, DEMO-02 и DEMO-03 — обозначения примеров. Назначение крема, объём и материалы приведены для упражнения. Для продажи нужны собственные фотографии и проверенные сведения.
Подготовьте одну строку данных на товар
До открытия генератора карточек соберите фото, короткое название и один факт, который поможет различить позиции. Удобно хранить это в таблице характеристик. В нашем сценарии данные переносятся в редактор вручную.
| Позиция | Название | Нижняя подпись | Исходник |
|---|---|---|---|
| DEMO-01 | Крем для лица | 50 мл · флакон с дозатором | PNG флакона |
| DEMO-02 | Контейнер с крышкой | Стекло · бамбуковая крышка | PNG контейнера |
| DEMO-03 | USB-хаб | 2 USB-A · USB-C · HDMI | PNG хаба |
У хаба перечислены видимые разъёмы учебного изображения. По форме порта нельзя определить скорость, мощность или поддержку видео конкретным устройством. Такие сведения добавляют только после проверки документации реального товара.
Зафиксируйте четыре общих настройки
В этом проекте холст имеет размер 900 × 1200 px, фон — #f7f4ef, основной текст — #293b3b, акцент — #52716a. Названия набраны встроенным Exo 2, размером 64 px и весом 600; ширина блока — 760 px. Левый край текста находится в 70 px от края холста.
Названию оставлены две строки. Подпись с фактом располагается ниже предмета и набрана размером 34 px. Эти числа позволяют воспроизвести наш макет; для другой длины названия или размера карточки их нужно подбирать заново.
Сетка задаёт место для информации. Она не требует одинакового масштаба фотографии: высокий флакон и широкий контейнер занимают кадр по-разному.
Сравните три готовые обложки
Все три фотографии вписаны в режиме «Целиком», с одинаковым вертикальным сдвигом 30 px. У флакона масштаб меньше, чтобы дозатор и основание помещались между текстовыми зонами. Хаб нельзя укрупнять только по корпусу: кабель тоже часть предмета.
У короткого названия «USB-хаб» остаётся свободная вторая строка. Мы сохраняем верхнюю границу названия и размер букв. Если растягивать короткое слово на всю ширину, каталог начнёт выглядеть как три несвязанные обложки.
Замените три позиции своими
- Сохраните открытую работу кнопкой «JSON», затем импортируйте учебный каталог. В нижней ленте будут три слайда — по одному на товар.
- Нажмите первую миниатюру. Загрузите фото первого товара, выберите «Целиком», настройте масштаб и при необходимости перетащите фото внутри холста.
- В списке «Слои» выберите название и измените его через «Свойства текста». Перепишите отдельный слой факта и обозначение позиции. Удалите учебную пометку после проверки данных.
- Повторите замену на втором и третьем слайдах. Проверяйте соответствие подписи фотографии сразу после каждой замены.
- Сохраните новый JSON с понятным именем, например
catalog-demo-v1.json, и экспортируйте слайды.
В этом сценарии один слайд — одна обложка отдельного товара. Это не галерея одного артикула для загрузки целиком. Три выгруженных файла нужно разнести по соответствующим товарам. Для галереи одного товара используйте отдельный проект с вопросами покупателя.
Что делать с четвёртым товаром и длинным названием
Кнопка «+ Слайд» добавляет новый слайд, но этот сценарий не предполагает автоматического заполнения каталога из таблицы. Для следующей тройки можно снова импортировать сохранённый мастер и заменить три позиции, предварительно сохранив готовую работу. Так исходный стиль остаётся в отдельном JSON.
Если название длиннее двух строк, сначала уберите повтор категории, внутренний код и слова, которые не помогают узнать товар. Например, вместо «Контейнер для хранения продуктов стеклянный с бамбуковой крышкой» используйте «Контейнер с крышкой», а материал оставьте в подписи. Размер, отличающий варианты, терять нельзя.
Если полный текст всё ещё нужен, измените ширину или кегль и посмотрите на всю серию. Точечное уменьшение букв до нечитаемого размера сохраняет формальные отступы, но портит карточку.
Если исходные фото выглядят по-разному
Сначала выровняйте ракурсы, поля и освещение исходников настолько, насколько позволяет реальный материал. В примерах уже одинаковый студийный фон. Сложное удаление фона в этом сценарии не требуется.
Для генеративной обработки подготовлены три проверки: сохранить корпус и разъёмы, заменить окружение стеклянного предмета и оставить место под надпись. Они выполняются во внешнем генераторе изображений; Promo SMM Card размещает полученную картинку и текстовые слои. Функции массового импорта каталога или запуска этих промптов в редакторе здесь нет.
Проверяйте файлы по артикулу, а стиль — всей серией
«Скачать все слайды» сохраняет каждый слайд отдельным PNG текущего размера холста. В проверке учебного проекта получились три файла 900 × 1200 px. Если браузер запросит разрешение на несколько скачиваний, разрешите его для этого экспорта.
Откройте все три файла рядом: одинаковы ли отступы, фон, цвет текста и его размер? Затем отдельно проверьте каждую пару «фото — подпись». Переименуйте PNG по своим артикулам, чтобы не перепутать их при загрузке. Сохраните JSON вместе с перечнем товаров: PNG объединяет слои, а проект позволяет продолжить правки.
Перед размещением сверяйте условия своей площадки и категории. Единый стиль — результат работы с макетами; влияние на переходы и заказы в этом учебном примере не измерялось.