Vectorboom
Уроки / Web дизайн / Comments: 1

Как создать инфографику в стиле метабол, используя Adobe Illustrator

Ярослав Лазунов
06.10.2013

Сегодня мы создадим шаблон для инфографики, используя форму, которая называется метабол или метасфера. Мы научимся быстро создавать такие формы и составлять композицию из них. Инфографика до сих пор супер популярная тема, поэтому этот урок я посвящаю ей.

Финальное изображение
How to create an infographic template

Вы можете скачать исходный векторный файл к этому уроку

Создание формы метабола

Шаг 1

Метабол или метасфера это трехмерный объект, который образуется в процессе слияния двух сфер. Его силуэт во фронтальной плоскости похож на цифру восемь.

Стандартными средствами Adobe Illustrator такую форму получить непросто. К счастью, существует скрипт, позволяющий создавать такие объекты в мгновение ока. Его написал известный японский разработчик Hiroyuki Sato. Скрипт имеет две версии Metaball (Arc) и Metaball. Скачайте zip архив со скриптами, нажав на эту ссылку. Я тестировал эти скрипты в трех версиях Иллюстратора CS5, CS6 и СС - все отлично работает.

Шаг 2

Для установки скрипта, распакуйте архив, затем вставьте папку со скриптами в папку, где находятся другие скрипты Иллюстратора. Например, если вы работаете в Adobe Illustrator CS5, путь к папке имеет следующий вид:

     
  • Для пользователей Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts
  •  
  • Для пользователей Mac:  Applications / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

Шаг 3

Теперь, после перезапуска программы вы найдете скрипты в меню File (File > Scripts > Metaball).

Скрипты Metaball (Arc) и Metaball немного отличаются  характером кривой между окружностями и параметром, который нужно вводить в диалоговое окно. Для нашего урока подходит любой из них. Я буду использовать Metaball.  Давайте посмотрим, как это работает.

Шаг 4

Создадим две окружности при помощи Ellipse Tool (L).

Выделяем их, затем запускаем скрипт (File > Scripts > Metaball > Metaball). Теперь нам необходимо ввести значение от 0 до 100 в Script Prompt (по умолчанию установлено значение 50), нажимаем OK.

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

Чем меньше будет вводимое значение, тем тоньше будет получаться перемычка.

Выделим все созданные элементы, затем нажмем на кнопку Unite в панели Pathfinder. Вот и все – форма метаболла готова.

Как расположить элементы инфографики

Шаг 5

Существуют излюбленные формы всех визуальных искусств. Они соответствуют элементарным формам, которые мы можем наблюдать в природе. Эти формы представляют собой "кирпичики”, из которых образуется все многообразие сложных форм. Разновидностей таких "кирпичиков” немного. Это - спираль, шар, многогранник, труба, дерево и звезда. В природе эти формы образовались в соответствии с "законом экономии”, по которому природа всегда ищет кратчайшие пути и выбирает экономные решения. Теперь давайте посмотрим, как мы можем использовать элементарные формы для расположения элементов инфографики или другими словами для создания простой композиции. На рисунках ниже представлены все формы, кроме трубы (извините, у меня не хватило воображения). Окружности связаны между собой, как вы понимаете, при помощи скрипта Metaball.

Для дальнейшей работы я буду использовать расположение элементов в виде вот такой звезды.

Я соединил элементы при помощи упомянутого выше скрипта.

Окраска элементов инфографики

Шаг 6

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

После того, как я создал еще пять окружностей, наш дизайн выглядит так.

Шаг 7

Приступим к созданию падающих теней. Выделяем и копируем все темно-серые окружности, затем вставляем их назад (Command/Ctrl + C; Command/Ctrl +B).

Заливаем новые окружности радиальным градиентом от темно-серого к белому цвету, затем смещаем их на несколько пикселей вниз и вправо. Установим для этих окружностей режим смешивания Multiply в панели Transparency panel. На рисунке ниже видимость верхних окружностей отключена для наглядности.

Шаг 8

Выделяем все темно серые объекты. Для этого достаточно выделить любой из них, затем перейти Select > Same > Fill Color.

Копируем их, затем вставляем назад (Command/Ctrl + C; Command/Ctrl +B). Теперь поместим выделенные объекты ниже всех существующих. Для этого переходим Object > Arrange > Send to Back. Объединим их в один объект, для этого нажимаем на кнопку Unite в панели Pathfinder.

Шаг 9

Копируем полученную форму и вставляем ее назад. Перекрашиваем полученный объект в белый цвет. Смещаем белый объект вниз и вправо так, как это показано на рисунке ниже.

Выделяем темно-серый и белый объект (сделать это удобно в панели Layers)

Шаг 10

Теперь используем горячие клавиши Command/Ctrl + Option/Alt + B для создания бленд объекта на основании выделенных форм. Для установки нужного числа Specified steps сделайте двойной клик по иконке Blend Tool (W) на панели инструментов.

Падающая тень готова. Нам осталось только создать условный текст и расположить его на элементах инфографики.

На нашем сайте вы можете прочесть другие уроки по теме Инфографина в Adobe Illustrator

Всего комментариев: 0
Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.