Изучаем основы дизайна иконок с Адрианом Коке

Иконки, входящие в обширную коллекцию Адриана в Noun Project, выглядят дружелюбными, забавными и округлыми.

Адриан Коке — графический дизайнер из Франции, 7 лет работающий на фрилансе. Ему нравится свобода, которую дает удаленная работа, поскольку он может посвятить свободное время различным творческим проектам: от типографики до создания музыки, хотя в первую очередь сейчас он увлекается дизайном иконок. В посте мы узнаем о том, как именно Адриан создает простые единообразные иконки в Adobe Illustrator.

Привет, Адриан! Расскажи немного о себе — как ты оказался там, где ты есть сейчас?

Закончив колледж, я начал изучать фармацевтику, однако вскоре понял, что моя душа жаждет творчества. В свободное время я открывал для себя Photoshop, Illustrator и FL Studio, программу для создания музыки. Мне кажется, что у производства музыкальных композиций и дизайна есть множество общих черт, так как в обоих случаях вам необходимо соединить множество маленьких кусочков в единое целое, чтобы достичь определенного результата.

В конце концов я решил поступить в школу дизайна, однако, поскольку это было довольно дорого, я нашел специальную программу, которая позволяла учиться и работать одновременно. 2 года я проходил обучение и работал на сайте электронной коммерции, а после окончания учебы сразу перешел на фриланс. Я сотрудничал с разными клиентами, например, с агентством, которое продает игры на Facebook.

В свободное время я разрабатывал типографику, которую выкладывал в сеть для бесплатного скачивания. Я был удивлен и тронут положительными отзывами, которые получил. Мой шрифт Panama даже был шрифтом телешоу на национальном телевидении в течение года.

Я понял, что мне нравится создавать контент для людей и наблюдать за тем, как они его используют. Однажды я наткнулся на Noun Project и подумал, почему бы не попробовать создавать иконки?

Из всех форм искусства и дизайна, предназначенных для выражения идей или эмоций, ты выбрал именно иконки. Что конкретно привлекло тебя в дизайне иконок?

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

Когда я впервые прочитал девиз Noun Project “создаем глобальный визуальный язык, который объединяет людей”, он сразу нашел у меня отклик, и я понял, что должен принять участие в этом проекте.

Как ты решаешь, какие иконки создавать, и какие темы тебя интересуют больше всего?

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

Мне очень нравится создавать дизайн, который показывает людей, эмоции или концепции — то, чему зачастую трудно придать материальную форму. Удивительно, но когда я делаю счастливые или грустные иконки, это определяет мое настроение. Мне всегда интересно, как люди будут использовать мои иконки: приятно осознавать, что они будут кому-то действительно полезны.

Какие инструменты ты используешь для создания иконок? Поделись какими-нибудь хитростями.

Я начинал с самостоятельного изучения Adobe Illustrator. Я думаю, что это программное обеспечение просто великолепно — оно дает так много возможностей, и я продолжаю узнавать какие-то новые приемы даже сегодня.

В процессе разработки иконок я преимущественно пользуюсь 2 инструментами — “Создание фигур” (Shape Builder) и “Обработка контуров” (Pathfinder). Вместо сеток я использую направляющие. 

Расскажи нам, из каких шагов состоит процесс создания иконки.

Я сделаю скетч в Illustrator, а затем шаг за шагом доработаю его. Я всегда дублирую иконку несколько раз, а затем сравниваю разные версии. Я сохраняю как наброски, так и промежуточные результаты, чтобы иметь возможность проследить прогресс, и в случае необходимости вернуться и откорректировать их.

Вот как я разрабатываю иконку бегущего человека:

(1) Создайте основные линии и формы, соединяя точки с помощью инструмента “Перо” (Pen Tool — клавиша P). Нажмите P еще раз, чтобы начать новую линию, или щелкните исходную точку, чтобы замкнуть контур и создать форму.

‍(2) Затем, выделив линию или форму, добавьте более толстую обводку со скругленными концами и углами (нажмите на кнопку “Обводка” в панели инструментов, чтобы увидеть соответствующие параметры). Это поможет понять, как в конечном итоге будет выглядеть иконка.

‍(3) Я также добавлю заливку того же цвета для областей вроде туловища, которые должны быть заполнены.

(4) Продолжайте корректировать каждую опорную точку с помощью инструмента “Прямое выделение” (Direct Selection), пока конечности не будут выглядеть наиболее естественно.

‍(5) Как только каждый из элементов фигуры оказался на своем месте, нажмите “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), чтобы получить единый составной контур.

(6) Решите, какие части следует объединить в одну фигуру. В этом нам поможет инстурмент “Создание фигур” (Shape Builder). Я хочу, чтобы передняя нога визуально выделялась на фоне остальной фигуры. Я выделяю туловище и переднюю ногу, выбираю инструмент “Создание фигур” (Shift + M), щелкаю и перетаскиваю курсор, чтобы объединить их.

(7) Затем я добавляю обводку серого цвета к получившейся форме и нажимаю “Выровнять по внешней стороне” (Align to Outside) в окне настройки обводки. Так я смогу видеть, какую часть иконки вырезать, чтобы оставить пространство между ногами.

‍(8) Я снова нажимаю “Объект” (Object) > “Контур” (Path) > “Преобразовать границы обводки” (Outline Stroke), и обводка превращается в самостоятельный контур.

(9) Чтобы “вычесть” серую форму и оставить промежуток между ногами, выберите дальнюю от нас ногу и серую фигуру, снова нажмите на инструмент “Создание фигур” (Shift + M), но на этот раз удерживайте Alt (или Option на Mac). Это позволит вычесть серый цвет, оставив нужный пробел. Вуаля!

Вот еще несколько полезных приемов, которые я часто использую в Illustrator:

Какие ошибки ты чаще всего встречаешь в дизайне иконок?

Разные толщина или стиль обводки, слишком большое количество опорных точек, там, где в них нет необходимости, нарушение пропорций или лишние детали. Я бы сказал, что именно из-за этих ошибок иконка получается неудачной.

Что должен сделать каждый дизайнер, чтобы создать более гармоничную профессиональную коллекцию иконок?

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

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

Придерживайтесь определенных правил, создавая дизайн: используйте одинаковые размеры, толщину обводки, предельные углы стыка (острые или скругленные) и другие общие детали, например, блики, которые могут объединить разнородные иконки в одно целое.

Следишь ли ты за творчеством каких-то конкретных дизайнеров? Или, может быть, ты используешь другие ресурсы для вдохновения?

Мне нравится просматривать работы на Behance, ведь там можно найти множество отличных дизайнов.

Хотя это и не связано с иконками, я большой поклонник творчества Romain Trystram, особенно серии работ “Огни большого города”, где он использует яркие неоновые цвета в сочетании с темными оттенками.

Мне также очень нравятся цветные эмоциональные изображения лиц, которые создает Alberoner.

Что ты собираешься делать дальше?

Я буду продолжать творить и пытаться день ото дня улучшать свои навыки. У меня все еще множество идей, которые я должен попробовать реализовать. Я благодарен Noun Project и всем, кто поддерживает меня и присылает положительные комментарии о моей работе. Это заставляет меня двигаться дальше!