Чего он только не умеет создавать! Презентации, игры, викторины, инструкции, видеопрезентации, квесты, флеш-карточки… А среди прочего — ещё и инфографику. Да не простую, а интерактивную.
Заходим на сайтGenially,нажимаем «Sign Up» или «Get started — 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».
Приступаем к выбору шаблона. Все заготовки собраны в три категории: есть шаблоны для горизонтальной инфографики (Horizontal infographics), для вертикальной инфографики (Vertical infographics) и для диаграмм (Diagrams).
Часть шаблонов — платная. С помощью фильтра вверху, можно оставить для выбора только бесплатные: нажав на стрелку, в выпадающем списке оставляем «галочку» только напротив слова «Free».
Выбираем подходящий шаблон, для просмотра нажимаем на кнопку «View Template».
У некоторых шаблонов можно изменить цветовую гамму. Чтобы приступить к редактированию, нажимаем на кнопку «Use this Templates».
Интерактивные метки и другие объекты
Переходим к редактору инфографики. В центре экрана — выбранный шаблон.
Слева сбоку — инструменты для добавления разных интерактивностей. В правом верхнем углу — очень полезная кнопка «Предпросмотр» (с изображением глаза) для предварительного просмотра инфографики.
В графу с названием шаблона вписываем название работы.
Летим осматривать кнопки для добавления объектов.
Кнопка «Text» добавляет в инфографику разные тексты: и помельче, и покрупнее, и даже списки. Если выбрать один из текстовых шаблонов, откроется дополнительный редактор для набора текста, выбора его цвета, размера и шрифта.
Надписи, которые уже есть в шаблоне, можно заменить на свои: просто щёлкаем по ним два раза, удаляем прежний текст и вставляем новый.
Осторожно, не все шрифты поддерживают кириллицу! Вот список тех, кто дружит с русским языком (листаем слайды).
Добавляем картинки через кнопку «Image». У сервиса есть небольшая библиотека, а с ПК загружаем картинки весом не более 5 мегабайт.
На верхней панели инструментов есть кнопки для того, чтобы обрезать изображение, сделать его полупрозрачным, добавить к нему рамку.
Картинки, которые уже есть в шаблоне, можно заменить на свои. Для этого щёлкаем по изображению, нажимаем на кнопку «Replace» и загружаем новую картинку.
Кнопка «Resources» добавляет разные геометрические фигуры, иконки, картинки, гифы, линии и карты из большой библиотеки сервиса. Иконки и формы можно перекрашивать и заменять (через кнопку «Replace»).
Смарт-блоки – это соединения графики и текста: готовые диаграммы, блок-схемы, графики. Их можно найти в одноимённом разделе — «Smartblocks».
Редактор такой же, как и при редактировании текста или изображений.
Чтобы добавить диаграмму или график с данными, заполняем таблицу (вкладка «Content»), и сервис автоматически сгенерирует объект.
Во вкладке «Settings» можно подредактировать оформление диаграммы или граыфика: выбрать цветовую палитру, подключить показ шкалы, всплывающих окон и легенды.
А вот и раздел «Interactive elements». Он добавляет в инфографику разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, маркеры с текстом и цифрами, логотипы.
Можно даже невидимые метки создавать! Делается это в разделе «Interactive area».
Кнопка «Insert» добавляет встраиваемые объекты: Google-карты, документы и презентации, видео с YouTube и Vimeo, аудио и многое-многое другое…
В разделе «Audio» можно добавить аудиотрек по ссылке, а можно подключить микрофон и сделать аудиозапись онлайн, чтобы прикрепить её к инфографике.
К сожалению, свой трек загрузить с ПК нельзя — это платная опция.
В разделе «Video» добавляем видеофайлы по ссылке — с сервисов YouTube, Vimeo и Google Drive.
Ну и в разделе «Others» добавляем любые встраиваемые объекты — по ссылке или по коду.
Хотите изменить фоновое изображение? Нажимаем «Background».
Можно использовать два фоновых изображения. «Canvas» — это основной фон, на котором размещается викторина, а «Base» — это подложка. Менять можно и то, и другое, переключаясь между этими вкладками.
Чтобы загрузить новую картинку, жмём на значок со стрелкой. А можно сделать фоновое изображение однотонным (Color).
Чтобы применить фон ко всем слайдам сразу, нажимаем на кнопку «Apply to all pages».
Чтобы сделать инфографику многостраничной, выбираем в меню «Pages», а потом «Add page».
В разделе «My creations» выбираем нужную инфографику, уже созданную в сервисе, и нажимаем «Add».
Кстати, вместо другой инфографики можно вставить шаблон из библиотеки сервиса, а потом наполнить его своим содержанием (раздел «Template»).
Удобно использовать шаблон «Blank» — это пустой слайд, на который можно, «не отходя от кассы», разместить свои интерактивные объекты и фоновые картинки.
И ещё одна опция, о которой я чуть не забыла: можно добавить к инфографике фоновую музыку. Для этого нажимаем на кнопку «Add background audio».
В бесплатном аккаунте музыкальный трек или озвучку можно добавить по ссылке или записать их с помощью микрофона онлайн.
Добавляем интерактивность
Любой объект, который мы добавили в инфографику (текст, изображение, метку), можно сделать интерактивным. Для этого щёлкаем по нему «мышкой» — и сразу появляются изображения «пальца» и «кометы» (ну я так думаю, что это комета, может, и ошибаюсь, может, это метеорит).
Если нажать на «пальчик» – можно перейти к добавлению контента. Если на значок с «кометой» – анимировать этот объект.
Давайте попробуем прикрепить интерактив.
Итак, какие интерактивности нам предложит Genially?
«Tooltip» поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).
«Window» создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.
«Link» превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.
«Go to page» тоже превратит метку в интерактивную кнопку, только зритель отправится не на другой сайт, а на другую страницу с новым интерактивным изображением.
«Full screen» подходит только для картинок, эта опция открывает изображения на весь экран.
«Audio» проигрывает добавленный в сервис аудиотрек.
«Reveal» — новая «фишка» сервиса. При нажатии на метку с этой опцией на экране появится новый объект, до этого скрытый.
Это конструктор для добавления всплывающего окошка (Tooltip).
Вверху находится поле для редактирования текста и добавления медиа. Можно вставить гиперссылку, картинку, таблицу, видео.
Если мы выбрали интерактивность «Window», то придётся дополнительно выбирать шаблон оформления окна, который предложит сервис или начать «с чистого листа» (Blank). По опыту, лучше выбирать готовый шаблон.
Выбираем подходящий шаблон и нажимаем «Edit window».
Дальше изменяем шаблон по своему вкусу. Это как слайд внутри слайда. Можно стирать надписи и заменять их на свои, загружать изображения. Можно даже добавлять интерактивные метки, используя инструменты на панели слева (о них я рассказывала выше). Вот такая «матрёшка в матрёшке» получается.
Чтобы вернуться назад, нажимаем на кнопку «Back to page».
А эта опция «Link», которая добавляет ссылки на веб-ресурсы. Не забываем нажать «Save».
Опция «Go to page» настраивает переход между страницами многостраничной инфографики.
Выбираем нужную страницу для перехода в разделе «Pages» и нажимаем «Save». В разделе «Actions» есть несколько «быстрых» кнопок, чтобы добавить переход на первый или последний слайд, вперёд и назад.
Интерактивность «Full screen» лучше всего подходит для картинок. Она помогает открыть изображение на весь экран. Ничего особого делать не надо, просто выбираем эту опцию и нажимаем «Save».
Интерактивность «Audio» запускает аудиофайл, который можно тут же добавить по ссылке или записать онлайн с помощью микрофона. К сожалению, загрузить свой трек с ПК не получится — это платная опция.
Ну и наконец, интерактивность «Reveal» поможет «спрятать» объект на плакате, а потом при нажатии на метку его открыть.
Выбираем эту опцию, а дальше выбираем объект, который надо спрятать, нажимаем «Save».
Настраиваем анимацию
Помните про значок с «кометой», который появляется при нажатии на любую метку или объект на плакате? С его помощью можно добавить анимацию.
Анимация может быть разная: появление (Enter), исчезание (Exit), совершение каких-то действий, например, вращение (Continuous), действия при наведении курсора (Hover mouse) и клике «мышкой» (Click).
Внутри каждого раздела большое количество видов анимации (Effect). Можно выбрать направление движения (Direction) и даже скорость.
Дополнительный бонус — анимация при перелистывании слайдов, если плакат многостраничный.
Настраиваем её, нажав на значок «волшебная палочка» рядом с каждым слайдом в разделе «Page». Выбранную анимацию можно применить ко всем слайдам (Apply to all slides).
Публикация
Инфографика создана. Чтобы опубликовать работу и получить ссылку на неё, нажимаем справа вверху на кнопку «Share».
В открывшемся окошке даём название инфографике, добавляем описание и, если нужно, даём разрешение другим пользователям сервиса создавать ремиксы на нашу работу. Нажимаем «All set!»
Можно получить ссылку (вкладка «Link») или код, чтобы встроить инфографику на страницу блога или сайта (вкладка «Insert»).
Но это ещё не всё!
Среди «плюсов» сервиса — возможность устроить коллективную работу по созданию интерактива. Можно добавить других участников и пригласить их для работы (только чур — пусть сначала зарегистрируются в сервисе). Как это сделать?
Возвращаемся в свой личный кабинет, где хранятся все созданные работы, нажав на логотип сервиса в верхнем левом углу. Выбираем нужную и нажимаем на значок «человечек с плюсом» (Collaborators).
В открывшееся окошко вносим адреса электронной почты своих будущих соавторов и нажимаем «All set».
Готово! Приглашенный участник получит ссылку для редактирования и… море удовольствия от работы в сервисе.
Здесь же, в личном кабинете, нажав на значок с тремя точками (Options), можно вернуть работу в состояние черновика, переименовать, дублировать её или удалить. Остальные опции платные.
Чтобы вернуться к редактированию работы, наводим на неё курсор и нажимаем «Edit».
