Простая идея визуализации настенных обоев в интерьере для Интернет-магазинов отделочных материалов
Invite pending
В последнее время набирает популярность продажа настенных обоев через Интернет-магазины.
Но, тем не менее, не каждый решится на такую покупку, не видя эти обои в глаза, не представляя, как они будут смотреться в его интерьере. Конечно, для некоторых моделей производители предоставляют изображения в интерьере, но их не так уж и много в отдельно взятой коллекции обоев. В поисках ответа на вопрос, как можно помочь покупателю определиться с выбором, было найдено простое и интересное решение.
Берем картинку интерьера (снимок 3D-модели или просто фотография комнаты, спальни, гостиной с обоями).
В программе Photoshop вырезаем настенные обои, оставляя на их месте прозрачный фон, сохраняем изображение в gif или png. В итоге у нас есть шаблон интерьера. Его можно "заклеить" теми или иными настенными покрытиями, в нашем случае обоями.
Что дальше? Обычно картинки обоев выполнены в виде прямоугольника с раппортом, то есть содержат узор,
который можно стыковать с самим собою как вертикально, так и горизонтально,
получая целостное полотно.
То есть берем html-элемент div, ставим в фон ему уменьшенную картинку обоев (thumbnail), которая обычно используется на странице списка обоев,
и размножаем её через свойство фона (background-repeat).
Внутрь этого элемента помещаем элемент img с нашим шаблоном интерьера, который в итоге будет отображаться поверх div. При этом под прозрачной областью шаблона будет отображаться часть стены из обоев.
Ниже представлена часть возможного twig-шаблона для реализации:
Готовое решение можно посмотреть здесь.
Преимущества этого решения в его простоте в реализации и минимальному требованию к ресурсам. Нет необходимости хранить на сервере картинки в интерьере для всех товаров, как результат отсутствует лишний трафик. Вся работа происходит на стороне клиента в браузере, моментально и, практически, без нагрузок отображается готовый вариант. При этом почти каждая картинка обоев может быть представлена на стене (исключение, например, те обои, фотографии которых сделаны с падающим на них со стороны светом для демонстрации игры света). Достаточно иметь несколько типовых шаблонов интерьеров, подобранных согласно аудитории Интернет-магазина. Эта идея может быть применима не только к обоям, а также к плитке, мозаике.
Из недостатков стоит отметить, что могут быть несовпадения с реальными размерами узора, неточности оттенков при падающем свете, обусловленные исходным рисунком или цветопередачей монитора, отсутствие реалистичности (светлые или темные зоны на стене в зависимости от освещения комнаты, хотя тени можно показать на прозрачном фоне, но это немного "мрачнит" интерьер). Поэтому и используется словосочетание " представление" в интерьере. Кроме того у неё существует ограничение – только 2D расположение ключевой стены, на которой располагается покрытие. 3d-визуализация в браузере (например, визуализатор инструмент от Borastapeter или 3d-конструктор Autodesk Homestyler) требует больше усилий пользователя и ресурсов браузера.
Возможно, эта простая идея сделает более понятным и доступным для посетителей Интернет-магазинов такой товар, как настенные обои.
Но, тем не менее, не каждый решится на такую покупку, не видя эти обои в глаза, не представляя, как они будут смотреться в его интерьере. Конечно, для некоторых моделей производители предоставляют изображения в интерьере, но их не так уж и много в отдельно взятой коллекции обоев. В поисках ответа на вопрос, как можно помочь покупателю определиться с выбором, было найдено простое и интересное решение.
Реализация
Берем картинку интерьера (снимок 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) требует больше усилий пользователя и ресурсов браузера.
Возможно, эта простая идея сделает более понятным и доступным для посетителей Интернет-магазинов такой товар, как настенные обои.