Ролик о концепте в Instagram: смена цветов и сохранение постера в коротком видеопоказе.

Попробуйте выбрать цвет

Нажмите на один из трёх образцов под автомобилем. Затем сохраните постер: браузер подготовит PNG именно с выбранным цветом, без кнопок интерфейса. Если скачивание не началось, появится ссылка «Открыть PNG».

Открыть демо на весь экран

Зачем такая функция автомобильному бизнесу

Человеку проще обсуждать внешний вид на конкретном изображении. На сайте автоателье это может быть выбор цвета кузова или оклейки; для продавца аксессуаров — сравнение отделки. Сохранённую картинку можно самостоятельно отправить менеджеру привычным способом. В этом демо сайт ничего не отправляет и не создаёт заявку.

Для реального проекта сначала нужно определить, что именно выбирает покупатель: цвет, материал, комплектацию или набор услуг. От этого зависят каталог вариантов, изображения, связь с ценой и дальнейший шаг. Красивый экран сам по себе эти задачи не решает.

Что работает в концепте

  • Три цвета кузова: серебристый, бордовый и зелёный. Меняется область кузова; гараж, стекло, колёса и свет сохраняются.
  • Выбранный цвет сохраняется в этом браузере и восстанавливается при следующем открытии.
  • Кнопка создаёт PNG выбранного варианта с подписью цвета. На компьютере и телефоне используются соответствующие композиции изображения.
  • Режим «Чистый кадр» скрывает интерфейс; Escape возвращает его. Цвет можно выбрать и с клавиатуры.

Как устроена разработка

Основа — две созданные с помощью ИИ иллюстрации гаража: горизонтальная и вертикальная. JavaScript меняет пиксели кузова через маску в Canvas, сохраняя светлые блики и тёмные участки. Отдельная функция собирает постер в разрешении исходной композиции. Это 2D-визуализация, а не вращаемая 3D-модель и не точная симуляция автомобильной краски.

Los Santos Customs — фанатский контекст для авторского проекта SignM. Работа не является заказом автоателье, Rockstar Games или Take-Two и не связана с ними. Изображения созданы для этого концепта; игровые модели, текстуры, логотипы и саундтреки не извлекались. Реальный коммерческий проект потребует собственных изображений, названия и материалов бренда.

Что добавляется под настоящую задачу

Следующий этап может включать страницы услуг, реальные работы и фотографии, каталог покрытий, связь варианта с расчётом и обращением, аналитику действий и обработку запроса. Эти функции обсуждаются отдельно: в текущем концепте нет расчёта цены, CRM, отправки менеджеру, оплаты или подтверждённых показателей продаж.

Если нужен сайт автосервиса, автоателье или автомобильного каталога, посмотрите как мы разрабатываем сайты. Для обсуждения полезно описать услугу и то, что посетитель должен выбрать или сделать на сайте. Рассказать о задаче.