Как сделать сногсшибательную инфографику

Как сделать сногсшибательную инфографику Любительский перевод Василины Назаровой, «Фанк і консалтинг», http://vector.tutsplus.com/tutorials/designing/how-to-create-outstanding-modern-infographics/ Что будем создавать:

Из этого обучающего материала вы поймете, что работать с данными не всегда скучно. Вы научитесь пользоваться графическими инструментами, техниками иллюстрации и типографики для того, чтоб создавать невероятную и красивую инфографику! ШАГ 1. Начните с использования Rectangle Tool (M), чтоб нарисовать квадратную фигуру. Заполните ее радиальным градиентом.

ШАГ 2. Весь дизайн будущей инфографики базируется на сетке из четырех колонн. Для того, чтоб сделать эти колонны, сначала выделите квадрат и подтяните направляющую линию к центру фигуры. Подтяните две

другие направляющие к левому и правому углам фигуры. Подсказка: чтоб быстро показать линейку, нажмите Command+R.

ШАГ 3. Сожмите квадрат так, чтоб он располагался между левой и центральной направляющими. Теперь добавьте еще одну направляющую по центру этой новой фигуры.

ШАГ 4. Передвиньте фигуру вправо и добавьте еще одну направляющую по центру.

ШАГ 5. Используя Rectangle Tool нарисуйте тонкий белый прямоугольник по центральной линии так, чтоб он был шириной с промежуток между колоннами. Добавьте направляющие по обеим сторонам маленького прямоугольника и удалите центральную направляющую. Подсказка: направляющие по умолчанию заблокированы. Чтоб удалить направляющую, зайдите в View > Guides > и уберите галочку с Lock Guides. Затем выберите направляющую и нажмите delete.

ШАГ 6. Повторите предыдущий шаг для остальных колонн, чтоб конечный результат выглядел так, как на картинке ниже. Расширьте оранжевый прямоугольник так, чтоб он был слегка больше, чем крайние направляющие.

ШАГ 7. Мне нравится размещать самую важную инфографику в начале и работать со вспомогательными графиками в конце. Обратите внимание на размеры и баланс изображения, прежде чем начать размещать элементы на странице. Ниже видно, как сочетание тяжелого и тонкого текста дополняет друг друга.

ШАГ 8. Вы можете экспериментировать с расположением главной графики так, чтоб было интересно. Я выбрал круги, так как очень длинное расположение рисунка будет выигрывать за счет контрастных форм. Используя Ellipse Tool (L), нарисуйте произвольно несколько кругов разных форм.

ШАГ 9. Залейте круги разными градиентами. Чтоб выбрать уже готовые градиенты, зайдите в Window > Swatch Libraries > Gradients > Bright’s.

ШАГ 10. Разместите первую группу кругов в углу.

ШАГ 11. Чтоб обозначить границы изображения, мы обрежем круги так, чтоб казалось, что они кончаются там, где кончается изображение. Сначала нарисуйте прямоугольник без заполнения и контура. Убедитесь, что прямоугольник распологается перед кругами. Выберите круги и прямоугольник и нажмите Object > Clipping Mask > Make.

ШАГ 12. Я использую много графиков в этой инфографике. Чтоб создать аккуратную круговую диаграмму, выберите подходящий график из панели графиков, а затем нажмите и подтяните ваш документ, чтоб создать график нужного вам размера. В первый график мы поместим данные. Из 50 обучающих материалов 39 были стандартными, а 11 были премиум. Вбейте 39 в первый прямоугольник и 11 - во второй. Как только вы закончите, нажмите галочку в правом верхнем углу.

ШАГ 13.

Очень много в оформлении графики создано вручную. Чтоб дальше работать с графикой разгруппируйте ее, нажав Object > Ungroup. Выскочит диалоговое окно, как на картинке ниже. Если вас устраивает графика, нажимайте ОК. Подсказка: после того, как вы сделали графику, но до того, как вы ее разгруппировали, просто нажмите control+клик на нее и зайдите в Data, чтоб внести изменения.

ШАГ 14. Этот шаг необязательный. Мне не нравится, как смотрится слева серая область, поэтому я отразил в другую сторону диаграмму, используя Reflect Tool (O).

ШАГ 15. Добавьте вручную цвет, цифры и легенду к диаграмме.

ШАГ 16. Как я говорил, я использую сетку как базу, по которой определяю размещение графиков. Чтоб создать разделяющую линию между графиками, используйте Pen Tool (P) и нарисуйте вертикальную линию. В настройках контура выберите Dashed Line и введите размер 2pt в первом прямоугольнике.

ШАГ 17. Чтоб сделать эффект глубокой линии, нарисуйте две линии, одну темнее, одну светлее.

ШАГ 18. Разместите темную линию слегка над светлой линией, чтоб создать иллюзию света, идущего снизу.

ШАГ 19. Следующим графиком, который я создам, будет ступенчатый график Column Graph (J). Снова, нажмите и потяните, чтоб создать размер графика. Введите значения для вашего графика. Параметры слева автоматически генерируются на основании значений, которые вы вводите. Нажмите на галочку, когда закончите.

ШАГ 20. Разгруппируйте график так, чтоб вы могли сделать в нем изменения. Я растянул график так, чтоб он казался более вытянутым. Конечно, я мог бы просто нарисовать прямоугольник для графики более высоким, но уже пришлось работать по факту.

ШАГ 21. Я захотел, чтоб текст, который относится к графике, был определенной ширины. Чтоб сделать это, используйте Text Tool (T) и нажмите и потяните от верха выделенного круга до нижней выделенной области. Это задаст зону текста так, чтоб информация идеально распологалась между направляющими.

ШАГ 22. Чтоб сделать иконку человека, используйте простые формы. Начните с Rounded Rectangle Tool. Настройте радиус углов, нажимая стрелки вверх или вниз во время рисования фигуры.

ШАГ 23. Нарисуйте прямоугольник с острыми краями для тела.

ШАГ 24. Используйте еще один прямоугольник с круглыми краями для плеч.

ШАГ 25. В конце нарисуйте голову с помощью круга. Выберите все самостоятельные фигуры, составляющие тело человека и в Pathfinder нажмите Unite. Благодаря этому вы объедините все фигуры в одну форму.

ШАГ 26.

Чтоб сделать более стильный график, мы используем человека для того, чтоб отразить информацию. Используя Stacked Column Graph Tool, нажмите и потяните, чтоб выделить область графики высотой с человека. Введите свои данные и нажмите на галочку.

ШАГ 27. Разгруппируйте форму и избавьтесь от номеров и линий. Используйте опять панель Pathfinder, нажмите Divide. Теперь каждая секция вашего человека разделена на аккуратные секторы. Разгруппируйте все формы и избавьтесь от дополнительных серых форм вокруг границ.

ШАГ 28. Отделите каждую секцию человека друг от друга, выделив их и используя Selection Tool, нажимая стрелки вверх или вниз один раз.

ШАГ 29. Чтобы нарисовать ножницы, вам следует использовать Pen Tool (P).

ШАГ 30. Этот график сделан при помощи Line Graph Tool.

ШАГ 31. Добавьте легенду внизу и цифры над точками.

ШАГ 32. Последний график создан при помощи Stacked Bar Graph Tool. И опять, добавьте детали вручную.

ШАГ 33. Чтоб добавить изюминки в дизайн, я добавил круговые диаграммы за графиками.

ШАГ 34. Чтоб сделать список комментариев, нарисуйте текстовый блок, как мы делали в шаге 21.

ШАГ 35. Как только комментарии будут переходить из одного прямоугольника в другой, нажмите знак плюса в правом нижнем углу, затем нажмите

куда-нибудь на странице и создайте новый текстовый блок такого же размера.

ШАГ 36. Работая с большими объемами текста, хорошей идеей будет создать стили для этого текста. В данном случае я сделал стиль для данных и

заголовка. Стили помогают легко поменять весь текст сразу, если вам захочется вернуться и поменять цвет, размер, шрифт и т.д. Чтоб создать шрифт, выделите текст, из которого вы хотите сделать стиль. Затем, в панели Character Styles (используйте панель Paragraph Styles, если вы стилизуете параграф текста) и нажмите Create New Style.

ШАГ 37. Дважды нажмите на новый стиль в панели Character Styles, чтоб открыть панель настроек. В панели настроек настройте ваш текст так, как вам нравится. Нажмите ОК.

ШАГ 38. Пока текст, стиль которого вы хотите изменить, все еще выделен,

кликните дважды на стиле в панели Character Styles, чтобы применить стиль.

ШАГ 39. Я создал шрифт для заголовка в дополнение к стилю основного текста.

ШАГ 40. Закончите свой дизайн, добавив несколько уместных деталей внизу.

ОКОНЧАТЕЛЬНЫЙ РЕЗУЛЬТАТ:

Вот и все! Теперь вы научились создавать современную инфографику.