Sprites

Автор инструкции по работе с сервисом

 

Орешко Марина Анатольевна,

 

 заведующая сектором литературного краеведения Библиотеки-музея имени Н.Н. Блинова г. Мурманск

 

 

 

Базовые функции сервиса предоставляются бесплатно, а все материалы, созданные с помощью Sprites, распространяются по лицензии Creative Commons, что означает возможность использования в своих целях с указанием ссылки на источник или автора. Сервис работает как на стационарных ПК, так и на мобильных устройствах (iPhone, iPad).

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

Возможности сервиса для образовательной деятельности
Сервис можно использовать для оформления результатов творческой, проектной  и исследовательской деятельности учащихся по предмету.

Где можно делиться материалами с сервиса
Созданной инфографикой можно поделиться в социальных сетях (Facebook, Google+,  Twitter, LinkedIn). Можно получить прямую ссылку на инфографику и код для её размещения в блоге и на сайте.

 

                   Алгоритм работы в сервисе

Название сервиса: Sprites

Описание: онлайн-сервис для создания анимированной инфографики

Язык: английский

Ссылка: https://spritesapp.com/

Регистрация

Чтобы начать работу, заходим на сайт (https://spritesapp.com/). Сервис англоязычный, однако его можно русифицировать с помощью Переводчика от Google Chrome.

Чтобы побольше узнать о возможностях сервиса, нажимаем «Learn more». Чтобы просмотреть краткую видеоинструкцию по работе в сервисе, нажимаем «Watch the video».

Можно присоединиться к сервису, используя уже созданные аккаунты в социальных сетях (Facebook, Twitter, Google) – в этом случае нажимаем «Sign in».

Другой способ регистрации – через адрес электронной почты. Нажимаем «Join for free» и заполняем форму регистрации: необходимо указать своё имя (ник), адрес электронной почты и придумать пароль. Далее выбираем тарифный план (Free) и нажимаем «Create account».

Закрываем окошко регистрации (Close).

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

Далее автоматически откроется окно для входа на сайт (либо нажимаем «Sign in»), вводим свой адрес электронной почты и пароль. Регистрация завершена.

Создание инфографики

На первом этапе даём название будущей инфографике (Title) и выбираем из выпадающего списка вариант цветового оформления (Theme). После этого нажимаем «Create infographic».

Открывается рабочее поле для размещения элементов (Slide 1).

Слева расположена панель управления для редактирования.

1. Slides – «страницы» инфографики. По умолчанию создаётся одна страница. Чтобы добавить новую страницу и получить инфографику-презентацию, нажимаем на значок «плюс». Чтобы редактировать название страницы, нажимаем на значок «карандаш» рядом с названием слайда. Можно изменить название и в рабочем поле, щёлкнув по надписи-заглавию (например, «Slide 1»).

2. Elements – библиотека элементов, которые можно добавить в инфографику:

— текст (Text);

— факт - выделяющийся на общем фоне блок текста (Fact);

— картинка (Image);

— фигура –схематические изображения людей или неодушевлённых предметов (Figure);

— карта (Map);

— диаграмма (Chart);

— таблица (Table);

— разделительная линия (Line).

Добавление текста

Чтобы добавить в инфографику текст, нажимаем «Elements» – «Text». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию«Custom», можно самостоятельно выбрать положение текста на слайде, с помощью «мыши» свободно перемещая его по инфографике.

- Text type – тип текста: обычный текст (Text) и цитата (Quote).

- Text to display – текст для размещения. В это окно вводится текст для инфографики. В случае, если оформляется цитата, откроется другое окно - «Quote text and signature». В это окно вводится текст цитаты, ниже указывается её автор.

- Font size – размер шрифта. Самый маленький – XS, самый большой – XL.

- Font styles – стиль начертания букв. Можно выбрать полужирный шрифт (Bold) или наклонный (Italic).

- Maximum text width – максимальная ширина текста. Щелкая «мышью» по шкале, можно изменить ширину текста, расположив его в одну или несколько строк.

Добавление «фактов»

Чтобы добавить в инфографику «факт», нажимаем «Elements» – «Fact». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение «факта» на слайде, с помощью «мыши» свободно перемещаю его по инфографике.

- Icon – добавление в инфографику иконки из библиотеки сервиса.

- Quantity – количество: в это окно вписываем необходимые для инфографики цифры, к которым хотим привлечь внимание. Рядом – клавиши выбора цвета для цифры.

- Measure – «мера»: дополнительная информация к цифрам, здесь указывают единицы измерения (часы, годы, километры, килограммы и т.д.).

- Description – описание факта: вводим дополнительную информацию к факту, поясняющую цифру. Например: «Длина Волги», «Дата создания компании» и т.д.

Добавление изображений

Чтобы добавить в инфографику изображение, нажимаем «Elements» – «Image» . Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение картинки на слайде, с помощью «мыши» свободно перемещая её по инфографике.

- Select image from – выбор источника изображения. Можно добавить картинку по ссылке из Интернета (URL): адрес вводим в окошко «Image URL». Можно выбрать картинку из библиотеки изображений сервиса (Gallery). Чтобы добавить своё изображение с ПК, нажимаем «Upload image».

- Relative image size – размер изображения. Щелкая «мышью» по шкале, можно изменить размер картинки.

Добавление «фигур»

Чтобы добавить в инфографику «фигуру», нажимаем «Elements» – «Figure». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение «фигуры» на слайде, с помощью «мыши» свободно перемещая её по инфографике.

- Icon – добавление иконки из библиотеки сервиса. По умолчанию в инфографику добавится иконка «male».

- Total number of items – общее число объектов в «фигуре»: выбираем 5, 10, 20, 30, 40 объектов.

- Number of items to highlight – количество объектов, необходимых для выделения в инфографике (например, «Три человека из 10 пользуются услугами этого сервиса»); необходимо вписать нужную цифру и определить цвет выделения.

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

Чтобы добавить в инфографику карту, нажимаем «Elements» – «Map». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение карты на слайде, с помощью «мыши» свободно перемещая её по инфографике.

Map type – тип карты: выбираем карту США, Европы или мира.

Annotations – описание карты. Можно указать территорию (Aria), дать «подсказку» - текст, который будет отображаться на карте (Tooltip), выбрать цвет закрашивания территории на карте (Color) и указать его «плотность» (Density).

Map color – выбор цвета карты.

Relative map size – размер карты на инфографике. Щелкая «мышью» по шкале, можно изменить размер карты.

Zoom level and offset from center (%) – уровень масштабирования карты, можно выбрать масштаб увеличения карты в 2 и 4 раза.

Добавление диаграммы

Чтобы добавить в инфографику диаграмму, нажимаем «Elements» – «Chart». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение диаграммы на слайде, с помощью «мыши» свободно перемещая его по инфографике.

- Chart type – тип диаграммы: из выпадающего списка можно выбрать тип диаграммы: круговая, в виде столбиков, «пузырьковая» и т.д.

- Data to display – окно для внесения данных, на основе которых строится диаграмма. Чтобы изменить внесенные данные, нажимаем «Edit selection». В графу «Row label» вносим название параметра, по которому производим измерение, в графы колонок – данные для построения диаграммы. Количество колонок и строк можно увеличить, нажав на «плюс».

Можно импортировать в инфографику готовую диаграмму, нажав внизу «Import data». Импортировать можно диаграмму, созданную в Microsoft Exel, Google Sheets, либо добавить диаграмму по адресу в Интернете (Custom URL).

- Relative chart size - размер диаграммы на инфографике. Щелкая «мышью» по шкале, можно изменить размер диаграммы.

- Legend, axis and values – «легенда, оси и значения». В этом окошке можно установить опцию сокрытия данных диаграммы и её «легенды». По умолчанию все данные открыты.

Добавление таблицы

Чтобы добавить в инфографику таблицу, нажимаем «Elements» – «Table». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение таблицы на слайде, с помощью «мыши» свободно перемещая её по инфографике.

- Table contents – содержание таблицы. Чтобы отредактировать содержание, нажимаем «Edit selection».

В верхние ячейки таблицы вносятся названия граф, а в остальные – необходимые данные. Количество колонок и строк можно увеличить, нажав на «плюс».

Можно импортировать в инфографику готовую таблицу, нажав внизу «Import data». Импортировать можно таблицу, созданную в Microsoft Exel, Google Sheets, либо добавить таблицу по адресу в Интернете (Custom URL).

Добавление разделительной линии

Чтобы добавить в инфографику разделительную линию, нажимаем «Elements» – «Line». Слева откроется окно для редактирования:

- Position on a slide – размещение на слайде: вверху (Top), слева (Left), внизу (Bottom), в центре (Center). Если выбрать функцию «Custom», можно самостоятельно выбрать положение линии на слайде, с помощью «мыши» свободно перемещая её по инфографике.

- Line type – тип линии: выбираем горизонтальную (Horizontal) или вертикальную (Vertical) линию.

- Relative line length – длина линии на инфографике. Щелкая «мышью» по шкале, можно изменить длину разделительной линии.

Дополнительные возможности

Любой объект, вставленный в инфографику, можно «закрепить» в рабочем поле на определённом месте, для этого нажимаем значок«замка» - «Lock element position». Элемент можно копировать, нажав на значок «странички» - «Copy element», и удалить, нажав на крестик - «Delete element».

В разделе «Settings» на панели управления можно изменить название инфографики и поменять стиль оформления, выбрав подходящий из списка. Можно создать свой собственный стиль оформления, нажав «You can also create your own themes».

При создании слайда можно добавить на рабочее поле «сетку», чтобы удобнее было выстраивать элементы инфографики – для этого нажимаем «Show gridlines» вверху. Для предварительного просмотра нажимаем «Preview».

Публикация инфографики

Чтобы опубликовать инфографику, нажимаем «Publish» на панели управления, далее - «Save».

В открывшемся окне уже установлены настройки автопроигрывания инфографики и её «открытости» для пользователей. При необходимости можно скрыть инфографику или убрать функцию «Auto-play». Здесь же можно установить пароль для просмотра работы.

В разделе «Share with» можно получить прямую ссылку (link) на инфографику, код для размещения в блоге и на сайте (iFrame) и код для размещения в WordPress.

Созданной инфографикой можно поделиться в социальных сетях (Facebook, Google+, Twitter, LinkedIn).

Примеры работ

Полезные ссылки

  • Ница А. Sprites – бесплатный онлайн-сервис для создания анимированной инфографики [Электронный ресурс] // Теплица социальных технологий. – Режим доступа: http://te-st.ru/tools/sprites-free-tool-infographics/

  • Ница А. Видеоурок: как создать презентацию или анимированную инфографику с помощью Sprites [Электронный ресурс] // Теплица социальных технологий. – Режим доступа: http://te-st.ru/2014/12/24/sprites-screencast/

  • Рябов П. Sprites: Анимированная инфографика и презентации онлайн [Электронный ресурс] // Infogra.ru. – Режим доступа: http://infogra.ru/infographics/sprites