технология

Делаем интерактивную фотографию

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

Несколько примеров, когда уместно использовать интерактивную фотографию:

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

Сделайте интерактивное фото на сервисе genial.ly. На бесплатном аккаунте можно создавать неограниченное количество форматов, но не все возможности будут доступны.

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

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

Прежде чем приступать к работе на сервисе, проведите подготовительную работу.

  1. Выберите фотографию, на которую нужно добавить интерактивные метки.
  2. Наберите в Word (или другом текстовом редакторе) тексты для меток. Они должны быть короткими, без воды. Пары предложений достаточно. Проверьте на ошибки.
  3. Подберите при необходимости дополнительные фотографии или видео, которые разместите в метке.

Открывайте сервис genial.ly. Чтобы в нем работать, нужно зарегистрироваться. Авторизоваться можно через свой аккаунт в Google, Фейсбуке, Твиттере, LinkedIn. Обязательно укажите, что согласны с условиями использования и политикой конфиденциальности (кликните рядом с фразой «I have read and accept the terms of use and privacy policy of Genially»).

Укажите, для чего вы используете сервис (для образования, для медиа).

После регистрации вы попадете в личный кабинет. Выбирайте формат, который хотите использовать. Так как мы создаем интерактивное фото, то наведите на Interactive image и кликните Create (создать).

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

Фотография откроется в редакторе. Инструменты находятся в колонке слева. При необходимости добавляйте на фотографию текст, иконки, иллюстрации (например, логотип компании).

Интерактивные метки (interactive elements) четвертые сверху. Выбирайте подходящие метки и кликните на них. Они автоматически встанут на фото. Двигайте метки на подходящее для них место. Метки можно увеличивать и уменьшать.

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

  • tooltip — информация появится при наведении на метку;
  • window — информация появится после того, как пользователь кликнет на метку;
  • link — при клике на метку в новой вкладке откроется сайт.

Выбирайте тип интерактивности, кликайте на него. Всплывет окно, куда из текстового файла вставляйте текст метки. Здесь же можно изменить шрифт, его размер, добавить смайлик, фото, видео, код на мультимедиа (например, на интерактивную карту, инфографику, опрос, тест, голосование).

Нажимайте Save.

Второй значок у метки позволяет сделать ее анимированной.

Добавив все метки на фотографию, в правом верхнем углу нажимайте ALL SET (все готово). Всплывет окно, где надо выбрать, что сделать с результатом:

  • view — вы получите ссылку, которой сможете поделиться;
  • share — вы получите код, чтобы добавить интерактивную фотографию на свой сайт;
  • download — позволяет скачать результат, но функция доступна только на платном аккаунте.

Из книги «92 мультимедийных формата»:

«Интерактивное фото похоже на путешествие с гидом или путеводителем: посмотрите направо, посмотрите налево. Мы не просто видим целую картинку, но по клику можем узнать подробности о каждом из её элементов».

Рекомендации по созданию интерактивной фотографии.

  • Не ставьте метки в первое попавшееся место. Информация в ней должна соотносится с основной фотографией и рассказывать один факт/событие/фрагмент.
  • Не лепите метки друг на друга, не делайте их разноцветными. Старайтесь делать не меньше 5 меток, но и не больше 25.

С помощью этой технологии были реализованы следующие проекты

Над материалом работала
Ольга Бердецкая

Иллюстрации:
скриншоты сервиса genial.ly.

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!