Как стать автором
Обновить

Простая идея визуализации настенных обоев в интерьере для Интернет-магазинов отделочных материалов

В последнее время набирает популярность продажа настенных обоев через Интернет-магазины.
Но, тем не менее, не каждый решится на такую покупку, не видя эти обои в глаза, не представляя, как они будут смотреться в его интерьере. Конечно, для некоторых моделей производители предоставляют изображения в интерьере, но их не так уж и много в отдельно взятой коллекции обоев. В поисках ответа на вопрос, как можно помочь покупателю определиться с выбором, было найдено простое и интересное решение.

Реализация

Берем картинку интерьера (снимок 3D-модели или просто фотография комнаты, спальни, гостиной с обоями).

Исходное изображение интерьера с обоями

В программе Photoshop вырезаем настенные обои, оставляя на их месте прозрачный фон, сохраняем изображение в gif или png. В итоге у нас есть шаблон интерьера. Его можно "заклеить" теми или иными настенными покрытиями, в нашем случае обоями.

Шаблон интерьера для настенных обоев

Что дальше? Обычно картинки обоев выполнены в виде прямоугольника с раппортом, то есть содержат узор,

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

То есть берем html-элемент div, ставим в фон ему уменьшенную картинку обоев (thumbnail), которая обычно используется на странице списка обоев,

Уменьшенная картинка обоев

и размножаем её через свойство фона (background-repeat).

Целостное полотно из картинки настенных обоев

Внутрь этого элемента помещаем элемент img с нашим шаблоном интерьера, который в итоге будет отображаться поверх div. При этом под прозрачной областью шаблона будет отображаться часть стены из обоев.

Готовый вариант выбранных обоев в шаблоне интерьера

Ниже представлена часть возможного twig-шаблона для реализации:

<style>
  .inter {
    width: 600px; // размеры img и фонового div должны совпадать
    height: 600px;
  }

  div.inter {
    background: url('{{ path_to_selected_img_wallpaper }}') repeat white;
  }
</style>

<div class="inter"><img class="inter" src="{{ path_to_tpl_interior }}'"/></div>


Готовое решение можно посмотреть здесь.

Итоги

Преимущества этого решения в его простоте в реализации и минимальному требованию к ресурсам. Нет необходимости хранить на сервере картинки в интерьере для всех товаров, как результат отсутствует лишний трафик. Вся работа происходит на стороне клиента в браузере, моментально и, практически, без нагрузок отображается готовый вариант. При этом почти каждая картинка обоев может быть представлена на стене (исключение, например, те обои, фотографии которых сделаны с падающим на них со стороны светом для демонстрации игры света). Достаточно иметь несколько типовых шаблонов интерьеров, подобранных согласно аудитории Интернет-магазина. Эта идея может быть применима не только к обоям, а также к плитке, мозаике.

Из недостатков стоит отметить, что могут быть несовпадения с реальными размерами узора, неточности оттенков при падающем свете, обусловленные исходным рисунком или цветопередачей монитора, отсутствие реалистичности (светлые или темные зоны на стене в зависимости от освещения комнаты, хотя тени можно показать на прозрачном фоне, но это немного "мрачнит" интерьер). Поэтому и используется словосочетание " представление" в интерьере. Кроме того у неё существует ограничение – только 2D расположение ключевой стены, на которой располагается покрытие. 3d-визуализация в браузере (например, визуализатор инструмент от Borastapeter или 3d-конструктор Autodesk Homestyler) требует больше усилий пользователя и ресурсов браузера.

Возможно, эта простая идея сделает более понятным и доступным для посетителей Интернет-магазинов такой товар, как настенные обои.
Теги:
Хабы:
Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.