Как сделать интерактивную фотографию. Gigapixel

Просто добавляете контент — текст, иллюстрации — и передвигаете маркер для него в нужную точку изображения

Прокладываем маршруты по фотографиям достопримечательностей и художественным полотнам с функцией Gigapixel от Knight Lab.

МОЖНО СДЕЛАТЬ
ИСПОЛЬЗУЕТСЯ В:

Популярный ресурс Storymap.knightlab.com, кроме, собственно, работы с картами, имеет еще одну функцию, которую стоит рассмотреть отдельно — это Gigapixel. Если в картах пользователь перемещается по некоторому географическому маршруту, следуя от одной отметки до другой, и просматривает привязанный к ним контент, то здесь в роли карты выступает изображение. Логика «маршрута» при этом остается прежней.

Зачем?

Слово «полотно» появилось здесь неслучайно. Первый вариант использования «Gigapixel», который напрашивается сам собой — это виртуальные «экскурсии» по картинам художников. В самом деле, именно их мы можем рассматривать столь пристально, что будем останавливаться на том или ином фрагменте, сопровождая его дополнительными пояснениями. Они могут быть, например, в формате видео с Youtube, где о деталях произведения рассказывает известный искусствовед.

Второй вариант, как может быть применен «Gigapixel», близок первому — анализ различных исторических документов и фотографий, например, исторических памятников. В случае с ними также важно объяснять, какой смысл несет в себе определенный участок изображения. Аналогичным образом включая в это объяснение самые разнообразные типы контента.

Наконец, отметим такую возможность использования «Gigapixel» как виртуальные экскурсии по достопримечательностям, которые запечатлены на фотопанораме местности, сделанной в очень высоком разрешении и выгодном ракурсе.

Подготавливаем панорамное фото

Чтобы попробовать себя в роли искусствоведа-экскурсовода, отправляемся на Storymap.knightlab.com и жмем большую зеленую кнопку по центру экрана. Для работы с сервисом подключаем свой аккаунт на Google, указываем название и создаем проект. Нам заботливо подсказывают, что если нужен «Gigapixel», прежде всего, нужно зайти в «Options» в левом верхнем углу окна и в пункте «Map Type» выбрать именно его.

После этого в окне настроек появятся дополнительные поля.

На одном из них необходимо остановиться подробнее. Речь о Zoomify URL, так как это не просто название очередного веб-сервиса.

Для полноценной работы с «Gigapixel» понадобятся изображения в очень высоком разрешении. В самом деле — вы же хотите увеличивать отдельные их фрагменты для того, чтобы указывать на какие-то важные детали, тем более, добавлять к ним аннотации. Такие файлы могут быть очень большими, достигая по объему гигабайта. А теперь представьте, как в этом случае вы будете работать с подобным размером? И как и сколько по времени пользователь будет загружать иллюстрацию при открытии? Поэтому прежде чем приступить к разметке изображения, его потребуется разобрать на небольшие фрагменты, которые уже затем, в свою очередь, будут автоматически подгружаться при переходе к тому или иному его участку.

Для этого существуют специальные приложения и сервисы. «Storymap» отсылает нас к «Zoomify».

«Zoomify» — коммерческий продукт, однако для наших целей будет достаточно и его бесплатной версии — «Free Converter». Это приложение, которое потребуется установить на ПК, скачать его можно с сайта Zoomify. Доступны варианты загрузки для Windows и Mac, если у вас Linux, выберите первый вариант и установите его через Wine. После установки и запуска приложения нужно будет указать в памяти компьютера файл-изображение (то, которое нужно раздробить), и программа разложит его по отдельным файлам и папкам, они появятся в том же местоположении.

Но и это еще не все. «Storymap» не будет хранить эти данные на своих серверах, поэтому дальше нам понадобится загрузить их куда-то на ваш сайт, потому как, обратите внимание на подсказку в поле Zoomify URL, там указана следующая строчка: http://www.domain.org/directory.

Если у вас есть сайт — не страничка на блог-хостинге или в социальных сетях, а именно свой ресурс на отдельном хостинге, то сейчас остается только загрузить полученные файлы и папки на сервер, позаботившись о том, чтобы они были доступны для просмотра всем пользователям.

Если же нет, то не стоит отчаиваться в этот момент и забрасывать идею «гигапиксельного путешествия». Бесплатный хостинг появится у вас прямо сейчас, мы покажем, как и где его можно получить.

Бесплатный хостинг для гигапиксельной фотографии

Не будем долго исследовать результаты поисковиков по запросу «бесплатный хостинг», отправимся к популярному международному провайдеру — Hostinger. На бесплатном аккаунте будет доступно 2 гигабайта с возможностью доступа по FTP — именно так вы и сможете закачать свои папки с фрагментами изображения. Единственное, за что вам здесь придется заплатить — это за активацию аккаунта, для этого нужно будет отправить смс стоимостью до 50 рублей на короткий номер. Это не опасно, мы проверяли.

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

Жмем на кнопку «Начать» на главной странице, дальше выбираем бесплатный аккаунт, заказываем его и оформляем через регистрацию. Панель управления здесь полностью переведена на русский язык, поэтому проблем в работе с ней возникнуть не должно. Если вы немного знакомы с принципами создания сайтов, то знаете, что кроме хостинга вам понадобится еще доменное имя — иными словами, адрес вашего ресурса. Здесь можно остановиться тоже на бесплатном варианте.

После того, как ваш аккаунт готов, осталось найти в разделе «Файлы» пункт для создания ftp-доступа, сделать его и закачать файлы на хостинг. Если вы специально не заводили отдельных папок под файлы для «Гигапикселя», значит искомый «Zoomify URL» — это просто ваш домен (адрес), который вы привязывали к хостингу.

Размечаем фотографию в Gigapixel

Первым делом при работе с «Gigapixel» нужно задать правильное разрешение изображения — иначе оно может отображаться неверно. Настройки находятся в «Options» — «Max image size». Посмотрите на разрешение оригинальной картинки и задайте здесь соответствующую пропорцию — либо тот же размер.

В остальном принципиальных различий с работой в «Storymap» с картами и «Gigapixel» нет. Алгоритм остается тем же — только вам не нужно искать точку на карте через поиск. Просто добавляете контент — текст, иллюстрации — и передвигаете маркер для него в нужную точку изображения. Внимательнее отнеситесь здесь к масштабу — если необходимо, чтобы по клику на маркере пользователь увидел крупный план того или иного объекта, выставлять маркер на этом объекте нужно в том же масштабе (его можно менять кнопками «+» или «-»).

Над материалом работали:
Владимир Волкоморов
Иллюстрации:
скриншоты сервиса Gigapixel
Инструкция актуальна:
на октябрь 2017 года

Подводя итоги:

1
подготовьте изображение
2
подробно опишите детали
3
добавьте информацию на фото