Product Designer і Customizer
Розширені інструменти для дизайну
Поєднуйте графіку, текст і вектори в одному проєкті. Удосконалюйте принт у Product Designer, перевіряйте його на 3D-моделі та надавайте клієнтам можливість персоналізації в Customizer.
Від композиції до товару
Проєктування у 2D і 3D
Створюйте дизайн на плоскій 2D-області, працюйте безпосередньо на областях друку 3D-моделі або використовуйте обидва вигляди поруч. Розміщуйте й налаштовуйте елементи, контролюючи їхній масштаб і положення на товарі.
Поєднаний вигляд допомагає оцінити композицію з урахуванням реальної форми товару. Той самий текст, зображення або мотив ви бачите як макет принта та як частину готової візуалізації.
Сітка та попередній перегляд принта у 2D
Сітка та прив'язка
Увімкніть сітку й прив'язку до шарів, щоб точніше розташовувати елементи.
Попередній перегляд без фонового зображення
Приховайте фонове зображення робочої області, щоб точніше оцінити сам принт. Елементи дизайну залишаються видимими.
Зображення над або під сіткою
Виберіть, чи відображати фонове зображення над сіткою або під нею.
Власне тло попереднього перегляду
Замість зображення задайте біле, сіре, чорне або власне тло. Перевірте краї й прозорі фрагменти графіки на контрастному кольорі. Зміна стосується попереднього перегляду, а не макета принта.
Зображення, непрозорість і композиція
Фото, ілюстрація або логотип можуть стати відправною точкою всього дизайну. Підготуйте їхній вигляд, прозорість і розташування, а потім поєднайте з текстом та іншими шарами.
Власна графіка
Додавайте зображення JPEG, PNG і WebP, а також файли SVG. Замініть графіку в композиції, щоб підготувати інший варіант дизайну.
Непрозорість від 0 до 100%
Поєднуйте мотиви, створюйте делікатне тло та контролюйте, наскільки виразно зображення виділяється на товарі.
Положення та перетворення
Переміщуйте, масштабуйте, обертайте й віддзеркалюйте елементи. Розташовуйте їх в області друку у 2D-вигляді або на 3D-моделі.
Патерни для зображень, тексту та фігур
Візерунки з одного мотиву
Створюйте повторюваний візерунок з одного елемента. Використовуйте його як тло, декоративний мотив або композицію в області друку. Інструмент повторення також працює з текстом і фігурами.
Сітка
Grid
Рівномірні рядки та стовпці.
Цегляна кладка
Brick
Рядки зі зміщенням через один.
Зміщення стовпців
Half drop
Кожен другий стовпець зі зміщенням.
Розсіювання
Scatter
Вільне розташування з початковим значенням генератора випадкових чисел.
Кругове розташування
Round
Повторення, розміщені по колу.
Задавайте кількість рядків і стовпців, інтервали та зміщення візерунка. Змінюйте варіанти A/B обертанням, масштабуванням або віддзеркаленням. Вибирайте чергування елементів, рядків, стовпців або шаховий порядок; для розсіювання використовуйте початкове значення генератора випадкових чисел.
Фільтри та корекція зображень
Узгоджуйте графіку зі стилем колекції, не виходячи з проєкту. Панель фільтрів містить корекцію освітлення й кольорів, обробку деталей, растр і керування напівпрозорістю.
| Фільтр або корекція | Що ви можете зробити |
|---|---|
| Яскравість | Освітлюйте або затемнюйте графіку, перш ніж додати її до композиції. |
| Контраст | Посилюйте або пом'якшуйте різницю між світлими й темними ділянками зображення. |
| Чорно-білий | Перетворюйте кольорове зображення на монохромний варіант дизайну. |
| Інверсія | Інвертуйте кольори для отримання ефекту негатива. |
| Відтінок | Змінюйте колірний тон, щоб надати графіці іншого характеру. |
| Насиченість | Керуйте інтенсивністю кольорів - від стриманих до виразних. |
| Барвистість | Налаштовуйте барвистість окремим кроком корекції кольору. |
| Гама червоного | Коригуйте тональну криву червоного каналу. |
| Гама зеленого | Коригуйте тональну криву зеленого каналу. |
| Гама синього | Коригуйте тональну криву синього каналу. |
| Різкість | Підкреслюйте краї та дрібні деталі графіки. |
| Розмиття | Пом'якшуйте зображення та робіть переходи плавнішими. |
| Растр / Halftone | Створюйте растровий ефект із крапок, хрестиків або ліній і налаштовуйте його структуру. |
| Видалення напівпрозорого тла | Упорядковуйте прозорість за допомогою порога альфа-каналу та м'якості переходу. Ця корекція впливає на непрозорість пікселів, а не на розпізнавання об'єкта. |
Шість стилів растра
Растр із контролем деталей
Надавайте графіці ритм крапок, хрестиків або ліній. Растр дає змогу свідомо формувати структуру принта: від дрібного растра до виразного декоративного ефекту.
Вихідна графіка
Растр: крапки
Растр: лінії
Доберіть форму растра до графіки
Круглі
Квадратні
Ромбічні
Еліптичні
Хрестики
Лінії
Інтервал і розмір
Задавайте щільність растра та розмір його елементів.
Кут і контраст
Обертайте сітку та налаштовуйте вплив яскравості графіки на растр.
М'якість країв
Вибирайте чіткіші або м'якші краї елементів.
Інверсія та повна непрозорість
Інвертуйте реакцію на яскравість і вмикайте елементи без напівпрозорості.
Видалення тла та вибраного кольору
Виокремте мотив і підготуйте його до поєднання з іншими елементами. Почніть автоматично або працюйте вручну, а вибраний колір видаліть за допомогою піпетки й допуску.
Автоматичне видалення тла
Виокремлюйте головний мотив зображення, щоб використати його у принті без навколишнього тла.
Ручне вдосконалення маски
Видаляйте й відновлюйте фрагменти пензлем. Налаштовуйте його розмір та інтенсивність, щоб виправити дрібні елементи й краї.
Видалення кольору
Виберіть колір піпеткою в інструменті ручного видалення тла. Задайте допуск, щоб видалити відповідні пікселі з усього зображення, а потім удоскональте маску пензлем.
Ручне маскування крок за кроком
Працюйте з маскою зображення та контролюйте, які фрагменти залишаються видимими. Застосуйте результат, коли краї та прозорість будуть готові.
Пензель і гумка
Приховуйте фрагменти зображення гумкою та відновлюйте їх пензлем. Налаштовуйте розмір та інтенсивність; у підтримуваних браузерах також твердість країв.
Видалення вибраного кольору
Виберіть колір піпеткою й налаштуйте допуск діапазону. Видаліть відповідні фрагменти та виправте деталі пензлем. У підтримуваних браузерах також можна пом'якшити межу розмиттям.
Кругла маска
Увімкніть круглу маску, змініть радіус, м'якість країв і положення центра по осях X та Y.
Контроль і скасування змін
Змінюйте колір тла попереднього перегляду, збільшуйте зображення й переміщуйте вигляд, щоб оцінити краї. Скасовуйте та повторюйте операції або очистьте маску, щоб відновити зображення.
Приклад використання: видаліть однотонне тло з логотипа, залиште сам мотив, а потім розмістіть його на кольоровому товарі або повторіть як візерунок. Видалення кольору діє на вибраний колір і всередині графіки, тому результат варто вдосконалити маскою.
Від підпису до складної типографіки
Текст, що формує характер дизайну
Підготуйте напис, що пасує до товару, бренду та стилю графіки. Доберіть гарнітуру, змініть форму тексту й поєднайте заливку з обведенням або тінню.
Понад 1800 шрифтів Google
Шукайте гарнітури за назвою та фільтруйте їх за категоріями й підтримуваними абетками. Вибирайте шрифти із засічками, без засічок, декоративні, рукописні та моноширинні.
Типографіка під контролем
Налаштовуйте розмір, міжлітерний і міжрядковий інтервали та вирівнювання. Змінюйте регістр, застосовуйте підкреслення чи закреслення, а також доступні для гарнітури жирні й курсивні накреслення.
Заливки, обведення й тіні
Поєднуйте суцільні кольори з лінійними або радіальними градієнтами. Додавайте суцільне чи пунктирне обведення та тінь із власним кольором, зміщенням і розмиттям.
Чотири способи формування тексту
Стандартний текст
Створюйте прості написи й багаторядкові композиції з контролем вирівнювання та міжрядкового інтервалу.
Текст по дузі
Вигинайте напис і налаштовуйте кут та відстань дуги. Створюйте композицію навколо емблеми або центральної графіки.
Мостоподібний текст - Bridge
Змінюйте висоту літер по краях і в центрі напису. Контролюйте плавність переходу та вертикальне положення центра.
Похилий текст - Oblique
Задавайте напрямок напису, налаштовуючи висоту на початку та в кінці, а також вертикальне положення кінця.
Фігури, контури та векторизація
Поєднуйте прості фігури в композиції або переходьте до точної роботи з точками та кривими. Редактор контурів дає змогу вдосконалювати підтримувані фігури й шари контурів.
Готові фігури
Почніть із прямокутника, лінії, еліпса, кола, трикутника, шестикутника, восьмикутника або зірки. Удоскональте заливку, обведення й тінь; для прямокутника також задайте заокруглення кутів.
Власні контури
Перетворюйте готову фігуру на власну емблему, декор або контур. Редагуйте точки підтримуваних шарів фігур і контурів у 2D-вигляді, перевіряючи результат на товарі.
Редактор точок і кривих: від ескізу до точного контуру
Виберіть розблокований шар фігури або контуру й перейдіть до векторного редагування. Працюйте з одним шаром за раз, малюючи нові фрагменти або вдосконалюючи наявну геометрію.
Перо та розширення контурів
Малюйте послідовні сегменти пером, приєднуйте їх до наявних точок і замикайте контури. Додавайте нові точки на контурі або видаляйте зайві, щоб удосконалити форму.
Вибір точок і ласо
Виберіть одну точку або виділіть більший фрагмент рамкою чи ласо. Працюйте з вибраною частиною контуру, залишаючи решту точок на місці.
Переміщення вздовж контуру
Переміщуйте точки вільно або вздовж наявного контуру. Вибрані точки можна переміщувати разом, щоб змінити весь фрагмент композиції.
Криві Безьє та напрямні
Налаштовуйте кривизну вхідними й вихідними напрямними. Вмикайте їх окремо та вибирайте незалежні напрямні, дзеркальні за кутом або зі збереженням одночасно кута й довжини.
З'єднання точок
З'єднуйте вибрані точки відрізком. Розширюйте траєкторію та вдосконалюйте з'єднання, що формують контур.
Розрізання контурів
Проведіть лінію розрізу через контур, щоб розділити його. Потім удоскональте отримані фрагменти інструментами точок і кривих.
Розширення та звуження контуру
Зміщуйте вибрані точки на задану відстань. Вибирайте дію в обох напрямках або лише по горизонталі чи вертикалі, щоб змінити пропорції вибраного фрагмента.
Вісь симетрії та віддзеркалення
Задайте положення й кут осі, а потім віддзеркальте весь контур або вибрані точки. Налаштуйте відстань з'єднання точок біля осі, щоб удосконалити стик обох сторін.
Скасування та повторення змін. Перевіряйте різні варіанти контуру й повертайтеся до попередніх операцій під час редагування.
Удосконалюйте вигляд заливки та обведення
Задавайте колір або градієнт заливки, ширину обведення й тінь. Вибирайте суцільну або пунктирну лінію з власною довжиною штрихів і проміжків. Змінюйте з'єднання обведення на гострі, скошені чи заокруглені, а кінці ліній - на плоскі, круглі або квадратні. Заокруглюйте кути прямокутника разом або кожен окремо.
Приклад використання: намалюйте половину емблеми, віддзеркальте її відносно осі та вдоскональте криві. Потім додайте обведення й напис по дузі, створивши власний мотив для принта.
Інструмент Product Designer
Векторизація зображення у SVG
Перетворюйте зображення PNG, WebP або JPEG на векторну графіку. Задавайте кількість кольорів і рівень деталізації, порівнюйте результат з оригіналом, а потім застосовуйте його в проєкті або завантажуйте файл SVG.
- Палітра від 1 до 32 кольорів і регульований рівень деталізації.
- Зв'язок із вихідним зображенням: можна вимкнути векторизацію та повторно обчислити результат.
- Урахування вихідної маски й фільтрів; растр може залишатися повторюваною векторною геометрією.
- Локальна обробка без використання сервісу генерації зображень за допомогою ШІ.
Менша палітра спрощує стиль графіки, а більша зберігає більше колірних відмінностей. Виберіть налаштування для вашого проєкту й оцініть попередній перегляд перед застосуванням.
QR-коди, що пасують до дизайну
QR-код може стати гармонійною частиною дизайну товару. Поєднуйте посилання на інструкцію, колекцію або сторінку бренду з власною палітрою, формою та стилем елементів коду.
Класична геометрія
Квадратні елементи та суцільний колір.
М'які кути
Заокруглені елементи, окремі рамки та центри.
Градієнт і колір бренду
Кругова форма, колірний перехід і незалежний колір кутів.
Шість стилів крапок
Надайте коду геометричного, м'якого або декоративного характеру. Стиль елементів усередині коду можна поєднувати з незалежним оформленням кутів.
- Квадратні
- Заокруглені
- Сильно заокруглені
- Classy
- Classy Rounded
- Крапки
Вміст і форма коду
Запишіть адресу сторінки, інструкції, колекції або власний текст. Виберіть квадратну чи круглу форму всього коду й узгодьте її з композицією.
Окремі стилі кутів
Незалежно налаштовуйте вигляд кутових рамок і їхніх центрів. Рамки можуть бути квадратними, сильно заокругленими або круглими, а центри - квадратними чи круглими. Також можна залишити стандартний стиль.
Чотири незалежні колірні області
Окремо вибирайте кольори крапок, кутових рамок, центрів кутів і тла. Зберігайте єдину палітру бренду або підкреслюйте вибрані елементи коду.
Градієнти та точні значення кольору
Використовуйте суцільний колір або лінійний чи радіальний градієнт. Додавайте колірні точки, задавайте їхнє положення й непрозорість, вводьте значення HEX або RGB. У лінійному градієнті також змінюйте напрямок переходу.
Власне або прозоре тло
Додайте тло з кольором чи градієнтом або вимкніть його, щоб код узгоджувався з графікою та кольором товару. Доберіть контраст так, щоб код залишався читабельним.
Місце для логотипа або мотиву
Зарезервуйте в центрі квадрат, горизонтальний або вертикальний прямокутник. Поєднайте цей простір із логотипом чи мотивом, доданим як окремий шар проєкту.
Масштабуйте, обертайте й розташовуйте код разом з іншими елементами дизайну. Перед виробництвом перевірте його зчитування в кінцевому розмірі принта, особливо після зміни кольорів або додавання мотиву в центрі.
Шари, групи та маски
Зберігайте порядок навіть у проєктах із багатьма елементами. Відокремлюйте текст, зображення й декор та контролюйте їхню взаємну видимість за допомогою груп і масок.
Порядок і видимість
Переміщуйте елементи у стосі шарів, приховуйте та відновлюйте їх. Будуйте композицію поетапно, не видаляючи попередніх ідей.
Групи
Об'єднуйте пов'язані елементи в групу, щоб легше керувати складним проєктом.
Маскування
Використовуйте нижній шар виділення як маску для решти. Обмежуйте видимість графіки вибраною формою.
Захист елементів дизайну
Закріплюйте постійні елементи вгорі або внизу стосу з блокуванням власника. Залишайте логотип та інші елементи айдентики поза межами редагування клієнта, зберігаючи простір для персоналізації.
Ваш дизайн. Персоналізація клієнта.
Персоналізація для ваших клієнтів
Надайте клієнтам Customizer на своєму сайті. У режимі редагування вони можуть додавати текст, зображення, фігури та QR-коди й удосконалювати власну композицію з попереднім переглядом товару.
Як власник, підготуйте проєкт і закріпіть елементи, що мають залишатися незмінними, за допомогою блокування власника. Доступність редагування залежить від конфігурації вбудованого інструмента та дозволів. Описана вище векторизація зображення є інструментом Product Designer.
Від власної графіки до персоналізованого товару
Поєднайте редагування зображень, типографіку й 3D-перегляд в одному процесі. Підготуйте композицію, збережіть контроль над її постійними елементами та залиште клієнтові простір для власної ідеї.
Переглянути інструменти в дії