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 поворотом, масштабом или отражением. Чередуйте элементы, ряды, столбцы либо используйте шахматный порядок; для разброса задайте начальное значение случайности.
Фильтры и коррекция изображений
Подстройте графику под характер коллекции, не выходя из проекта. Панель фильтров включает коррекцию света и цвета, обработку деталей, растр и управление полупрозрачностью.
| Фильтр или коррекция | Что можно сделать |
|---|---|
| Яркость | Осветлите или затемните графику перед размещением в композиции. |
| Контраст | Усильте или смягчите различия между светлыми и тёмными участками изображения. |
| Чёрно-белое | Превратите цветное изображение в монохромный вариант дизайна. |
| Инверсия | Инвертируйте цвета, чтобы получить эффект негатива. |
| Цветовой тон | Сместите цветовой тон, чтобы изменить характер графики. |
| Насыщенность | Управляйте интенсивностью цветов - от приглушённых до ярких. |
| Красочность | Настройте красочность как отдельный этап цветокоррекции. |
| Гамма красного | Скорректируйте тональный отклик красного канала. |
| Гамма зелёного | Скорректируйте тональный отклик зелёного канала. |
| Гамма синего | Скорректируйте тональный отклик синего канала. |
| Резкость | Подчеркните края и мелкие детали графики. |
| Размытие | Смягчите изображение и сделайте переходы более плавными. |
| Растр / Полутона | Создайте растровый эффект из точек, крестиков или линий и настройте его структуру. |
| Удаление полупрозрачного фона | Настройте прозрачность с помощью альфа-порога и мягкости перехода. Коррекция работает с непрозрачностью пикселей, а не с распознаванием объектов. |
Шесть стилей растра
Полутоновый растр с контролем деталей
Добавьте графике ритм точек, крестиков или линий. Полутоновый растр позволяет целенаправленно формировать структуру принта: от мелкого растра до выразительного декоративного эффекта.
Исходная графика
Полутоновый растр: точки
Полутоновый растр: линии
Подберите форму растра для графики
Круги
Квадраты
Ромбы
Эллипсы
Крестики
Линии
Интервал и размер
Задайте плотность растра и размер его элементов.
Угол и контраст
Поверните сетку и настройте влияние яркости графики на растр.
Мягкость краёв
Выберите более чёткие или мягкие границы элементов.
Инверсия и полная непрозрачность
Инвертируйте реакцию на яркость и включите элементы без полупрозрачности.
Удаление фона и выбранного цвета
Выделите мотив и подготовьте его к сочетанию с другими элементами. Начните автоматически или работайте вручную, а выбранный цвет удалите с помощью пипетки и допуска.
Автоматическое удаление фона
Выделите основной объект изображения, чтобы использовать его в принте без окружающего фона.
Ручная доработка маски
Удаляйте и восстанавливайте участки кистью. Настройте её размер и интенсивность для доработки мелких элементов и краёв.
Удаление цвета
Выберите цвет пипеткой в инструменте ручного удаления фона. Настройте допуск, чтобы удалить соответствующие пиксели по всему изображению, затем доработайте маску кистью.
Ручное маскирование шаг за шагом
Работайте с маской изображения и определяйте, какие части остаются видимыми. Примените результат, когда края и прозрачность будут готовы.
Кисть и ластик
Скрывайте участки изображения ластиком и восстанавливайте кистью. Настраивайте размер и интенсивность; в поддерживаемых браузерах также доступна жёсткость краёв.
Удаление выбранного цвета
Выберите цвет пипеткой и настройте допуск диапазона. Удалите соответствующие участки и доработайте детали кистью. В поддерживаемых браузерах можно также смягчить границу размытием.
Круглая маска
Включите круглую маску, измените радиус, мягкость краёв и положение центра по осям X и Y.
Проверка и отмена изменений
Измените цвет фона предпросмотра, увеличьте изображение и перемещайте вид для оценки краёв. Отменяйте и повторяйте операции или очистите маску, чтобы восстановить изображение.
Пример применения: удалите однотонный фон логотипа, оставьте сам мотив и разместите его на цветном продукте или повторите как узор. Удаление цвета действует и внутри графики, поэтому результат стоит доработать маской.
От подписи до сложной типографики
Текст, который задаёт характер дизайна
Подготовьте надпись под продукт, бренд и стиль графики. Выберите шрифт, измените форму текста и сочетайте заливку с обводкой или тенью.
Более 1800 шрифтов Google
Ищите шрифты по названию и фильтруйте по категориям и поддерживаемым алфавитам. Выбирайте шрифты с засечками, без засечек, декоративные, рукописные и моноширинные.
Типографика под контролем
Настраивайте размер, межбуквенный и межстрочный интервалы и выравнивание. Меняйте регистр, применяйте подчёркивание и зачёркивание, а также доступные для шрифта жирные и курсивные начертания.
Заливки, обводки и тени
Сочетайте сплошные цвета с линейными и радиальными градиентами. Добавьте сплошную или пунктирную обводку и тень со своим цветом, смещением и размытием.
Четыре способа изменить форму текста
Обычный текст
Создавайте простые надписи и многострочные композиции с настройкой выравнивания и межстрочного интервала.
Текст по дуге
Изогните надпись и настройте угол и расстояние дуги. Создайте композицию вокруг эмблемы или центрального изображения.
Текст-мост - Bridge
Меняйте высоту букв по краям и в середине надписи. Управляйте плавностью перехода и вертикальным положением центра.
Наклонный текст - Oblique
Задайте надписи направление, меняя высоту в начале и конце, а также вертикальное положение конца.
Фигуры, контуры и векторизация
Собирайте композиции из простых фигур или переходите к точной работе с точками и кривыми. Редактор контуров служит для доработки поддерживаемых фигур и слоёв контуров.
Готовые фигуры
Начните с прямоугольника, линии, эллипса, круга, треугольника, шестиугольника, восьмиугольника или звезды. Доработайте заливку, обводку и тень; у прямоугольника также настройте скругление углов.
Собственные контуры
Превратите готовую фигуру в авторскую эмблему, украшение или контур. Редактируйте точки поддерживаемых слоёв фигур и контуров в 2D, проверяя результат на продукте.
Редактор точек и кривых: от эскиза до точного контура
Выберите разблокированный слой фигуры или контура и перейдите к векторному редактированию. Работайте с одним слоем за раз, рисуя новые фрагменты или дорабатывая существующую геометрию.
Перо и расширение контуров
Рисуйте пером новые сегменты, соединяйте их с существующими точками и замыкайте контуры. Добавляйте точки на контур или удаляйте лишние, чтобы доработать форму.
Выделение точек и лассо
Выберите отдельную точку или выделите больший фрагмент рамкой либо лассо. Работайте с выбранной частью контура, оставляя остальные точки на месте.
Перемещение вдоль контура
Перемещайте точки свободно или вдоль существующего контура. Выбранные точки можно двигать вместе, чтобы изменить целый фрагмент композиции.
Кривые Безье и направляющие
Настраивайте кривизну входящими и исходящими направляющими. Включайте их отдельно и выбирайте независимые, зеркальные по углу или сохраняющие одновременно угол и длину направляющие.
Соединение точек
Соедините выбранные точки отрезком. Продолжайте контур и дорабатывайте соединения, формирующие его очертания.
Разрезание контуров
Проведите линию разреза через контур, чтобы разделить его. Затем доработайте полученные фрагменты инструментами для точек и кривых.
Расширение и сужение контура
Смещайте выбранные точки на заданное расстояние. Применяйте изменение по обоим направлениям, только по горизонтали или только по вертикали, чтобы изменить пропорции фрагмента.
Ось симметрии и отражение
Задайте положение и угол оси, затем отразите весь контур или выбранные точки. Настройте расстояние объединения точек у оси, чтобы доработать соединение двух сторон.
Отмена и повтор изменений. Проверяйте разные варианты контура и возвращайтесь к предыдущим операциям во время редактирования.
Доработайте заливку и обводку
Задайте цвет или градиент заливки, ширину обводки и тень. Выберите сплошную либо пунктирную линию со своей длиной штрихов и промежутков. Меняйте соединения обводки на острые, скошенные или круглые, а окончания линий - на плоские, круглые или квадратные. Скругляйте углы прямоугольника вместе или по отдельности.
Пример применения: нарисуйте половину эмблемы, отразите её относительно оси и доработайте кривые. Затем добавьте обводку и текст по дуге, создав собственный мотив для принта.
Инструмент Product Designer
Векторизация изображения в SVG
Преобразуйте изображение PNG, WebP или JPEG в векторную графику. Задайте число цветов и уровень детализации, сравните результат с оригиналом, затем примените его в проекте или скачайте SVG.
- Палитра от 1 до 32 цветов и регулируемая детализация.
- Связь с исходным изображением: можно отключить векторизацию и пересчитать результат.
- Учёт исходной маски и фильтров; полутоновый растр может сохраняться как повторяющаяся векторная геометрия.
- Локальный расчёт без сервиса генерации изображений с помощью ИИ.
Меньшая палитра упрощает стиль графики, большая сохраняет больше цветовых различий. Выберите подходящие проекту настройки и оцените предпросмотр перед применением.
QR-коды в стиле вашего проекта
QR-код может стать органичной частью дизайна продукта. Сочетайте ссылку на инструкцию, коллекцию или сайт бренда с собственной палитрой, формой и стилем элементов кода.
Классическая геометрия
Квадратные элементы и сплошной цвет.
Мягкие углы
Скруглённые элементы, отдельные рамки и центры.
Градиент и цвет бренда
Круговое расположение, цветовой переход и независимый цвет углов.
Шесть стилей точек
Придайте коду геометрический, мягкий или декоративный характер. Стиль внутренних элементов можно сочетать с независимым оформлением углов.
- Квадратные
- Скруглённые
- Сильно скруглённые
- Элегантные
- Элегантные скруглённые
- Точки
Содержимое и форма кода
Укажите адрес сайта, инструкции, коллекции или собственный текст. Выберите квадратную или круглую форму всего кода и подстройте её под композицию.
Отдельные стили углов
Независимо настройте внешний вид угловых рамок и их центров. Рамки бывают квадратными, сильно скруглёнными или круглыми, центры - квадратными или круглыми. Можно оставить стиль по умолчанию.
Четыре независимые цветовые области
Отдельно выберите цвета точек, угловых рамок, их центров и фона. Сохраните единую палитру бренда или выделите отдельные элементы кода.
Градиенты и точные значения цвета
Используйте сплошной цвет, линейный или радиальный градиент. Добавляйте цветовые точки, задавайте их положение и непрозрачность, вводите значения HEX или RGB. У линейного градиента также меняйте направление.
Собственный или прозрачный фон
Добавьте фон с цветом или градиентом либо отключите его, чтобы код сочетался с графикой и цветом продукта. Подберите контраст, при котором код остаётся читаемым.
Место для логотипа или мотива
Оставьте в центре квадрат, горизонтальный или вертикальный прямоугольник. Используйте это пространство для логотипа или мотива, добавленного отдельным слоем проекта.
Масштабируйте, поворачивайте и размещайте код вместе с остальными элементами проекта. Перед производством проверьте его считывание в целевом размере принта, особенно после изменения цветов или добавления мотива в центре.
Слои, группы и маски
Сохраняйте порядок даже в проектах с множеством элементов. Разделяйте текст, изображения и декор, управляя их взаимной видимостью с помощью групп и масок.
Порядок и видимость
Меняйте порядок элементов в стопке слоёв, скрывайте и восстанавливайте их. Создавайте композицию поэтапно, не удаляя прежние идеи.
Группы
Объединяйте связанные элементы в группы, чтобы проще управлять сложным проектом.
Маскирование
Используйте нижний из выбранных слоёв как маску для остальных. Ограничьте видимость графики выбранной формой.
Защита элементов проекта
Закрепляйте постоянные элементы сверху или снизу стопки с блокировкой владельца. Защитите логотип и другие элементы фирменного стиля от редактирования клиентом, оставив место для персонализации.
Ваш дизайн. Персонализация клиента.
Персонализация для ваших клиентов
Предоставьте клиентам Customizer на своём сайте. В режиме редактирования они могут добавлять текст, изображения, фигуры и QR-коды и дорабатывать свою композицию с предпросмотром продукта.
Как владелец подготовьте проект и закрепите с блокировкой владельца элементы, которые должны оставаться неизменными. Возможности редактирования зависят от настроек встроенного инструмента и прав доступа. Описанная выше векторизация изображений относится к Product Designer.
От собственной графики к персонализированному продукту
Объедините редактирование изображений, типографику и 3D-предпросмотр в одном процессе. Подготовьте композицию, сохраните контроль над постоянными элементами и оставьте клиенту место для его идеи.
Посмотреть инструменты в действии