Чего он только не умеет создавать! Презентации, игры, викторины, инструкции, видеопрезентации, квесты, флеш-карточки… А среди прочего — ещё и инфографику. Да не простую, а интерактивную.
Заходим на сайтGenially,нажимаем «Sign Up» или «Start now. It’s free!» — и сразу заполняем форму для регистрации. В дальнейшем для входа на сайт можно нажимать «Login».
Обладатели аккаунтов Google могут зарегистрироваться в сервисе через них.
А можно пойти традиционным путём — зарегистрироваться с помощью электронной почты (Sign up with your email).
При регистрации надо указать адрес электронной почты, придумать пароль, поставить галочку напротив «I have read and accept Genially’s terms of use and privacy policy», а потом нажать «Sign up».
После этого ищем на почте письмо от создателей сервиса для подтверждения аккаунта: нужно перейти по указанной в нём ссылке.
Дальше нажимаем на кнопку «You’re all set».
А дальше придётся ответить на несколько вопросов.
Во-первых: какой аккаунт будет создан – образовательный или корпоративный. Выбираем «Education» и нажимаем «Continue».
Указываем свою профессию, например, «Teacher».
Выбираем учебное заведение, в котором работаем.
Ещё сервис предложит назвать свою организацию, но можно этот шаг пропустить (Skip this step), что я и сделала.
И вот теперь можно наконец приступить к созданию первого проекта: нажимаем «Start».
Загружаем изображение
А дальше из меню выбираем шаблон для создания инфографики — «Infographics» — и нажимаем «Create».
Приступаем к выбору шаблона. Все заготовки собраны в три категории: есть шаблоны для горизонтальной инфографики (Horizontal infographics), для вертикальной инфографики (Vertical infographics) и для диаграмм (Diagrams).
Часть шаблонов — платная. С помощью фильтра вверху, можно оставить для выбора только бесплатные: нажав на стрелку, в выпадающем списке оставляем «галочку» только напротив слова «Free».
Выбираем подходящий шаблон и нажимаем на кнопку «Use this Templates».
Интерактивные метки и другие объекты
Переходим к редактору инфографики. В центре экрана — выбранный шаблон.
Слева сбоку — инструменты для добавления разных интерактивностей. В правом верхнем углу — очень полезная кнопка «Предпросмотр» (с изображением глаза) для предварительного просмотра инфографики.
В графу с названием шаблона вписываем название работы.
Летим осматривать кнопки для добавления объектов.
Кнопка «Text» добавляет в инфографику разные тексты: и помельче, и покрупнее, и даже списки. Если выбрать один из текстовых шаблонов, откроется дополнительный редактор для набора текста, выбора его цвета, размера и шрифта.
Надписи, которые уже есть в шаблоне, можно заменить на свои: просто щёлкаем по ним два раза, удаляем прежний текст и вставляем новый.
Осторожно, не все шрифты поддерживают кириллицу! Вот список тех, кто дружит с русским языком (листаем слайды).
Добавляем картинки через кнопку «Image». У сервиса есть небольшая библиотека, а с ПК загружаем картинки весом не более 5 мегабайт.
На верхней панели инструментов есть кнопки для того, чтобы обрезать изображение, сделать его полупрозрачным, добавить к нему рамку.
Картинки, которые уже есть в шаблоне, можно заменить на свои. Для этого щёлкаем по изображению, нажимаем на кнопку «Replace» и загружаем новую картинку.
Кнопка «Resources» добавляет разные геометрические фигуры, иконки, картинки, гифы, линии и карты из большой библиотеки сервиса. Иконки и формы можно перекрашивать и заменять (через кнопку «Replace»).
Смарт-блоки – это соединения графики и текста: готовые диаграммы, блок-схемы, графики. Их можно найти в одноимённом разделе — «Smartblocks».
Редактор такой же, как и при редактировании текста или изображений.
Чтобы добавить диаграмму или график с данными, заполняем таблицу, и сервис автоматически сгенерирует объект.
А вот и раздел «Interactive elements». Он добавляет на плакат разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, маркеры с текстом и цифрами, логотипы.
Можно даже невидимые метки создавать! Делается это в разделе «Interactive area».
Кнопка «Insert» добавляет встраиваемые объекты: Google-карты, документы и презентации, видео с YouTube и Vimeo, аудио и многое-многое другое…
В разделе «Audio» можно добавить аудиотрек по ссылке, а можно подключить микрофон и сделать аудиозапись онлайн, чтобы прикрепить её к инфографике.
К сожалению, свой трек загрузить с ПК нельзя — это платная опция.
В разделе «Video» добавляем видеофайлы по ссылке — с сервисов YouTube, Vimeo и Google Drive.
Ну и в разделе «Others» добавляем любые встраиваемые объекты — по ссылке или по коду.
Хотите изменить фоновое изображение? Нажимаем «Background». Чтобы загрузить новую картинку, жмём на значок со стрелкой. А можно вообще сделать фоновое изображение однотонным.
Чтобы сделать инфографику многостраничной, выбираем в меню «Pages», а потом «Add page».
В разделе «My creations» выбираем нужную инфографику, уже созданную в сервисе, и нажимаем «Add».
Кстати, вместо другой инфографики можно вставить шаблон из библиотеки сервиса, а потом наполнить его своим содержанием (раздел «Template»).
Удобно использовать шаблон «Blank» — это пустой слайд, на который можно, «не отходя от кассы», разместить свои интерактивные объекты и фоновые картинки.
И ещё одна опция, о которой я чуть не забыла: можно добавить к инфографике фоновую музыку. Для этого нажимаем на кнопку «Add background audio».
В бесплатном аккаунте музыкальный трек или озвучку можно добавить по ссылке или записать их с помощью микрофона онлайн.
Добавляем интерактивность
Любой объект, который мы добавили в инфографику (текст, изображение, метку), можно сделать интерактивным. Для этого щёлкаем по нему «мышкой» — и сразу появляются изображения «пальца» и «кометы» (ну я так думаю, что это комета, может, и ошибаюсь, может, это метеорит).
Если нажать на «пальчик» – можно перейти к добавлению контента. Если на значок с «кометой» – анимировать этот объект.
Давайте попробуем прикрепить интерактив к метке.
Итак, какие интерактивности нам предложит Genially?
«Tooltip» поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).
«Window» создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.
«Link» превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.
«Go to page» тоже превратит метку в интерактивную кнопку, только зритель отправится не на другой сайт, а на другую страницу с новым интерактивным изображением.
«Full screen» подходит только для картинок, эта опция открывает изображения на весь экран.
«Audio» проигрывает добавленный в сервис аудиотрек.
«Reveal» — новая «фишка» сервиса. При нажатии на метку с этой опцией на экране появится новый объект, до этого скрытый.
Окошки«Tooltip» и «Window» очень похожи.
Вверху находится поле для редактирования текста и добавления медиа. Можно вставить гиперссылку, картинку, таблицу, видео.
Для «Window» можно выбрать размер окна: большое (Large), среднее (Medium) или маленькое (Small).
Интересная кнопка с косыми скобками: она открывает html-разметку и позволяет добавить любой объект по коду для встраивания.
Например, создан аудиоплеер в каком-либо сервисе, и мы получили код для его встраивания.
Нажимаем на значок с косыми скобками и вставляем код в нужное место (код выделен синим цветом).
Затем повторно нажимаем на кнопку и возвращаем окно в исходный вид. Теперь в нем появится встроенный объект. Чтобы сохранить интерактив, нажимаем «Save».
Вернёмся к нашим интерактивностям. Опция «Go to page» настраивает переход между страницами многостраничной инфографики.
Выбираем нужную страницу для перехода в разделе «Pages» и нажимаем «Save». В разделе «Actions» есть несколько «быстрых» кнопок, чтобы добавить переход на первый или последний слайд, вперёд и назад.
А эта опция «Link», которая добавляет ссылки на веб-ресурсы. Не забываем нажать «Save».
Интерактивность «Full screen» лучше всего подходит не для меток, а для картинок. Она помогает открыть изображение на весь экран. Ничего особого делать не надо, просто выбираем эту опцию и нажимаем «Save».
Интерактивность «Audio» запускает аудиофайл, который можно тут же добавить по ссылке или записать онлайн с помощью микрофона. К сожалению, загрузить свой трек с ПК не получится — это платная опция.
Ну и наконец, интерактивность «Reveal» поможет «спрятать» объект на плакате, а потом при нажатии на метку его открыть.
Выбираем эту опцию, а дальше, чтобы выбрать объект, который надо спрятать, нажимаем «Select».
Щёлкаем по выбранному объекту (у меня это картинка) и нажимаем «Accept». Дело сделано!
Настраиваем анимацию
Помните про значок с «кометой», который появляется при нажатии на любую метку или объект на плакате? С его помощью можно добавить анимацию.
Анимация может быть разная: появление (Enter), исчезание (Exit), совершение каких-то действий, например, вращение (Continuous), действия при наведении курсора (Hover mouse) и клике «мышкой» (Click).
Внутри каждого раздела большое количество видов анимации (Effect). Можно выбрать направление движения (Direction) и даже скорость.
Дополнительный бонус — анимация при перелистывании слайдов, если плакат многостраничный.
Настраиваем её, нажав на значок «волшебная палочка» рядом с каждым слайдом в разделе «Page». Выбранную анимацию можно применить ко всем слайдам (Apply to all slides).
Публикация
Инфографика создана. Сохраняем её с помощью волшебной кнопки «All set!».
В открывшемся окошке даём название инфографике, добавляем описание и, если нужно, даём разрешение другим пользователям сервиса создавать ремиксы на нашу работу. Снова нажимаем «All set!»
Теперь можно просмотреть инфографику, развернув её на весь экран (Present), а можно сразу нажать «Share», чтобы поделиться созданной работой.
Можно получить ссылку (вкладка «Link») или код, чтобы встроить инфографику на страницу блога или сайта (вкладка «Insert»).
Но это ещё не всё!
Среди «плюсов» сервиса — возможность устроить коллективную работу по созданию интерактива. Можно добавить других участников и пригласить их для работы (только чур — пусть сначала зарегистрируются в сервисе). Как это сделать?
Возвращаемся в свой личный кабинет, где хранятся все созданные работы, нажав на логотип сервиса в верхнем левом углу. Выбираем нужную и нажимаем на значок «человечек с плюсом» (Collaborators).
В открывшееся окошко вносим адреса электронной почты своих будущих соавторов и нажимаем «All set».
Готово! Приглашенный участник получит ссылку для редактирования и… море удовольствия от работы в сервисе.
Здесь же, в личном кабинете, нажав на значок с тремя точками (Options), можно вернуть работу в состояние черновика, переименовать, дублировать её или удалить. Остальные опции платные.
Чтобы вернуться к редактированию работы, наводим на неё курсор и нажимаем «Edit».
