3D-композиція
Створіть візуалізацію на основі готової моделі.
- Налаштуйте камеру, масштаб кадру, освітлення, тіні та тло.
- Згенеруйте базове зображення й шари для відображення наступних принтів.
Генератори мокапів - презентація та продаж товарів
Миттєве створення мокапів товарів
Налаштуйте представлення товару один раз, а потім показуйте в ньому нові принти й колірні варіанти. Генератор мокапів зберігає ракурс, тло та спосіб накладання графіки на товар. Готовий мокап поєднує ці налаштування з поточним дизайном клієнта або вашим дизайном у Designer.
Використовуйте генератори, доступні для вибраної моделі, або створюйте власні в режимі Mockup у Product Generator. Нижче наведено приклади застосування, налаштування 3D-сцени й власної фотографії, перевірку накладання принту, завантаження візуалізацій та їх використання в плагіні WordPress + WooCommerce.
Знімки екрана показують справжні інструменти Alter Product, деякі з англійським інтерфейсом. Кожен знімок можна відкрити в повному розмірі.
Створіть власний генератор мокапівНалаштуйте ракурси товару, допрацюйте композицію й накладання принту, а потім збережіть генератор разом із моделлю.Перейти до описуВикористовуйте готові ракурси в дизайні та магазиніСтворюйте візуалізації поточного принту, завантажуйте зображення та показуйте персоналізацію в кошику.Перейти до опису
Спочатку потрібна власна 3D-модель?Перейдіть до посібника Product Generator: викрійки, Easy Creator, розміри, симуляція, матеріали та експорт.Модель, генератор і готовий мокап
Генератор зберігає спосіб представлення товару. Готовий мокап - це зображення конкретного дизайну, створене за допомогою цього генератора.
Почніть із готової моделі або доступних генераторів
Якщо вибрана модель уже має генератори мокапів, ними можна відразу користуватися в Product Designer. Виберіть ракурс у вікні Mockup: попередній перегляд покаже графіку та кольори поточного дизайну.
Щоб створити власні генератори, відкрийте проєкт моделі в Product Generator і перейдіть у режим Mockup. Потрібні підготовлена модель і поверхні для відображення графіки. Власні викрійки, симуляцію та матеріали моделі описано в окремому посібнику зі створення 3D-моделей.
Один генератор, багато готових візуалізацій
Приклад: ви готуєте вигляд футболки спереду на світлому тлі. Для наступного принту не потрібно знову налаштовувати камеру, освітлення або контур коміра. Відкрийте Mockup у Designer, і збережений генератор покаже поточний дизайн у тому самому кадрі.
| Елемент | За що відповідає |
|---|---|
| 3D-модель | Форма товару й поверхні, на яких розміщується дизайн. Одна модель може мати кілька генераторів, наприклад для вигляду спереду, збоку та ззаду. |
| Генератор мокапа | Кадр, тло, освітлення, накладання на деталі та шари. Редагуйте його, коли потрібно змінити спосіб представлення товару. |
| Дизайн у Designer або Customizer | Графіка, написи й вибрані кольори товару. Зміна дизайну дає змогу отримати новий мокап за допомогою підготовленого генератора. |
| Завантажений мокап PNG | Готове зображення конкретного дизайну й ракурсу. Його можна використовувати в пропозиції товару, каталозі або рекламних матеріалах. |
Три робочі області мокапа
Виберіть етап відповідно до того, що потрібно вдосконалити. 3D-композиція та припасування до фотографії дають два способи підготувати базове зображення.
Припасування до зображення
Використовуйте власну фотографію товару як основу презентації.
- Припасуйте модель до фотографії за допомогою положення, обертання, масштабу й доступних інструментів деформації.
- Згенеруйте шари на основі підготовленого припасування.
Накладання принту
Допрацюйте контури деталей і відображення принту на зображенні.
- Редагуйте векторні точки й керувальні маркери, маски, тіні та світлі ділянки.
- На цьому етапі потрібні підготовлене базове зображення та векторні контури.
Від підготовленого кадру до наступних дизайнів
Налаштуйте композицію один раз і використовуйте генератор повторно, змінюючи графіку та кольори.
- Виберіть модель і додайте ракурси в режимі Mockup.
- Підготуйте 3D-композицію або припасування до фотографії, а потім згенеруйте шари.
- Перевірте накладання принту на всіх деталях і збережіть проєкт із генераторами.
- Використовуйте збережені ракурси в Designer або надайте товар клієнтам у Customizer.
Приклади: від каталогу до персоналізації клієнта
Виберіть спосіб підготовки генератора з урахуванням того, де показуватиметься товар. Наведені сценарії можна реалізувати в тих самих інструментах, змінюючи композицію та дизайн принту.
Як ви хочете представити товар?
Почніть із мети: зручне порівняння варіантів, упізнаваний стиль бренду або візуалізація на власній фотографії.
Єдиний стиль каталогу товарів
Футболка на світлому тлі, у сталому масштабі та з м'якою тінню. Кожен новий принт з'являється в тому самому ракурсі.
- Використовуйте 3D-композицію та підготуйте вигляд спереду, збоку й ззаду.
- Допрацюйте кадри, перш ніж завантажувати наступні дизайни.
- Результат: клієнту легше порівнювати візерунки й кольори в асортименті.
Композиція у стилі вашого бренду
Виберіть тло в кольорі колекції, градієнт або власне зображення. Налаштуйте світло й тінь, щоб товар пасував до підготовленого оточення.
- Збережіть налаштування як ракурс моделі.
- Після зміни тла згенеруйте актуальне базове зображення.
- Результат: наступні дизайни зберігають однакове візуальне оформлення.
Власна фотографія товару
Маєте фотографію футболки в потрібній обстановці? Використовуйте припасування до зображення, щоб поєднати модель із фотографією та підготувати накладання нових принтів.
- Припасуйте силует, рукави й камеру до фотографії.
- Перевірте накладання тестовим принтом і скоригуйте контури.
- Результат: власна фотографія стає основою для повторюваних мокапів.
Дизайн клієнта в кошику
Клієнт змінює графіку, текст або колір у Customizer. Доступні для моделі генератори створюють візуалізацію саме цього дизайну.
- Пов'яжіть дизайн із товаром у плагіні WordPress + WooCommerce.
- Зображення створюються під час додавання персоналізації в кошик.
- Результат: мініатюра біля позиції кошика й замовлення показує дизайн клієнта.
Один принт на білій і зеленій футболці
На знімках застосунку нижче показано один дизайн із фруктовим мотивом у двох кольорах товару. Ракурс залишається однаковим, а мокап показує поєднання принту з вибраним кольором футболки.
- Підготуйте принт у Designer і виберіть колір товару.
- Відкрийте Mockup і виберіть вигляд спереду.
- Змініть колір товару, а потім знову відкрийте той самий ракурс.
- Завантажте окремий PNG або архів варіантів, якщо для дизайну доступні відповідні колірні пресети.
Підготуйте генератор мокапів товару
Коли модель готова в Inspector, перейдіть у режим Mockup. Тут ви створюєте спільну композицію для наступних зображень і варіантів товару.
Вигляд спереду, збоку та ззаду однією командою
На панелі мокапів проєкту виберіть автоматичне створення, щоб підготувати чотири ракурси: спереду, ліворуч, праворуч і ззаду. Також можна додати власний ракурс через «Додати новий», змінити його назву й порядок. Кожен генератор зберігає власний кадр і налаштування.
Камера, тло й освітлення
У 3D-композиції товар є основою зображення. Підберіть кадр та освітлення під стиль каталогу або бренду.
Для каталогу почніть із простого тла й чіткого силуету товару. Ортографічна камера підходить для спокійного представлення без перспективного скорочення. Перспектива сильніше підкреслює об'ємну форму. Залиште в кадрі місце для рукавів, низу товару й тіні.
Тінь на підлозі допомагає розмістити товар у композиції, а тінь біля стіни створює відчуття глибини. Їхнє положення, розмір, непрозорість і м'якість регулюються незалежно. Експозиція та криві для світлих ділянок, півтонів і тіней допомагають відновити видимість деталей. У каталожному зображенні зберігайте чіткість принту; Bloom і глибину різкості підбирайте для більш іміджевого кадру.
- Документ і модель: задайте назву, ширину й висоту майстер-зображення в діапазоні 64-2048 px для кожної сторони.
- Камера: виберіть перспективний або ортографічний вигляд. Налаштуйте обертання, цільову точку, відстань і поле зору або масштаб кадру.
- Освітлення: виберіть оточення з бібліотеки та налаштуйте його обертання, інтенсивність і точку чорного. Окремо регулюйте тіні на підлозі та біля стіни, зокрема м'якість і непрозорість.
- Тло: використовуйте колір, градієнт, тло оточення або власне зображення. Налаштуйте заповнення кадру, трансформацію та прозорість. Тут можна створити сцену відповідно до брендингу товару.
- Постобробка: тональне відображення й експозиція, колірні криві, ambient occlusion, Bloom, глибина різкості, підвищення різкості, віньєтка та зерно. Згладжування MSAA/FXAA допомагає вдосконалити краї.
Припасуйте модель до власної фотографії
Режим припасування до зображення дає змогу використати власний JPG, PNG або WebP. Налаштуйте камеру й масштаб накладеної моделі, регулюйте її непрозорість і положення. Для одягу доступні інструменти кісток, пресети положення рукавів і м'яка деформація з радіусом та силою впливу. Підготовлене припасування використовується для генерації шарів мокапа.
Для підтримуваного одягу можна створити автоматичний риг і налаштувати кістки переміщенням, обертанням та зміною довжини. Дзеркальне редагування допомагає зберегти симетрію, а пресети рукавів дають змогу почати з вихідного положення, трохи опущених рукавів або положення вздовж тіла. М'яка деформація й м'яке обертання діють локально: виберіть радіус, силу та тип згасання впливу - плавний, лінійний, сферичний або різкий. Перегляд сітки полегшує оцінювання форми.
- Завантажте фотографію JPG, PNG або WebP і задайте її як основу для припасування.
- Налаштуйте камеру, положення, обертання й масштаб моделі. Непрозорість накладання допомагає порівняти її силует із товаром на фотографії.
- Для одягу використовуйте доступний риг, положення рукавів і м'яку деформацію. Переходьте від загальної форми до локальних виправлень.
- Виберіть генерацію з припасування, потім перейдіть до накладання принту й перевірте краї та тестовий візерунок.
Допрацюйте накладання принту й шари мокапа
Базове зображення, маска принту, тіні та світлі ділянки працюють разом, щоб графіка зберігала вигляд і форму товару. Правильна підготовка дає змогу повторно використовувати ту саму візуалізацію.
Генерація та перевірка шарів
У 3D-композиції виберіть генерацію повного набору шарів, а під час припасування до фотографії - генерацію з припасування. Потім перегляньте окремі шари й результат на товарі.
| Шар | Що можна налаштувати |
|---|---|
| Базове зображення | Кадр товару, тло й вигляд сцени. Після зміни композиції оновіть його за допомогою генерації. |
| Маска принту | Видиму область графіки, поріг, м'якість і зміщення краю, а також його згладжування. |
| Тіні | Силу, гаму й точку білого, щоб принт зберігав затінення товару. |
| Світлі ділянки | Поріг, силу й гаму світлих областей композиції. |
Перевірте генератор тестовим принтом
Перш ніж перейти до кінцевого дизайну, відкрийте інструмент тестових принтів. Можна призначити візерунок окремо доступним деталям, а за наявності зміни кольору перевірити колір усього товару або окремих елементів.
Шахова UV-сітка
Кольорова сітка допомагає помітити розтягнення, зміну напрямку й розриви графіки. Особливо уважно перевірте комір, рукави й бічні краї.
Заповнювач «Your design here»
Позначки й центральна графіка допомагають оцінити розташування принту та перевірити, чи не обрізається він контуром або маскою.
Повторюваний напис
Візерунок із написом Alter Product допомагає оцінити читабельність, пропорції й напрямок літер на конкретній деталі.
Кольори товару й деталей
Порівняйте світлий і темний варіанти. Так легше помітити надто сильні тіні, пересвічені ділянки або світлий ореол навколо принту.
Контури деталей і коригування елементів
Перейдіть до накладання принту, виберіть деталь товару й налаштуйте точки та маркери Безьє її контуру. Можна точно скоригувати комір, рукав і краї, а потім перерахувати шари. Меню генерації також дає змогу відновити контури або оновити лише базове зображення, зберігши наявні вектори.
Якщо принт виходить на тло або не доходить до краю, спочатку виправте геометрію контуру. Потім налаштуйте маску та її м'якість. Тіні й світлі ділянки регулюйте наприкінці, порівнюючи результат на світлому й темному кольорах товару.
Що згенерувати повторно після змін?
Виберіть обсяг оновлення, щоб зберегти ручні виправлення там, де вони ще потрібні.
| Обсяг оновлення | Коли використовувати |
|---|---|
| Повний набір шарів | Після підготовки сцени або значної зміни композиції, коли потрібно оновити базове зображення й шари мокапа. |
| Шари зі збережених векторів | Після ручного виправлення контуру, коли потрібно перерахувати результат, зберігши допрацьовані шляхи. |
| Відновлення контурів | Коли потрібно повторно отримати контури з моделі. Геометрія створюється заново, тому попередні ручні виправлення можуть бути замінені. |
| Лише базове зображення | Коли потрібно оновити зображення без перезапису наявних векторів. Після змін, що впливають на тіні або маску, перевірте також відповідні шари. |
Збережіть генератори разом із проєктом моделі
Після налаштування ракурсів збережіть проєкт Product Generator. Колекція генераторів належить моделі та її ревізії, яку використовує Designer. У застосунку проєкт зберігається на сервері, а в плагіні WordPress - локально.
Після зміни камери, тла, світла або припасування оновіть відповідні шари й перевірте результат перед збереженням. Завантаження PNG із Designer створює зображення поточного дизайну; для подальшого редагування генератора потрібно зберегти проєкт моделі.
Використовуйте мокапи в Designer і WooCommerce
Підготовлений генератор стає частиною роботи з моделлю. Під час проєктування ви користуєтеся готовими ракурсами й поточною персоналізацією.
Готова графіка в однаковому кадрі
У Product Designer відкрийте Mockup. У вікні генератора мокапів виберіть мініатюру вигляду спереду, збоку або ззаду. Попередній перегляд використовує графіку та кольори поточного дизайну. Камера, світло й тло налаштовуються заздалегідь у режимі Mockup генератора моделей.
Завантажте PNG або колірні варіанти
Виберіть ракурс і розмір зображення: Thumb 256, малий 512, середній 1024 або великий 2048 px. Значення визначає довшу сторону; пропорції залежать від генератора. Команда завантаження зображень зберігає PNG вибраного ракурсу.
- За наявності щонайменше двох відповідних пресетів опція генерації зображень для всіх колірних пресетів створює ZIP із тим самим ракурсом у різних кольорах. За меншої кількості завантажується один PNG.
- Набір пресетів залежить від вибраних матеріалу, технології друку й розміру. Власні кольори поза пресетами не входять до цього архіву.
- Якщо потрібні інші сторони товару, виберіть відповідні мініатюри й завантажте їхні зображення.
Персоналізація в кошику та замовленні
У плагіні WordPress + WooCommerce використовуються локальний проєкт і закріплена за ним ревізія моделі. Для товару з доступними генераторами мокапів застосунок створює зображення персоналізації під час додавання дизайну в кошик. Після збереження файлів плагін показує їх біля позиції кошика та замовлення.
- Не потрібно вручну відкривати вікно Mockup для кожного замовлення клієнта.
- Результати враховують дизайн і вибрані кольори товару. Генератори та ресурси мають бути доступні для використовуваної ревізії моделі.
- Мініатюри підтримуються в класичному кошику та блоках Cart/Checkout WooCommerce. Якщо збережений мокап недоступний, залишається стандартна мініатюра товару.
- Підготуйте та збережіть генератори біля моделі, що використовується в дизайні.
- Надайте дизайн у товарі, який обслуговується плагіном WordPress + WooCommerce.
- Клієнт персоналізує товар у Customizer і додає дизайн у кошик.
- Застосунок створює мокапи доступних ракурсів для вибраного дизайну й кольорів. Після збереження зображень плагін використовує персоналізовану мініатюру біля позиції кошика та замовлення.
Візуалізація для магазину та файл для виробництва
Мокап показує вигляд товару: готову графіку, форму, тіні й тло. Використовуйте його в пропозиції, каталозі або для демонстрації персоналізації клієнту.
Для виробництва підготуйте файли областей друку в менеджері друку. Це стосується і проєктів AOP, де графіка покриває різні частини товару. Налаштування та завантаження виробничих файлів описано в посібнику з готових до друку файлів.
Перевірте готовий генератор перед використанням у магазині
Перевірте кілька різних принтів і кольорів товару. Генератор, налаштований на простому мотиві, має коректно відображати також дрібний текст, графіку біля краю й великий принт AOP.
Коротка перевірка від редагування до кошика
Пройдіть той самий шлях, яким пізніше скористаєтеся ви або ваш клієнт.
- Перегляньте всі збережені ракурси. Перевірте кадрування товару, тінь і відступи.
- Увімкніть шахову сітку або тестовий текст на деталях для друку. Перевірте контури, маску й розташування графіки.
- Порівняйте світлий і темний кольори та кінцевий принт у Designer. Завантажте PNG і перегляньте його в цільовому розмірі.
- Після змін збережіть проєкт моделі. У плагіні перевірте дизайн із потрібною ревізією моделі й виконайте тестове додавання персоналізації в кошик.
Що виправити, якщо результат відрізняється від очікуваного?
Почніть з етапу, що відповідає за конкретну проблему. Не кожне виправлення потребує повторного налаштування всієї сцени.
| Що ви бачите | Що перевірити |
|---|---|
| Принт виходить за межі товару або зникає біля коміра | Контур деталі в режимі накладання, маркери Безьє та налаштування маски принту. Після виправлення перерахуйте потрібні шари. |
| Сітка або літери надмірно розтягнуті | Припасування моделі до фотографії та накладання на конкретну деталь. Виправте форму, перш ніж приховувати проблему надто м'яким краєм. |
| Графіка надто темна або пересвічена | Налаштування шарів тіней і світлих ділянок. Для 3D-композиції перевірте також експозицію та освітлення сцени. |
| Після зміни тла досі відображається старе зображення | Оновіть базове зображення відповідною командою генерації та збережіть проєкт. Вибір тла змінює сцену, але не замінює раніше згенероване зображення. |
| В архіві ZIP немає бічних і заднього ракурсів | Архів варіантів стосується вибраного ракурсу. Виберіть наступну мініатюру та завантажте зображення цієї сторони товару. |
| Немає опції архіву всіх кольорів або завантажується один PNG | Перевірте кількість відповідних пресетів для матеріалу, технології друку й розміру. Потрібні щонайменше два. |
| Кошик показує стандартну фотографію товару | Перевірте доступність збережених генераторів та їхніх ресурсів для ревізії моделі, що використовується в дизайні, а також успішність збереження мокапів. |