Иконка стиля
Как рисовать иконки хорошо
Прежде всего, хотелось бы уточнить, что же отличает иконки от просто иллюстраций, хотя момент этот спорный и перестал иметь такое важное значение с развитием технологий.
Первые иконки-пиктограммы стали служить визуальными якорями, перенесенными из реального мира в компьютерный интерфейс. Человеку было гораздо удобнее и понятнее пользоваться знакомыми метафорами в суровом мире команд рабочей строки.
Удачно подобранная иконка хорошо заменяла собой слово или функцию и освобождала место для рабочего пространства на небольших экранах.
На протяжении всего пути развития технологий, графический интерфейс был все время в рамках технических ограничений. Цветность экранов, плотность пикселей, а в дальнейшем —доступные размеры для картинок и даже перспективы в ОС и других интерфейсах.
Иконка — это небольшая иллюстрация, сделанная в рамках технических ограничений.
Программистам удобно использовать иконки фиксированных размеров — это уменьшает количество работы и позволяет работать шаблонами.
Для себя я вывел такое определение: иконка — это небольшая иллюстрация, сделанная в рамках технических ограничений, будь-то: размер, стиль линии, цвет или перспектива. Ограничения могут быть как не зависящими от дизайнера, так и придумываются ним самим.
Как верно меня поправил Михаил Мирошников, чаще всего иконки — это несколько объектов. Мои ограничения — это, в первую очередь, визуальные принципы, связующие эти мини-иллюстрации в группу, а не ограничения к «иконкам вообще». Даже, к примеру, «небольшой размер» является требованием исключительно из-за необходимости размещать их рядом.
Как рисовать иконки?
Чтобы нарисовать иконку, нужно уметь рисовать от руки (хотя и не обязательно, но базовое понимание все таки нужно), хорошо владеть современными инструментами CG и видеть скрытые на первый взгляд связи между предметами и явлениями.
Рисовать — это первое во что бросаются дизайнеры. Учатся технике, стилизации, находят форму, набивают руку и, в конце концов, обретают свой собственный неповторимый стиль.
Как мне кажется, научиться рисовать яркие объемные иконки проще, чем сделать очередной скучный «домик» уникальным шедевром. Передать смысл минимальной графикой, убрав всю лишнюю шелуху.
Придумывать иконки со смыслом, глубоко отражающим суть — этому можно учиться всю жизнь.
Очень интересно находить и показывать связи между предметами, на первый взгляд совершенно не похожими между собой. Это требует недюжинной эрудиции и широкого кругозора.
Придумывать иконки со смыслом, глубоко отражающим суть — этому можно учиться всю жизнь.
Попробую немного разобраться в стилизации и техниках, а про умение находить визуальные метафоры напишу как нибудь в следующий раз.
Стилизация.
Стилизация — обобщение и упрощение изображаемых фигур по рисунку и цвету, произведение фигур в удобную для использования форму. Стилизация применяется как средство дизайна для усиления декоративности.
Часто форма иконки вызвана техническими ограничениями, избежать которых нельзя, но можно обыграть и использовать в декоративных целях.
Некоторые дизайнеры придумывают ограничения самостоятельно, чтобы добиться нужного визуального эффекта или подстегнуть фантазию.
Главной задачей стилизации является достижение изображением максимальной выразительности и эмоциональности в ущерб реалистичности и правдивости. Все несущественные детали отбрасываются, а характерные признаки и особенности, отражающие суть, акцентируются и выделяются.
Некоторое время назад дизайнеры шли от обратного — главным качеством иконки стало изображение гиперреалистичности и суперправдивости, детализация стала очень важна. Получались очень красочные и сочные иконки-иллюстрации.
Основные общие черты стилизованных объектов и декоративных изображений: лаконичность форм, обобщенность и символичность, красочность и геометричность.
Избавляясь от несущественных реалистичных деталей и заменяя их абстрактными элементами (натуральными или вымышленными) можно добиться абстрактной стилизации иконок. Такие иконки чаще всего уже более метафоричны, нежели содержат концептуальную графику.
Высшей формой отказа в изображении от несущественных реалистичных деталей с одновременной заменой их абстрактными элементами является абстрактная стилизация. Абстрактную стилизацию можно разделить на два вида: абстракция, имеющая натуральный образец, и абстракция беспредметная (вымышленная).
Приёмы и способы стилизации
Размер и масса
Стилизация, основанная на усреднении размеров — это основа основ, которая делает иконки собственно иконками. Зачастую довольно разрозненные по графике изображения будут вместе выглядеть довольно целостно, если привести их к единому базовому размеру. Чем меньшего размера иконки выходит сделать, сохраняя различимость и детализацию, тем выше уровень дизайнера.
Вторая очень важная вещь — это уравновешивание визуальной массы. Иконки из одного сета, поставленные рядом должны иметь примерно одинаковую визуальную плотность и уравновешенные композиции внутри себя. Особенно это важно для маленьких размеров. Focal Area & Proportions. Android
Хорошая заметка Алексея Черенкевича о том, как выравнивать иконки по визуальной массе, особенно если вы не задумались об этом перед тем, как начали рисовать.
Внимательно следите за совпадением расположения относительно базы для разных состояний иконок.
Форма, цвет и динамика
Чаще всего иконки стремятся к квадратной форме, что диктуется технологическими условиями, но так бывает не всегда. Большинство иконок нового бренда Mail.ru тяготеют к квадратной или круглой форме и имеют статичную композицию. Все острые углы имеют одинаковое мягкое скругление. Я бы еще изменил наклон иконок «линк» и «скрепка» влево, чтобы они больше перекликались с «поиском» и «маршрутом», у которых динамика направлена в другую сторону.
Также скругленный квадрат служит основной формой для иконок сета Material Design, который я уже приводил выше. Еще один пример хорошей формы — бейджи-иконки для приложения National Geographic от Valerie Jar.
Иногда не получается стилизовать иконки в какую-то форму: их слишком мало в сете, разная динамика выходит или просто не прет :) Тогда я пользуюсь лайфхаком — кладу их на фоновую плашку одной формы, так можно сделать целостный сет минимальными усилиями. Например, такой прием использовала студия FireArt, также их иконки хорошо объединяет динамика — в каждой иконке четкое движение слева на право.
Линия
Линия как главный образующий элемент — очень частый прием. Наиболее ярким представителем тут может выступить компания Apple со своим руководством по дизайну иконок для iOS.
Главный принцип использования линии — выбрать одну или две толщины для всего сета и последовательно обыграть все элементы следуя выбранной графике и пропорциям. Одинаковые изломы, радиусы скруглений, прерывание линии — тут все годится.
Классную стилизацию линией делает иллюстратор Ryan Putnam.
3D и Перспектива
До этого речь шла про плоские иконки в двух измерениях. Если говорить о трехмерных иконках, то тут дизайнерская мысль гуляет широко. В ходу как одно-, двух- и трехточечная перспектива, изометрия и псевдообъем, иногда и более хитрые правила посторения объемных картинок. Инструментами могут служить как обычные 2D, так и 3D редакторы.
Псевдобъемными иконками я называю двумерные плоские иконки, которым придали глубины играя светом и тенью. Чем меньшего размера картинки может сделать дизайнер, сохраняя детализацию, тем выше его мастерство, особый шик — смайлики 16х16 px.
Сейчас тренд псевдообъемных иконок возвращается снова, на сей раз с мягкими не контрастными цветами и тенью.
Если же говорить о классическом 3D моделинге, применяемого к иконкам, то здесь дизайнеры редко используют только 3D редакторы: зачастую болванки с правильно выставленным светом и текстурами переносятся в Photoshop и дальше доводятся до блеска вручную. Как пример, иконка выше — пылесос от TrySoda.
Такие гиганты как Microsoft, Google и Apple имеют свои руководства по созданию дизайна для операционных систем, в том числе и с рекомендациями по построению перспективы и света в иконках.
Ссылки на некоторые материалы:
Нельзя не упомянуть пиксел-арт, хотя это немного и выходит за рамки статьи, цепляя игровую индустрию. Много игровой графики в прошлом рисовалась в этой технике. На волне интереса к прошлому и возврата к истокам гейм-индустрии уже довольно часто можно увидеть пиксел-арт графику в современных играх.
По части изометрии иконок собаку съели именно художники и дизайнеры-игроделы. Ведь раньше производительность техники не позволяла делать полноценные сцены в 3D и все делалось руками. Изометрию как рисуют, так и пререндерят, например в 3ds Max, закладывая готовые картинки в редакторы уровней и сцен. Сейчас её используют для передачи «старины» и игр, где такая графика считается классикой. Хотя дизайнеры и програмисты уже используют вполне современные инструменты.
Мы ничем не ограничены ни в выборе стилистики, ни инструментах — делайте круто то, что вам нравится и все получится. Спасибо за внимание, это мой дебют на Medium, надеюсь статья вам понравилась и будет полезна.
Удачи, вдохновения и классных иконок!
