Как сделать инфографику в иллюстраторе
Как создать векторную динамичную инфографику в Adobe Illustrator
В этом уроке мы рассмотрим, как создавать векторную информационную графику, используя стандартные инструменты Adobe Illustrator. Мы также рассмотрим несколько способов, которые позволят изменять внешний вид графиков, сохраняя при этом их динамические свойства. То есть вы сможете редактировать данные графиков, после всех преобразований. Ну, что начнем!
Шаг 1
Инфографика это инструмент преподнесения информации пользователю в более лаконичной, емкой форме. Это один из видов альтернативного изложения информации средствами художественных зарисовок, графиков, диаграмм и других графических объектов на бумаге или в электронном виде. Посмотрите пример применения инфографики при освещении двух значительных событий этого года: Инфогрфика Euro 2012 и инфографика Олимпийских игр 2012.
Вся информация вводится в соответствующие ячейки таблицы. Выделение необходимых ячеек таблицы осуществляется при помощи курсора. После ввода информации нажмите на кнопку Applyв окне Graph Data, это приведет к созданию графика.
Шаг 2
Созданный вами объект является динамическим, то есть вы всегда можете изменить название, последовательность и количество категорий или данных. Если вы закрыли окно Graph Data, для доступа к данным переходим Object > Graph > Data…. Мы можем изменять тип графика после того, как он был сформирован. Для этого переходим Object > Graph > Tape…
График изменит свой внешний вид, только после того, как вы нажмете кнопку OK в диалоговом окне.
Шаг 3
Давайте немного исследуем окно Graph Type. Как вы видите, мы можем изменять ширину, указывать положение осей и даже добавлять падающую тень.
Мы также можем редактировать значения и категории осей.
Но как вы все понимаете, этого явно недостаточно, для того чтобы придать графику нужный вид. И вот тут многие дизайнеры делают одну и ту же ошибку: конвертируют динамический график в группу обычных векторных объектов. Осуществляется это путем разгруппирования объектов графика (Shift + Cmd / Ctrl + G). О том, что вы теряете возможность управлять данными, сообщается в окне предкпреждений.
Мы не будем совершать эту ошибку, сохраним динамические свойства графика. О том, как изменять его внешний вид в таком состоянии вы узнаете немного позже.
Шаг 4
Теперь давайте создадим еще два динамических графика. Для создания графика «Статистика всемирного интернета” (источник: internetworldstats.com) я использовал Pie Graph Tool
Для создания графика «Источники информации» (источник: technorati.com) я использовал Column Graph Tool
Принцип работы с этими графиками, ничем не отличается от работы с первым графиком (см. шаг 1).
Шаг 5
В этом шаге нашего урока по освоению секретов работы в Illustrator создадим общий дизайн нашей инфографики. Я решил использовать стиль оригами (такой стиль достаточно популярен в наше время). При помощи инструмента Rectangle Tool (M) создадим прямоугольник и зальем его радиальным градиентом от белого к голубому цвету.
Ширина этого прямоугольника 600 px (в соответствии с требованиями заказчика). Его высота может изменяться в процессе добавления элементов.
Шаг 6
При помощи инструмента иллюстратора Pen Tool (P) создадим векторную форму бумажной полоски, на которой будет находиться название инфографики. Заливаем объект линейным градиентом от белого к серому цвету.
Направление градиента, соответствует направлению источника света. Все последующие элементы также будут освещены этим общим источником. Глобальное световое решение – это первый признак хорошего дизайна.
Шаг 7
Создадим еще несколько изгибов векторной бумажной ленты, используя Pen Tool (P). При помощи линейных градиентов передадим игру света и тени на этих поверхностях.
Для создания контраста между светлым фоном и бумажной лентой создадим падающие тени. При помощи Ellipse Tool (L) создадим окружность с заливкой радиальным градиентом от серого к белому цвету.
Трансформируем окружность в эллипс, используя Selection Tool (V) и удерживая клавишу Opt/Alt
Применяем к окружности режим смешивания Multiply и размешаем ее ниже бумажной ленты.
Используя эту технику, создадим тень в верхней части ленты.
Шаг 8
Создайте еще одну бумажную ленту, как это показано на рисунке ниже.
Техника создания таких объектов была описана выше. Расположим на этой ленте векторную карту мира. Вы сможете скачать подобную карту здесь
Шаг 9
Пришло время вернуться к графикам. Поместим первый график в области, созданного дизайна. Как вы можете видеть, его следует уменьшить.
Однако это невозможно сделать при помощи инструмента иллюстратора Selection Tool (V). Это не проблема. Выделяем грфические векторные объекты и переходим Object > Transform > Scale… и устанавливаем необходимую для уменьшения величину.
Шаг 10
Давайте на примере этого графика рассмотрим, как преобразовывать его элементы, не потеряв при этом его динамических свойств. Я решил удалить оси. Выделяем одну из них при помощи Direct Selection Tool (A) и нажимаем на клавишу Delete.
Как вы видите это сделать невозможно. Но мы можем отключить обводку этого пути. При этом объект станет не видимым.
Сделаем невидимыми обе оси.
Для того чтобы сделать невидимыми цифры отключите их заливку.
Шаг 11
Выделяем при помощи Direct Selection Tool (A) название категорий и изменяем параметры текста при помощи панели Character (Window > Type > Character). Вы также можете изменить цвет текста и изменить его положение. Эти и дальнейшие преобразования по ходу урока не приведут к потере динамического статуса графика.
Выделяем при помощи Lasso Tool (Q) или Direct Selection Tool (A) точки, указанные на рисунке ниже и, удерживая клавишу Shift, удлиняем столбцы при помощи Direct Selection Tool (A). Здесь я хочу заметить, что преобразования в виде изменения размера отдельных элементов или их перемещение относительно других динамических элементов, следует производить после завершения работы с данными. В противном случае, любые изменения данных приведет к возвращению элементов на свои места и в нужной пропорции. И я думаю, это понятно.
Шаг 12
Теперь давайте поработаем над внешним видом векторных столбцов. Все преобразования мы будем осуществлять при помощи панели иллюстратора Appearance (Window > Appearance). Заменяем заливку столбца на голубой цвет. Применим к его обводке белый цвет.
Шаг 13
Теперь давайте создадим очень простой безшовный узор. Включим режим предварительного просмотра (View > Pixel Preview) для того, чтобы располагать элементы точно в ячейках пиксельной сетки. Берем Rectangle Tool (M) и создаем десять квадратов 1 x 1 px, как это показано на рисунке ниже.
Выделяем все квадраты и переходим Edit > Define Pattern… и нажимаем кнопку OK в диалоговом окне
Шаг 14
Выделяем столбец графика и добавляем новую заливку в панель Appearance. Применим к этой заливке паттерн, который был создан в предыдущем шаге и уменьшим прозрачность до 60%
Добавим еще одну заливку и применим к ней линейный градиент, который состоит из двух голубых слайдеров, один из которых имеет прозрачность 0%
Шаг 15
Создадим падающую тень от столбца. Добавим новую заливку и поместим ее ниже всех в панели Appearance. Применим к ней линейный градиент от черного к светло-серому цвету.
Не снимая выделения с этой заливки, переходим Effect > Warp > Arc Lower… и устанавливаем параметры, указанные на рисунке ниже
Теперь переходим Effect > Transform & Distort > Transform… и устанавливаем параметры в диалоговом окне.
Шаг 16
Для того чтобы не повторять всю последовательность действий для остальных колонок графика сохраним графический стиль в соответствующей панеле.
Применим графический стиль к нижнему столбцу. Заменим цвета линейного градиента и одной из заливок в панели Appearance.
Применим тот же стиль к средним столбцам. Удалим нижнюю заливку с тенью в этом случае.
Шаг 17
При помощи Type Tool (T) напишем данные соответствующие категориям, название графика и источник информации.
Давайте проверим, остался ли наш график динамическим. Переходим Object > Graph > Date…
Как видите, я был прав.
Шаг 18
Используя описанные выше техники, я изменил дизайн остальных графиков.
Для того чтобы наш урок по Illustrator содержал не только техническую информацию, но и демонстрировал вам интересные цифры статистики интернета, я представил их в графическом виде.
Этот урок по созданию инфографики в иллюстраторе был создан мною для английского интернет издания Designmodo. Сегодня я публикую русскую версию данного урока.
Создаем инфографику в иллюстраторе
Сегодня мы вместе с вами будем создавать инфографику в иллюстраторе. Процесс создания несложный.
Создадим темный фон на котором разместим нашу инфографику. Для этого рисуем прямоугольник и заливаем его темным цветом. Блокируем прямоугольник на панели слоев.
Рисуем круг без заливки с обводкой белого цвета, и толщиной в 10px. Размещаем ее посередине монтажной области.
Копируем наш круг и вставляем его на то же место. Размеры указываем как на фото.
Повторяем процедуру копирования и изменения размера нашего круга. По итогу у вас должно получится 4 круга.
Выбрав инструмент «Ножницы» разрезаем наши круги на разные части, и удаляем лишние.
После завершения копируем наши круги и меняем толщину обводки до 20 px.
Разбираем наши объекты.
Заливаем линейным градиентом.
Создадим тень на нашей инфорграфике. Для этого копируем часть круга и вставляем ее на то же место. Меняем цвет заливки на светло-серый. Снова копируем, но сдвигаем эту часть в сторону, и цвет устанавливаем — белый.
Выбрав оба объекта применяем переход,и уменьшаем непрозрачность.Перемещаем нашу тень под белый круг.
Добавим немного текста на нашу графику. Сперва проставим цифры возле начала наших кругов.
Далее берем инструмент перо и рисуем отрезки возле концов кругов. Устанавливаем следующие настройки в панели обводки. Все то же самое выполняем для каждого круга.
Наполняем так же инфографику текстом и прочим. По итогу получаем неплохой шаблон который можно будет отредактировать под конкретные задачи указав реальные цифры и текст.
15 декабря 2016 | Опубликовано в Уроки | 2 Комментариев »
Иногда нам нужно донести довольно скучную или сложную информацию, но если преподать ее в виде инфографики, восприятие информации может значительно измениться в лучшую сторону. Сегодня мы будем рисовать инфографику в Adobe Illustrator. Вы научитесь создавать подобные работы и сможете использовать их, меняя и редактируя по своему вкусу.
1. Готовим документ
Первым делом создайте новый документ (File>New/Файл>Создать) cо следующими параметрами:
Активируйте опцию “Align new objects to Pixel Grid/Выравнивать новые объекты по пиксельной сетке”
2. Создаем фон
Шаг 1
Создайте прямоугольник при помощи одноименного инструмента. Растяните фигуру по размеру рабочей области. В палитре Align/Выравнивание проконтролируйте, чтобы прямоугольник был выровнен по центру холста.
Шаг 2
Дублируйте фоновый прямоугольник (Ctrl C+ Ctrl F) и укажите верхней копии полосатый узор. Вы найдете его в Swatches>Patterns>Basic graphics>Dots/Lines/Образцы>Узоры>Базовая графика>Точки/Линии. В палитре Transparency/Прозрачность укажите режим наложения Color Dodge/Осветление основы и снизьте до 60% opacity/непрозрачность.
3. Рисуем баннеры
Шаг 1
Мы нарисуем шесть прямоугольников и укажем им заливку выбранных нами цветов, а также отсутствие обводки.
Шаг 2
Укажите прямоугольникам эффект тени. Для этого в меню выберите Effect>Stylize>Drop Shadow/Эффект>Стилизация>Тень и укажите параметры как показано ниже.
Шаг 3
Добавим цифры. В примере использован шрифт Caviar Dreams, но вы можете выбрать любой другой. После того как вы напишете цифры, выделите их и в меню выберите Object>Expand/Объект>Разобрать, затем Object>ungroup/Объект>Разгруппировать. После этого также укажите цифрам эффект Drop Shadow/Тень.
Шаг 4
Подгоните цифры к баннерам. Теперь мы хотим, чтобы баннера заполняли цифры справа, но не выступали за них слева. Вам придется создать несколько дополнительных точек инструментом Add anchor point/Добавить опорную точку, затем инструментом Direct Selection/Прямое выделение подвиньте точки так, чтобы у нас получилось то, что мы хотим.
4. Рисуем иконки
Нам понадобится шесть иконок — по одной для каждого баннера. Они будут соответствовать типу информации в баннере. При желании вы можете найти практически любые иконки в Интернете. Но мы все же создадим свои.
Шаг 1
Иконка 1- Эту иконку мы создадим из базовых фигур — круга и прямоугольника со скругленными углами.
Иконка 2- Рисуем часы. Опять же обычный круг и стрелки, созданные инструментом Pen/Перо.
Иконка 3- Увеличительное стекло опять же из базовых фигур.
Иконка 4- Круг, четыре прямоугольника и палитра Pathfinder/Обработка контура, функция Combine/Объединить
Иконка 5- Снова эллипс, рисуем пером уголок и объединяем все в палитре Pathfinder/Обработка контура.
Иконка 6 — Тут все просто — круг, прямоугольник, объединяем фигуры и дорисовываем пером две линии.
**Группируйте иконки и Expand/Разбирайте их.
Шаг 2
Поместим иконки на их места на баннерах, и укажем им Effect>Outer glow/Эффект>Внешнее свечение.
5. Добавляем текст
Шаг 1
Создайте контейнеры с текстом (в уроке использован шрифт PT Serif). Нам нужен обычный текст и заголовок, а также вертикальный текст (шрифт Bebas).
Шаг 2
Нарисуйте разделители инструментом Pen/Перо и подберите наилучшую толщину обводки. Expand/Разберите линии.
6. Эффекты
Теперь мы сделаем так, чтобы казалось что баннеры выступают из фона.
Шаг 1
Нарисуйте длинный овал. В меню выберите Blur>Radial Blur/Размытие>Радиальное размытие. Затем при помощи инструмента Eraser/Ластик, удерживая клавишу Alt, сотрите половину овала.
Шаг 2
Теперь поместите эти половинки овала под баннеры в правой их части.
Шаг 3
Теперь дублируйте половинки овала и поместите копии над баннерами, но в режиме наложения Multiply/Умножение.
7. Эффект для фона
Создайте прямоугольник по размеру рабочей области, залейте его радиальным градиентом, как показано ниже. Смените режим наложения на Multiply/Умножение и примените Blur>Radial/Размытие>Радиальное размытие.