Как сгладить края в иллюстраторе
Перейти к содержимому

Как сгладить края в иллюстраторе

  • автор:

Плавное скругление углов в Adobe Illustrator

Возможно, вы в курсе, что стандартный способ скругления углов — при помощи простого встраивания фрагментов окружностей — не лучший из вариантов.

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

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

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

Тут форму иконки назвали Squircle (он же суперэллипс при параметрах n = 4, a = b = 1), и в комплекте обязательно должны идти задротские уточнения, что на самом деле форма иконок у эпла не совсем скитлс…сквиртл. сквиркл и всё на самом деле куда сложнее, но нас эти поиски Святого Грааля не очень интересуют. Важно понять разницу между обычным скруглением и плавным: при обычном скруглении в точке примыкания дуги окружности к прямой возникает резкий скачок кривизны, и эта неплавность довольно заметна, глаз запинается на этой точке как на необработанном грубом шве. При плавном скруглении кривизна нарастает постепенно без резкого скачка, прямая переходит в дугу бесшовно.

Можно еще представить скругленный угол как траекторию автомобиля, и тогда кривизна в точке кривой будет показывать, насколько сильно повернут руль при прохождении этого участка поворота. Очевидно, что у водителя руль не дергается мгновенно из положения «прямо» в состояние «направо на 90°» и затем в миг обратно в прямое положение. В реальности руль крутится плавно из прямого положение в крайнее и обратно, без возможности пропустить какие-то промежуточные углы поворота. Естественное и приятное глазу скругление углов содержит такую же плавную «траекторию» линии.

Если на языке математики: обычное скругление встраиванием дуги обеспечивает непрерывность только первой производной (кривая поворачивает плавно без скачков), а плавное скругление — еще и второй производной (скорость поворота кривой изменяется плавно без скачков).

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

Плавное скругление в графических редакторах — Фигма и Скетч

Но вернемся в двухмерное пространство. Отчасти косяки с сопряжением кривизны так распространены из-за отсутствия подходящего инструмента правильного скругления. Реализовать скругление пристраиванием кусков окружности гораздо проще, поэтому этот метод доминирует и идет по-умолчанию везде, где речь идет о скруглении, будь то графические редакторы, программистские библиотеки графики или CSS-правило border-radius .

Только в 2017 году в Скетче и в 2018 в Фигме появилась возможность плавно сглаживать углы. Если немного вдаться в анализ предложенных решений,то в Фигме реализовали эту возможность куда лучше. Во-первых, в Фигме она применяется к конкретному углу, а не к фигуре в целом, что позволяет применять плавное скругление к любым кастомным фигурам (path), а не только к стандартным «каталожным» (прямоугольник, треугольник и т.д.), как это сделали в Скетче.

Во-вторых, в Фигме мера сглаживания скругления регулируется ползунком, тогда как в Скетче это бинарная опция: или скруглять плавно, или обычно.

Вообще, тему плавного скругления углов с математической точки зрения полностью раскрыл в блоге Фигмы (перевод на Хабре) инженер, занимавшийся реализацией этой фичи. По этой публикации и самому интерфейсу реализации фичи вновь хорошо заметно, как разработчики и дизайнеры увлечены поиском рецепта идеального скругления квадрата «как в иконках iOS», хотя плавное скругление углов будет кстати везде, где есть скругленные углы, а не только в форме иконок приложений, и угол в иконке iOS не единственный обеспечивает сопряжение кривизны, это лишь один из возможных вариантов.

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

Плавное скругление в Иллюстраторе

Что же касается вроде бы еще самого популярного векторного редактора Adobe Illustrator, тут всё печально: медленный и неповоротливый Adobe только в 2014 добавил обычное скругление углов (corner radius), а про нативное плавное скругление пока и фантазировать нечего. Но способы добиться кастомизации скругления в Иллюстраторе всё же есть:

Илья Бирман в той самой заметке предлагал подвигать усики точек углов вручную на свой вкус. Минус тут в ручной обработке каждого угла и в том, что это «на свой вкус» особо никак не зафиксировать, каждый угол будет поправлен немного по-своему.

Сергей Стеблина в заметке, которая больше не открывается, предложил выделять усики точек-оснований угла (но не сами эти точки) и применять к ним масштабирование. Этот способ позволяет единообразно и относительно шустро править все скругления, но всё равно каждый угол необходимо обрабатывать отдельно, к тому же таким способом нельзя отодвинуть саму точку чуть назад для компенсации визуального уменьшения радиуса угла.

Егор Чистяков открыл способ получить сквиркл из квадрата при помощи особой Appearance-магии с комбинацией варп-эффектов.

Еще есть платный скрипт для рисования прямоугольников с плавно скругленными углами.

Наконец, платный плагин VectorScribe в последней версии обзавелся режимом скругления Squircular, но без дополнительных настроек меры сглаживания скругления.

Мой скрипт плавного скругления для Иллюстратора

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

Cкрипт сам не скругляет углы, а исправляет уже существующие стандартные скругления. И сразу скажу, что при помощи моего скрипта не получится получить то самое идеальное скругление «как в иконках iOS» просто потому, что и в официальной интерфейсной библитеке эпла, и в Скетче с Фигмой после применения уже рассмотренного выше плавного «эпловского» скругления эта заветная форма угла обеспечивается аж четырьмя точками кривой Безье на каждый угол:

Я же хотел своим скриптом не плодить лишние сущности и обойтись без добавления дополнительных точек, ограничиться лишь мягкой настройкой «усиков» уже существующих точек скругленного угла. Поэтому скрипт проделывает ровно два действия: оттягивает точки сопряжения «прямая-дуга» чуть назад от угла и взамен чуть вытягивает вперед их «усики». Как-то так:

Соответственно, у скрипта два параметра: насколько отодвинуть от угла точку (Anchors coef) и насколько в обратную сторону подвинуть усик (Handles coef).

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

По сути двумя ползунками перераспределяетя эта площадь профиля кривизны угла — размазывается равномерно по всему углу или собирается в горбик.

Конечно же, скрипт умеет обрабатывать сразу все углы объекта:

Или только выделенные:

Или хоть все объекты за раз:

Понимаю, что два не очень явно влияющих на результат параметра у скрипта — не самый удобный и интуитивный вариант по сравнению с другими инструментами (один ползунок у Фигмы и вкл/выкл в Скетче и плагине Vectorscribe), но я решил не пытаться придумать способ их объединить в один параметр или чекбокс, отбирая точность настройки. Этот скрипт всё же маленький профессиональный инструмент, а не продукт.

Поэтому вместо кнопки «Сделать Классно Как У Эпла» предлагаю поиграться с ползунками, подобраться подходящие сочетания коэффициентов и сохранить их в пресеты. Например, дизайнер транспортных схем может завести разные пресеты скругления для всех встречающихся углов поворотов в его схеме: 30°, 45°, 60°, 90°, 120°, 135°. Какие-то пресеты уже идут в комплекте со скриптом, при ненадобности их можно удалить.

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

UPD: Ранее тут писалось, как изменениями в коде скрипта можно отключить отображение профиля кривизны. Начиная с версии 0.0.4 отвечающую за это чекбокс появился в панели настроек скрипта.

Остальные параметры я не стал выносить в интерфейс, но их можно менять в коде.

Ссылка на скрипт

Пишите багрепорты в репу, а если не умеете — то в телеграм, на почту jjj@kefiijrw.com или в анонимку.

Бонус. Способы запуска скрипта

Узкое место использования скриптов для Иллюстратора — их очень лениво запускать, когда они вдруг оказываются нужны, потому что в Иллюстраторе это сделано не очень удобно — по умолчанию скрипты не лежат под рукой на какой-нибудь панельке, надо в меню лезть, потом в диалоговом окне искать файлик скрипта на компьютере. Преодолеть этот порог лени можно, один раз заморочившись и настроив удобный запуск скрипта, но это самое «один раз взять и сделать» требует преодоления еще большего порога лени, и вот на этом великом балансе лени «лениво запускать скрипт стандартным неудобным способом» — «лениво настроить удобный запуск скрипта» и держится хрупкий мир автоматизации дизайнерской рутины. Я просто перечислю все варианты запуска скрипта, и каждый уже выберет свой уровень сложности.

Способ 1 «Ленивый как черт, упорный как сатана»

Просто перетягивать файлик скрипта в окно иллюстратора

Способ 2 «Фанат диалоговых окошек»

Тыкать в меню Иллюстратора File → Scripts → Other Script… и там дальше искать файлик скрипта в дебрях файловой системы.

Способ 3 «Триумф воли»

Один раз заставить себя положить файлик скрипта в папку /Applications/Adobe Illustrator [vers.]/Presets.localized/en_GB/Scripts (Макось) или C:\Program Files\Adobe\Adobe Illustrator [vers.] (64 Bit)\Presets\en_GB\Scripts\ (Винда), перезагрузить Иллюстратор и потом уже достаточно будет тыкать на скрипт в выпадающем меню File → Scripts.

Способ 4 «Почти программист»

После добавления скрипта в меню (способ 3) записать экшен, который этот скрипт запускает. Для этого понадобится фича Insert Menu Item… из выпадающего меню панели Actions. Она позволяет добавить в экшен выполнение любого пункта из меню программы. А так как после предыдущего способа скрипт уже находится в меню File → Scripts, он находится по имени наравне со всеми остальными пунктами.

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

Но на мой вкус лучше всего настроить у экшена хоткей.

Способ 5 «Кастомизатор»

Установить один из плагинов, который позволяет запускать скрипт в один клик со специальной панельки. Из известных мне: JSX Launcher, LAScripts, Script Bay, Scripshon Trees, SPAi, Sppy.

Формирование более гладких краев и кривых с помощью инструмента «Сглаживание»

Крапинки на клубнике сглажены с помощью инструмента «Сглаживание».

Дважды щелкните инструмент Сглаживание , чтобы открыть диалоговое окно Параметры инструмента «Сглаживание» . Настройте параметр Точность инструмента , чтобы изменить количество опорных точек, добавленных к контуру при использовании инструмента.

Упрощение контура

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

Упрощение контура

Упрощение контура

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

Упрощение контура предоставляет следующие преимущества:

  • простое и точное редактирование контуров;
  • уменьшенный размер файлов;
  • ускоренные отображение и печать файлов.

В каких случаях необходимо упрощать контур?

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

Sim

A. Исходное изображение B. Изображение после трассировки или импорта (максимальное количество опорных точек) C. Изображение после упрощения контуров (оптимизированные опорные точки)

Sim

Автоматическое упрощение контура

Выберите объект или определенный участок контура.
Выберите Объект > Контур > Упростить .
Ненужные опорные точки автоматически удаляются, и рассчитывается упрощенный контур.

Упрощение контура

A. Ползунок для уменьшения количества опорных точек B. Автоматическое упрощение опорных точек C. Дополнительные параметры

Упрощение контура

Упрощение контура вручную

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

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

Расширенное управление упрощением

Нажмите кнопку Дополнительные параметры (), чтобы открыть диалоговое окно «Упрощение» с дополнительными параметрами.

Упрощение контура

Упрощение контура

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

Совет. Если хотите быстро сгладить углы при меньшем количестве опорных точек, используйте ползунок Изгиб кривой в точке излома синхронно с ползунком Упрощение геометрии кривой.

При изменении опорных точек или значения предела угла точки кривой Illustrator автоматически рассчитывает и отображает количество исходных и новых опорных точек.

Новые и исходные точки

Новые и исходные точки

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

Установите флажок Преобразовать в прямые линии, чтобы провести прямые линии между исходными опорными точками объекта.

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

Угловые точки остаются без изменений, когда пороговое значение больше, чем автоматически рассчитанное пороговое значение, используемое по умолчанию (90°).

Пример: упрощение и редактирование контура с дополнительными параметрами

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

  • Уменьшение количества опорных точек в выбранной области.
  • Создание острых углов в выбранной области.
  • Преобразование контура в прямые линии в выбранной области.

Инструмент «Сглаживание»

Share on Facebook

Share this.

Pin on Pinterest

Tweet about this on Twitter

Share on VK

Share on Tumblr

Print this page

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

Инструмент

Сперва построим объект который нужно будет обработать. Возьмем к примеру карандаш и нарисуем кривую линию с острыми углами.

Инструмент

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

Инструмент

Отпустив мы увидим что края были сглаженными.

Так же инструмент имеет дополнительные настройки сглаживания. Для этого стоит дважды кликнуть по инструменту, или нажать клавишу «Enter».

Инструмент

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

Share on Facebook

Share this.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *