"Оживляем" картинку с помощью AnnotateRro

При регистрации указываем своё имя, адрес электронной почты, придумываем пароль. Доступна регистрация с использованием аккаунта Google.

Загружаем фоновое изображение

После успешной регистрации мы оказались в рабочем кабинете. Нужно выбрать шаблон "AnnotatePro" из меню слева. Это последняя кнопка на панели инструментов.

Чтобы приступить к творчеству, нажимаем на большой значок "+" в левом верхнем углу.

Теперь - "Select Image" и загружаем с компьютера фоновое изображение.

Сервис тут же предложит обрезать фотографию. Для этого нужно переключиться в режим "Crop Mode". По умолчанию он отключён (Off). Если редактировать картинку не надо, идём дальше - нажимаем "Next".

Ещё сервис посоветует увеличить или уменьшить размер изображения или повернуть его вокруг своей оси. Чтобы уже наконец загрузить картинку, нажимаем "Upload".

И сразу за этим - большую кнопку в центре экрана - "Annotate Image". После этого в новой вкладке откроется конструктор для добавления интерактивных меток.

Добавляем интерактивные метки

Вверху располагается наше изображение. Внизу - панель инструментов с объектами, которые можно добавить на картинку. Здесь представлены три набора инструментов. Первый набор (Components) включает в себя стрелки, линии, круги и другие фигуры, в том числе анимированные (помечены надписью "Anim"). Здесь же кнопки для добавления поверх изображения других картинок (Image) и текста (Text). Хотите порисовать? Для этого есть опция "Draw". По умолчанию она отключена (Off).

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

В разделе "Stickers" можно прикрепить к картинке необычные надписи, стрелочки, смайлики, стикеры.

Чтобы добавить любой объект, "мышью" перетягиваем его в нужное место на картинке. Удаляем нажатием клавиши "Delete".

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

У текста тоже есть несколько настроек. Можно менять шрифт, стиль, расположение текста, выбирать фон. Будьте осторожны! Не все шрифты поддерживают кириллицу.

Добавляем интерактивность

Выбрав метку или объект, щёлкаем слева внизу кнопку "Add Interaction", после чего нам открывается окно для выбора того, что же мы хотим прикрепить к этой интерактивной метке. Доступны такие варианты: текст, ссылка, изображение, Youtube-ролик, точка на карте.

Так прикрепляется картинка. Можно добавить небольшое описание. Если картинка очень большая, можно вручную уменьшить её размеры. Порядок нажатия клавиш: Add Image - Upload - Save.

Ссылки к меткам добавляем не правой клавишей "мыши", а через сочетание клавиш "Ctrl+V".

А это форма для добавления карты. Название географического объекта можно писать и на русском, и на английском языке.

На готовом интерактивном плакате лучше всего, наверное, смотрятся карты и видео с Youtube. Ссылка выглядит не очень красиво, а текст по умолчанию небольшого кегля и на сером фоне.

Правда, это всё можно настроить. Для этого в режиме редактора интерактивности надо нажать внизу на кнопку "Customize Popup Style".

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

Распространение

Полученный результат сохраняем кнопкой "Save" (сверху слева).

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

Через кнопку «Share» мы делимся со зрителями готовой работой. Находится она во вкладке "Project" вверху слева.

Сначала нужно опубликовать интерактивный плакат - нажимаем "Share Publicly".

А теперь можно получить прямую ссылку на интерактивное изображение или код для вставки его на сайт и в блог. Нажимаем "Create" -

и копируем то, что нужно. Чтобы плакат вписался в блог или на сайт, в коде можно подкорректировать его ширину и высоту.

Небольшие хитрости

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

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

3. Если у вас есть аккаунт Google, то можно через него подключить приложение AnnotatePro и сохранять готовые работы на своём Google. Сделать это можно прямо из Google Диска, нажав "Создать" - "Ещё" - "Подключить другие приложения". А можно сделать это, воспользовавшись вот такой ссылкой.

Удачных интерактивностей!