Начинающие рисуют иконки пером, точка за точкой, и застревают на первой же чуть сложной форме: облако выходит кривым, а поправить его — значит перетаскивать десяток опорных точек и молиться. Опытные же почти не рисуют иконки в буквальном смысле — они их собирают из простых фигур, комбинируя. И облако, и шестерёнка, и замок, и стрелка получаются из кругов, прямоугольников и звёзд за пару операций. Инструмент, который это позволяет, — булевы операции, и стоит один раз понять их логику, как иконография перестаёт быть страданием.
Идея пришла из геометрии множеств, но пугаться математики не надо: на практике это четыре понятных действия над перекрывающимися фигурами. Разложим их, а потом соберём из них несколько настоящих иконок.
Четыре операции, которые решают всё
Объединение склеивает несколько фигур в одну сплошную форму — общий контур там, где они перекрываются, исчезает. Два круга и прямоугольник между ними превращаются в гантель или в облако. Вычитание прорезает нижнюю фигуру верхней, как формочка для печенья: круг минус круг поменьше даёт кольцо. Пересечение оставляет только ту область, где фигуры перекрываются, и выбрасывает всё остальное — так из двух кругов получается линза, а из круга и квадрата — четвертинка с одной скруглённой стороной. Исключение — зеркало пересечения: оно, наоборот, убирает общую зону и оставляет всё, что не перекрылось.
Четырёх операций хватает на всё. Вся сложность иконки сводится к вопросу «какие простые фигуры и в каком порядке скомбинировать», а это уже не рисование, а сборка — предсказуемая и быстрая.
Собираем облако за минуту
Классика для тренировки. Возьмите три круга разного размера, поставьте их внахлёст в ряд — большой в центре, поменьше по бокам, — и добавьте снизу прямоугольник, соединяющий их основания. Выделите всё, примените объединение — и разрозненные фигуры схлопнутся в единый мягкий силуэт облака. Никаких опорных точек, никакого выравнивания кривых: вы двигали простые фигуры, а форму собрал редактор.
Тот же приём работает для десятков иконок. Шестерёнка «настройки» — это круг, из которого вычли круг поменьше (получилось кольцо), а по краю объединили прямоугольные зубцы. Замок — скруглённый прямоугольник корпуса плюс дужка, собранная вычитанием одного круга из другого. Стрелка «поделиться», значок документа с загнутым углом (прямоугольник минус треугольник), кнопка «плюс» из двух пересекающихся полос — всё это комбинации двух-трёх примитивов.
Порядок и наложение решают результат
Главная тонкость, о которую спотыкаются, — вычитание и исключение зависят от того, какая фигура сверху, а какая снизу. Вычитание всегда прорезает нижнее верхним, поэтому если результат оказался «наоборот», дело обычно в порядке слоёв: поменяйте фигуры местами по глубине, и вырез встанет как надо. С объединением и пересечением порядок не важен — они симметричны. Это различие стоит просто запомнить, чтобы не гадать, почему «вырезалось не то».
Ещё один рычаг — насколько сильно фигуры перекрываются. Сдвиньте вычитаемый круг на пару пикселей — и толщина кольца изменится; чуть разведите два круга перед пересечением — и линза станет тоньше. Часто финальную форму доводят именно микро-сдвигами операндов, а не перерисовкой. В этом и прелесть: вы правите вход, а не результат.
Булевы и перо — не враги, а пара
Булевы операции не отменяют перо — они делят с ним работу. Простую и геометричную часть иконки быстрее собрать из примитивов булевыми, а органичную деталь, которую не выразить кругами, — дорисовать пером и подключить к общей форме объединением. Мастера свободно переключаются между двумя подходами внутри одной иконки, выбирая для каждого фрагмента то, что быстрее и точнее.
Попробуйте прямо сейчас. Откройте редактор, нарисуйте два круга внахлёст, выделите оба и найдите в тулбаре дропдаун булевых операций. Примените вычитание — получится месяц-полумесяц. Теперь поменяйте круги местами по глубине и повторите — вырез уйдёт в другую сторону. Пять минут такой игры дают больше понимания, чем любая теория множеств.
Когда булевы — лишнее
Инструмент мощный, но не универсальный. Если форму можно получить готовой фигурой — не собирайте её булевыми ради принципа. Скруглённый прямоугольник не нужно вырезать из двух форм, у него есть параметр скругления; звезду не нужно клеить из треугольников, есть фигура звезды с настройкой лучей и внутреннего радиуса. Булевы включаются там, где готового примитива нет: кольца, полумесяцы, вырезы, сложные силуэты. Правило простое — сначала ищите форму в наборе фигур, и только если её там нет, беритесь за комбинирование.
И держите в голове читаемость на мелком размере. Иконка почти всегда живёт в 16–24 пикселях, где тонкие детали сливаются. Собирая её булевыми, проверяйте результат в реальном масштабе: то, что эффектно смотрится крупно, в размере тулбара может превратиться в пятно. Хорошая иконка узнаётся силуэтом, а не филигранью, — и булевы операции как раз помогают лепить чистый силуэт из простых объёмов.
Одна форма, готовая к переиспользованию
Собранная иконка — это цельная форма, и её логично сразу превратить в компонент: тогда она встанет в вашу библиотеку рядом с остальными и обновится везде, стоит поправить оригинал. Так набор из примитивов превращается в аккуратную иконографику продукта — единую по стилю, потому что все иконки собраны одними и теми же приёмами из одних и тех же простых фигур. Начните с облака — и вы удивитесь, как быстро рука привыкает думать формами, а не точками.