Диаграммы и чарты в стиле «скетч»

инструкция по работе instad.io

Кликните на интересующий вас раздел или изучите информацию последовательно.

Подготовка файла для загрузки.
Готовые пресеты.
Стилизация диаграммы. Вкладка Style.
«Быстрые клавиши» INSTAD.IO.
Работа с цветом. Вкладка Colors.
Работа с текстом.

Подготовка файла для загрузки

Диаграммы или чарты для стилизации в INSTAD.IO должны быть сохранены в формате PDF или SVG.
Google Sheets — PDF
MS Excel — SVG
Подробная инструкция как сохранить файл в нужном вам формате находится по ссылке.

Ниже пример. Заранее подготовленную в Google Sheets диаграмму сохраняем в PDF:

Для правильной стилизации заголовка диаграммы, ее легенды и значений нужно выбрать шрифт «по-умолчанию» (не назначать отличный от выбранного по-умолчанию). В этом случае текст и цифры сохраняют возможность форматирования. То есть вы сможете менять размер подписей, их цвет, выбирать вариант шрифта.

Если не поменять шрифт на «дефолтный», все подписи становятся обычной картинкой и их невозможно изменять.

Размер шрифта в исходной диаграмме желательно поменять на более крупный. Например, заголовок может быть размера 30-36, легенда и числовые значения 24.

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

Загружаем PDF-диаграмму в INSTAD.IO:

Готовые пресеты

Одна из фишек сервиса — готовые пресеты. Кликая по «рыбам», вы получаете различные варианты стилизации диаграммы. В текущей версии сервиса вам доступно 12 готовых пресетов:

Например, вариант с жирной обводкой и полной заливкой:

Было:

Стало:

На этом пресете уже нет обводки, а вместо полной заливки появляется штрих:

А здесь мы поменяли толщину и направления штриха:

Стилизация диаграммы. Вкладка Style

Определившись с основным видом диаграммы, проваливаемся во вкладку Style.

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

В идеале лучше посмотреть видео, где демонстрируются все возможности INSTAD.IO вживую.

«Быстрые клавиши» INSTAD.IO

В INSTAD.IO есть ряд экспериментальных возможностей, упрощающих жизнь пользователю сервиса. Рекомендуем изучить их, прежде чем приступить к обработке диаграмм и чартов.

Ctrl + "plus" (или Cmd + "plus") — увеличение изображения.

Ctrl + "minus" (или Cmd + "minus") — уменьшение изображения.

Ctrl + 0 (или Cmd + 0) — сброс к исходным настройкам обработанного изображения.

Ctrl + Z — отмена последнего действия.

Shift + "plus" / "minus" — увеличение/уменьшение размера шрифта

Ctrl + Backspace (или Cmd + Backspace) — сброс фильтров и эффектов: изображение на правом экране соответствует изображению на левом.

Fn (Cmd) + Alt + E — Режим редактирования, где можно выделить конкретный примитив и произвести действия с ним. Например, удалить , изменить его позицию (используя стрелки влево/вправо/вверх/вниз) или поменять цвет.

Работа с цветом. Вкладка Colors

Третья вкладка — работа с цветом. Вы можете перекрасить сегменты диаграммы, изменить яркость, насыщенность, контрастность.

Поменять тон не только сегментов, но и фона:

Режим редактирования отдельно выделенного примитива.

Клавиши: Fn + Option + E (Mac) / WinKey + Alt + E (Windows).

По умолчанию изменение одного цвета приводит к перекрашиванию всех объектов, содержащих этот цвет. Данная команда позволяет выделять конкретные объекты и изменять их цвет:

Работа с текстом

Вкладка Style. В текущей версии INSTAD.IO вы можете выбрать шрифт из шести предложенных вариантов или совсем удалить подписи к диаграмме.

Размер шрифта регулируется комбинацией “Shift +” / “Shift -”:

Цвет шрифта меняется во вкладке Colors:

Видео-обзор сервиса: