Составной контур Illustrator: как проверить отверстие в простой пиктограмме

Если в пиктограмме нужен настоящий вырез, а не белое пятно поверх заливки, проверка строится вокруг одного признака: отверстие должно показывать фон и внутри файла, и после экспорта. В Illustrator это обычно означает, что внешняя форма и внутренняя форма собраны в составной контур. Ниже разберем, как проверить такую пиктограмму на одном условном учебном кейсе, не путая задачу с масками и не полагаясь на белый фон монтажной области.

Исходные замкнутые фигуры

Для устойчивого отверстия нужны две простые вещи: внешняя фигура и внутренняя фигура должны быть замкнутыми контурами. На практике ошибка часто возникает так: внешняя часть нарисована фигурой с заливкой, а внутренний «кружок» сделан только обводкой или незамкнутым пером. На экране это может выглядеть убедительно, но при попытке собрать составной контур результат получится непредсказуемым: внутренний элемент не станет чистым вырезом или даст странное поведение при заливке.

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

Еще одна полезная привычка: смотреть не на цвет, а на устройство формы. Пока фигуры отдельные, они могут выглядеть «как надо» только случайно, потому что совпали с цветом фона. Поэтому на подготовительном этапе лучше считать, что белый фон монтажной области вам мешает. Он скрывает ошибку чаще, чем помогает ее заметить.

Отверстие и наложение

Самая частая ложная версия отверстия — белая фигура поверх цветной. На белой монтажной области такой прием выглядит почти как прозрачность, и из-за этого ошибка доходит до экспорта. Проблема проявляется позже: вы меняете цвет пиктограммы, переносите ее на темный фон или ставите на цветной блок, и становится видно, что центр не вырезан, а просто закрашен белым.

Учебный пример (условный)

Соберем простую пиктограмму камеры размером 64 × 64 px. Внешняя форма — скругленный прямоугольник 48 × 48 px с радиусом углов 8 px, выровненный по центру монтажной области. Внутренняя форма — круг диаметром 18 px, тоже по центру. На первом проходе не делаем составной контур, а просто кладем белый круг поверх темно-синего прямоугольника. На белом фоне это выглядит как аккуратное отверстие объектива.

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

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

Составной контур

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

В нашем учебном примере после создания составного контура камера должна вести себя иначе. Если вы меняете цвет всей пиктограммы с зеленого на черный, отверстие не становится белым или серым — через него просто виден фон. На светло-сером фоне центр выглядит светло-серым, на оранжевом — оранжевым. Это и есть главный признак, что форма собрана верно. Внутренний круг больше не «лежит сверху», а вычитает область из общей фигуры.

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

Если после создания составного контура результат получился не тем, обычно проблема в геометрии исходных фигур. Внутренний контур мог оказаться незамкнутым, слишком маленьким, случайно смещенным или касающимся края внешней формы. Поэтому проверка здесь не сводится к команде в меню: она сводится к тому, чтобы после объединения объект действительно показывал фон там, где вы ожидали увидеть вырез.

Проверка экспорта

Проверять отверстие нужно не только в рабочем файле, но и в экспортированной версии. Иначе легко получить значок, который корректно выглядит внутри Illustrator, но при размещении в макете теряет ожидаемое поведение. Для учебной пиктограммы достаточно двух экспортов: SVG для вектора и PNG с прозрачностью для растра. Смысл проверки одинаковый: фон под файлом должен быть виден через отверстие.

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

У нашего условного примера итог легко проверить без догадок. До создания составного контура круг в центре был белой накладкой. После создания составного контура и экспорта камера стала одним объектом с прозрачным отверстием. На сером фоне центр серый, на оранжевом — оранжевый, при перекраске самой пиктограммы отверстие не получает собственной заливки. Это и есть practically useful результат: вы уверены, что значок поведет себя одинаково в интерфейсе, презентации и веб-графике, а не «сломается» при первом же переносе на другой фон.

Если хотите отрабатывать такие задачи по готовой учебной последовательности, посмотрите программу курса Adobe Illustrator с нуля. По официальной странице в ней есть темы про иконки для интернет-магазина, подготовку файлов для веба и отдельный модуль с составными контурами. Для себя полезно заранее проверить: будет ли в практике именно пиктограмма с вырезом, сможете ли вы показать исходный файл до и после сборки, и как у вас будет проверяться экспорт на разных фонах.