Заходим на сайт Genially - и сразу можно заполнять форму для регистрации: указать адрес электронной почты, придумать пароль, поставить галочку напротив "I have read and accept the user agreement and privacy conditions", а потом нажать "Start". Ту же процедуру можно пройти, нажав "Register" в правом верхнем углу. Кстати, счастливые обладатели аккаунтов Facebook и Google могут зарегистрироваться в сервисе через них.
После регистрации сервис поинтересуется вашей профессией: из списка можно выбрать "Blogger" или "Teacher", например.
Если вы регистрировались по адресу электронной почты, то получите письмо для активации аккаунта: нужно нажать "Confirm my account".
Теперь жмём "Start creating" - и начинаем творить...
Как загрузить изображение?
Сервис Genially умеет очень много, это настоящий Клондайк для создателей разного интерактивного контента: презентаций, инфографики, плакатов, открыток, игр, викторин... Из верхнего меню выбираем шаблон для создания интерактивных плакатов - Interactive Image.
Шаг второй - загружаем фоновое изображение, на котором будем размещать интерактивные метки. Нажимаем на значок со стрелкой и облачком и загружаем картинку со своего ПК. Лучше, если она будет высокого качества и в хорошем разрешении. После загрузки появится большая красная кнопка "Create my new interactive image". Нажимаем и приступаем к самому вкусненькому.
Как наносить метки на изображение?
Давайте-ка осмотримся. В центре экрана - загруженное фоновое изображение, фото книжной выставки, например. Слева сбоку - инструменты для добавления разных интерактивностей. В левом верхнем углу - набор стандартных кнопок: копировать - вставить - удалить - отменить изменения. В правом верхнем углу - очень полезная кнопка "Preview" для предварительного просмотра плаката. В графу "Untitled Genially" вписываем название плаката или выставки.
Летим осматривать кнопки для добавления меток. Самая главная из них - "Interactivity". Она добавляет разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, сердечки, "лайки", логотипы, в том числе анимированные (бесплатная версия Thinglink нервно курит в углу).
Кнопка "Text" добавляет на изображение разные тексты: и помельче, и покрупнее, и даже списки. Если выбрать один из текстовых шаблонов, откроется дополнительный редактор для набора текста, выбора цвета текста и фона, размера и шрифта (осторожно, не все шрифты поддерживают кириллицу).
Кнопка "Resources" добавляет поверх изображения разные геометрические фигуры, иконки, картинки, гифы, линии и карты из большой библиотеки сервиса.
Хотите изменить фоновое изображение? Нажимаем "Background". Чтобы загрузить новую картинку, жмём на значок с "ладошкой". А можно вообще сделать фоновое изображение однотонным, красиво градуированным или выбрать какой-нибудь понравившийся шаблон из библиотеки.
Кнопка "Embed" добавляет встраиваемые объекты: Google-карты, документы и презентации, видео с YouTube и Vimeo, аудио с SoundCloud, контент из Twitter.
И наконец, "Images" добавляет поверх фонового изображения разные картинки помельче, загружая их с ПК (размер - не более 5 Mb) или из Интернета (по ссылке).
Добавить метку очень просто: выбираем необходимый элемент и щёлкаем по нему левой клавишей "мыши" - метка появляется на плакате.
Как добавить интерактивность?
Если щёлкнуть метку на плакате, появится изображение "ладошки". Нажимаем на него - и переходим к добавлению контента.
К метке можно прикрепить ссылку, текст, изображение и встраиваемый объект (с помощью кода). Вначале откроется конструктор для добавления контента. Вкладка "Tooltip" поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).
Вкладка "Window" создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.
Вкладка "Link" превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.
Вкладка "Go to page" тоже превратит метку в интерактивную кнопку, только зритель отправится не на другой сайт, а на следующую страницу с новым интерактивным изображением. Да-да, сервис позволяет создавать многостраничные интерактивные плакаты! Но об этом чуть ниже.
Для текста можно выбрать шрифт, размер, цвет. Добавление картинок - через нажатие иконки "картинка", там же рядом значок "цепочка" для добавления в текст ссылок.
Очень интересная кнопка "Code view" откроет html-разметку: здесь можно пристроить код видео с YouTube, например, или код любого встраиваемого объекта (осторожно, не все коды поддерживаются). Повторное нажатие клавиши "Code view" вернет исходный вид публикации, заодно можно проверить, насколько удачно вставился объект.
Для предварительного просмотра созданного есть кнопка "Preview". Чтобы сохранить интерактив, нажимаем "Save".
Есть ещё какие-нибудь фишки и плюшки?
А как же! Самая интересная фишка сервиса - анимация. "Оживить" можно любой объект на картинке, любую метку. Для этого выбираем "мышью" нужную метку и нажимаем "Animation" на панели инструментов слева. В разделе "Element" выбираем нужный тип анимации: как метка будет появляться (Enter), исчезать (Exit), совершать какие-то действия, например вращаться (Continuous), действовать при наведении на нее курсора (Hover). Внутри каждого раздела большое количество видов анимации (Effect type).
Дальше - больше. Можно выбрать направление движения метки и даже отрегулировать время появления - исчезания метки и скорость движения. Чтобы скопировать настройки анимации сразу для всех меток на плакате, нажимаем "Copy animation values".
Как создать многостраничный плакат?
Если с помощью сервиса вы уже создали несколько интерактивных плакатов, можно соединить их в один многостраничный проект по принципу слайдов презентации.
Если присмотреться, справа сбоку в рабочем поле есть значок "страничка" (Pages). При нажатии откроется дополнительное поле для добавления новой страницы. Нажимаем значок "+". В разделе "My Geniallys" выбираем нужный плакат и нажимаем "Add". Можно добавить сразу несколько таких интерактивных "слайдов".
Кстати, вместо другого плаката можно вставить шаблон из библиотеки сервиса, а потом наполнить его своим содержанием (раздел "Template"). Удобно использовать шаблон "Blank" - это пустой слайд, на который можно, "не отходя от кассы", разместить свои интерактивные объекты и фоновые картинки.
Навигацию между такими слайдами можно устроить, связав их между собой интерактивными кнопками со ссылками (Go to page).
Дополнительный бонус - анимация при перелистывании слайдов. Настраиваем её в разделе "Animation" - "Slide". Выбранную анимацию можно применить ко всем слайдам (Apply this transition to all slides), можно устроить автоматическую смену слайдов (Enable video mode) с настройкой времени или "закольцевать" просмотр (Enable loop mode).
Как поделиться плакатом?
Интерактивный плакат создан. Самое время рассказать о нём "по секрету всему свету". Для этого нажимаем клавишу "Share" в правом верхнем углу. Созданной работой можно поделиться в социальных сетях (Facebook, Twitter, Google+), получить ссылку или код, чтобы встроить плакат на страницу блога или сайта.
Важное замечание!
Иногда полученная на опубликованную работу ссылка может в итоге не работать (к сожалению, у сервиса есть такой недостаток). Ничего страшного! Мы копируем код для встраивания плаката на страницу сайта или блога и "добываем" из него рабочую ссылку.
Например, код для встраивания такой:
<div style="width: 100%;"> <div style="position: relative; padding-bottom: 75.00%; padding-top: 0; height: 0;"> <iframe frameborder="0" width="2500" height="1875" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.genial.ly/View/Index/5925f79f2c0c7e0da46920bc" type="text/html" allowscriptaccess="always" allowfullscreen="true" scrolling="yes" allownetworking="all"></iframe> </div> </div>
Ссылка на плакат: https://www.genial.ly/View/I
Ссылка на мастер-класс по этому сересу
Комментариев нет:
Отправить комментарий