Программа "360° Product Viewer" для создания вращающихся изображений

Владельцам интернет-магазинов и фотографам: программа "360° Product Viewer" проста в освоении и удобна в работе

Перед началом работы с программой "360° Product Viewer"

Программа "360° Product Viewer" создана специально для "склейки" серии отдельных фотоизображений предмета в непрерывный ролик, показывающий предмет во вращении (виртуальный объект, VR, 3D фото). Программа теперь только платная.

Схема последовательности действий:

Исходные фотоизображения должны показывать предмет в разных фазах (ракурсах) вращения: либо полный оборот на 360 градусов, либо пол-оборота на 180 градусов (bounce).

Сфотографировать серию фотоизображений предмета во вращении удобнее всего с помощью специального поворотного стола для 3D фотосъёмки

Если вы фотографируете камерой смартфона или планшета на Android, то для съемки предметов на поворотном столе рекомендуем вам приложение Open Camera. Приложение позволяет вести съёмку серий кадров в автоматическом режиме с дистанционным управлением голосом или другим звуком, не касаясь устройства в процессе съёмки. Приложение Open Camera доступно бесплатно на Google Play.

Можно получить серию JPEG изображений предмета во вращении и другим способом: снять вращающийся предмет на видео, затем конвертировать видеофайл в серию отдельных кадров. Например, бесплатной программой Free Video to JPG Converter. Нужно только обрезать видеофрагмент до одного оборота предмета, убрав всё лишнее. Перед конвертацией выберите режим фиксированного количества фотоизображений, и тогда программа сформирует заданное число кадров JPEG, независимо от продолжительности видео. Удобно делать серии из 50 кадров, вращение получается достаточно плавным.

Для примера, возьмём серию изображений флакона с одеколоном, сфотографированных на поворотном столе. И на основе этих фотографий, с помощью программы "360° Product Viewer" создадим вращающийся 3D ролик в формате GIF, а затем в формате HTML.

Начинаем работать с программой "360° Product Viewer"

Запускаем программу. Вы увидите запрос на код лицензии. Если программа у вас не зарегистрирована, просто нажмите кнопку [Use free version]:

Основное окно программы выглядит так:

В разделе 1. Load Images вы видите окно загрузки изображений "Drop images here or click for load" в желтой рамке. Загрузим фотоизображения для обработки. Для этого в папке с исходными фотоизображениями выделяем все нужные файлы, и мышью втаскиваем их прямо в это окно:

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

После загрузки изображений экран выглядит так:

Настройки параметров будущего ролика

Переходим к разделу настроек 2. Adjust settings. Здесь вы можете настроить скорость вращения, указав время полного оборота предмета в секундах:

Предусмотрены ещё полезные дополнительные настройки, для этого нажмите кнопку [Advanced settings]:

На вкладке "Player" / "UI" вы можете включить или выключить различные кнопки управления вращением в ролике, а также увеличением картинки (UI означает "интерфейс пользователя"):

На вкладке "Player" / "Control" можно настроить характер управления мышью. Параметр "Drag Speed" определяет насколько послушно будет вращаться изображение при протаскивании по нему мышью. Оптимальное значение этого параметра: 0.2 или 0.3.
Галочка "Reverse Pointer Drag Direction" переключит направление вращения мышью на противоположное. Галочка "Mouse Wheel zooms" включит управление увеличением/уменьшением картинки с помощью колеса мыши:

На вкладке "Player" / "Rotation" можно включить/выключить автоматическое вращение, однократное или многократное вращение, изменить направление вращения:

Если вам нужно не полное вращение, а лишь качание предмета влево-вправо (ping-pong, bounce), то включите галочку "Bounce Rotation (if not a full 360 view)":

На вкладке "Output" / "Image Settings" можно настроить качество изображения (JPEG сжатие) и повышение резкости картинки (данная опция действует только для роликов в HTML формате):

Для возврата в основное окно программы нажмите кнопку [Return]:

Все основные настройки выполнены, переходим к разделу 3. Finish.

Ролик в формате GIF

Для создания ролика в формате GIF теперь достаточно выбрать "Animated Gif" и нажать кнопку [Create!]:

И будет создан файл GIF анимации в указанной вами папке. Остаётся только загрузить этот файл на ваш сайт и задача решена.

Ролик в формате HTML

Для создания ролика в формате HTML выберите "HTML" и так же нажмите кнопку [Create!]:

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

Выполняется обработка:

По окончании обработки перейдите в папку с созданным роликом:

В папке будет следующий набор файлов и вспомогательных папок:

Запустив файл index.html, вы увидите готовый ролик, и именно с теми настройками, которые вы сделали.

Как вставить вращающееся изображение на сайт

Есть несколько способов вставить готовые HTML ролики на страницы вашего сайта. Очень удобен для этих целей простой html-тег<iframe>. В этом случае картинки автоматически подгружаются на вашу страницу, и вы получаете окно с вращающимся в нём изображением. А папки с наборами файлов по каждому 3D изображению разместите в соответствующем разделе вашего сайта. Если назвать папки по артикулам товаров, то в дальнейшем вам будет проще ориентироваться.

Поручите эту работу вашему вебдизайнеру. Профессиональные рекомендации по вставке роликов на сайт есть на сайте компании YoFla (тексты на английском):
http://www.yofla.com/3d-rotate/support/manuals/

Дополнительные возможности программы "360° Product Viewer"

Можно менять цветовое оформление ролика:

Есть возможности настройки размера изображения, например подгонять изображение под дизайн вашего сайта:

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

Получение полусферических 3D изображений с помощью программы 360° Product Viewer

Программа 360° Product Viewer так же легко создаёт и полусферические 3D изображения, где предмет вращается не только по кругу, но и вверх-вниз (в рамках полусферы). Предмет можно рассмотреть и сбоку, и сверху, заглянуть во внутренние полости.

Пример полусферического 3D изображения (вращайте картинку мышью во всех направлениях):

Сначала предмет фотографируется на поворотном столе с разными наклонами камеры относительно плоскости вращения стола. Результат съемки - это несколько серий (рядов) фотографий предмета во вращении. Серии показывают предмет с разных точек зрения - от фронтального бокового вида до вида сверху.

Чтобы получить полусферическое 3D изображение, в настройках указываем программе, что количество рядов изображений "Vertical Steps" будет больше единицы (пишите столько, сколько рядов вы отсняли). И можно задать количество кадров в ряду (кадров на один оборот предмета) "Horizontal Steps":

Загруженные фотоизображения будут расставлены по "столбцам" и "рядам". Переход от картинки к картинке в одном ряду создаёт ощущение вращения предмета, а движение по столбцу вверх-вниз меняет угол наклона предмета. После обработки программой столбцы дадут движение предмета мышкой по вертикали, а ряды - по горизонтали.

Сайт разработчика: yofla.com

А есть ли другое, полностью бесплатное решение без ограничений? Да. Вы можете опробовать эту технологию: Вращение на JavaScript

Можно ли сделать проще?

Можно просто снять видео вращающегося объекта, зациклить это видео и получить аналогичный результат. Вращение на видео выглядит более плавным. Один видеофайл mp4 обычно весит меньше, чем серия фотоизображений JPEG. Но такое вращение уже не будет управляемым!

Пример зацикленного видео:

Подробнее о видео 360° с непрерывным вращением

Короткие видео

Короткие "живые" видеоролики с бесконечным движением тоже отлично показывают ваш товар. Вращение объекта неполное, но выразительное.

Короткие видео делать проще, файлы получаются меньше.

Подробнее о коротких видео

Другие способы получения изображений, вращающихся на 360°

Общие рекомендации: способы получения крутящихся изображений, съемка, освещение, софт и т.д.

3D съемка предметов смартфоном с помощью Open Camera

Анимация вращения из серии фото:

- GIF анимация онлайн

- GIF анимация из фотографий бесплатной программой PhotoScape

- GIF анимация программой UnFREEz

- HTML5 анимация программой Object2VR

- Интерактивное вращение пальцем и мышью на JavaScript: готовое решение (бесплатно) для вашего сайта

Анимация вращения из видео:

- GIF анимация из видео программой ThunderSoft Video to GIF Converter

- GIF анимация бесплатной программой Free Video to GIF Converter

- GIF анимация из отснятого видео онлайн

- Управляемое вращение из видео (Free Video to JPG Converter + HTML5)

Бизнес для вас!

Для удобства фотосъемки предметов в разных фазах (ракурсах) вращения предлагаем вам специальное оборудование:

Поворотные столы для предметной 360° съемки

Аккуратно и качественно сфотографировать предметы во вращении помогут вам специализированные поворотные столы для 360° фотосъемки:

Нужна консультация по поворотному столу? Ответим на ваши вопросы:

Другие виды нашей продукции:

Напольные поворотные платформы

Детали для сборки поворотных подиумов большого диаметра

Крутящийся центр стола Lazy Susan. Вращающийся столик-подставка для блюд и тортов

Сделать крутящийся центр стола своими руками? К вашим услугам детали для самостоятельной сборки