Программа "360° Product Viewer" для создания вращающихся изображений в формате HTML и GIF. Описание и рекомендации по применению

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

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

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

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

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

Для примера, возьмём серию изображений флакона с одеколоном, сфотографированных на поворотном столе. И на основе этих фотографий, с помощью программы "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 содержит лого производителя "360 by YoFla". Но эту надпись можно отключить.

Для этого откройте файл rotatetool.js для редактирования, например обычной программой "Блокнот".

Задайте поиск строки "360 by YoFla". Когда поиск покажет найденную надпись, просто удалите её, и сохраните изменения.

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

Можно поступить иначе - не удалять, а заменить надпись "360 by YoFla" на любую другую, например на ваш логотип или адрес вашего сайта. И тогда в окошке будет отображаться ваша надпись:

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

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

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

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

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

Программу 360° Product Viewer можно загрузить с сайта:
http://www.yofla.com/3d-rotate/download/

Оборудование для 3D фотографии. Поворотные столы для предметной 3D фотосъемки

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

Задайте вопрос по поворотным столам для 3D фотосъёмки: addspace@inbox.ru

Контакт:

Тел: 8(495)343-3242

Моб: 8-926-115-4991

E-mail: addspace@inbox.ru

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

Поворотный столик - подставка для блюд и тортов Lazy Susan