1. Быстрый старт

1. Откройте конструктор щитков (кнопка в шапке).
2. Выберите сторону — Левый или Правый. Изменения применяются к выбранной стороне отдельно.
3. Загрузите изображения: кнопка Загрузить изображение (можно выбрать несколько файлов).
4. Клик по миниатюре добавит изображение на текущую сторону; кнопки L и R на миниатюре добавляют на конкретную сторону.
5. Перемещайте изображения на превью, кликая и перетаскивая их мышью (или касанием).
6. Нажмите Оформить заказ чтобы сохранить дизайн в заказе (PNG-файлы прикрепляются к заказу).

2. Загрузка и миниатюры

При загрузке изображений появляются миниатюры. К каждой миниатюре доступны две быстрые кнопки:

• L — добавить изображение на левый щиток.
• R — добавить изображение на правый щиток.

Клик по миниатюре добавляет изображение на текущую выбранную сторону.

Вы можете добавлять несколько изображений на одну сторону — каждое станет отдельным слоем.

3. Размещение и трансформация

Работа с изображением на превью:

• Нажмите на изображение на превью, чтобы выбрать слой (появится подсветка в списке слоёв).
• Перетаскивайте выбранный слой, удерживая и двигая мышью (или касанием) по превью.
• Для пользователей без колёсика мыши доступны визуальные контролы масштаба и поворота рядом с миниатюрой (плюс/минус и стрелки) — используйте их для точной настройки.
• Гарантируется обрезка по маске щитка — содержимое визуально ограничено формой щитка.

Если изображение плохо вписывается — уменьшите масштаб миниатюрой контроля или загрузите изображение с большим разрешением.

4. Работа с текстом

Вы можете добавить текст на щиток:

1. В поле Текст введите нужную надпись.
2. Выберите цвет, размер и жирность.
3. Нажмите Добавить текст — текст станет слоем, который можно перемещать и поворачивать.
4. Чтобы отредактировать текст, выберите текстовый слой и воспользуйтесь кнопкой Редактировать.

5. Слои и порядок

Каждое добавленное изображение и текст — отдельный слой. В панели слоёв можно:

• Выбрать слой (кнопка Выбрать).
• Поднять слой выше или опустить ниже (Вперёд/Назад).
• Удалить слой (Удалить).

Слои отрисовываются в порядке их позиции в списке; верхние слои перекрывают нижние.

6. Экспорт и оформление заказа

Когда дизайн готов:

1. Проверьте обе превью — левую и правую.
2. Нажмите Скачать левый PNG / Скачать правый PNG чтобы получить изображение локально.
3. Чтобы оформить заказ прямо из конструктора, нажмите Оформить заказ. PNG-файлы автоматически сохранятся и прикрепятся к заказу.

Если вы не вошли в аккаунт, система предложит зарегистрироваться перед оформлением заказа.

7. Для администратора

• Заказ из конструктора содержит ссылки на PNG-файлы (левый и правый) и будет виден в админке в карточке заказа.
• Админ может открыть PNG, распечатать или скачать их для производства.
• В админке можно установить базовую цену конструктора и редактировать статус заказа.

8. Советы и трюки

• Для чётких печатных результатов загружайте изображения в высоком разрешении (рекомендуется ≥1000 px по длинной стороне).
• Используйте контрастные цвета для текста, чтобы он хорошо читался на фоне.
• Если фон слишком светлый или тёмный — подложите полупрозрачный прямоугольник в качестве слоя (можно загрузить как изображение) для повышения контраста.

FAQ

Q: Могу ли я изменить дизайн после оформления заказа?
A: Нет — для текущей реализации изменения возможны до отправки заказа. Если нужно править уже созданный заказ, обратитесь к администратору.

Q: Куда сохраняются PNG-файлы?
A: PNG сохраняются на сервере (путь в админке), и их можно открыть или скачать из карточки заказа.