В цифровой графике компьютеры прорисовывают векторные формы, используя набор точек. Это своего рода «соединение в одно целое», и большинство программ используют Кривые Безье для создания изогнутых линий, соединяя эти точки вектора. Вы, наверняка, видели такую функцию в инструментах для дизайна статической и анимированной графики. Однако понять, как она работает, чтобы добиться конкретной формы, не так просто. Эта статья поможет пролить свет на магию кривых Безье.

Как работают Кривые Безье

Хотя есть разные типы кривых Безье (они отличаются способами управления кривой и сложностью построения), «кубическая кривая Безье» (кривая Безье третьего порядка) используется чаще других в разработке графики — и это единственный метод, доступный в Sketch. Так как же работает кубическая кривая Безье?

Как работают Кривые Безье в Sketch 3

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

Графика создавалась с использованием Sketch, SVG Animation и еще парочки ловких инструментов. Вы можете ознакомиться с упрощенным кодом на CodePen.

Если вам не интересно, как компьютеры рисуют Кривые Безье, просто перейдите к следующим разделам статьи, в которых описаны практические советы для всех уровней.

Я настоятельно рекомендую использовать последнее обновление Sketch 3, версия 3.1.

Использование рычагов управления Безье на практике

Пример на видео выше основывается на двух точках (прямой), в то время как большинство других векторных форм строятся из значительно большего количества точек. Фактически, чаще всего из одной точки на кривой Безье выходит два рычажка управления — по одному с каждой стороны. Ниже показано несколько способов создания кривой вокруг векторной точки в Sketch:

создания кривой вокруг векторной точки в Sketch

«Mirrored» (Зеркальный способ) выбран по умолчанию, является самым простым способом управления кривой Безье. В данном подходе используется два рычага, которые равноудалены от векторной точки и находятся под одинаковым углом. Рычаги как будто формируют прямую линию, «касательную» к кривой. Опция Mirrored основывается на следующем принципе: если оба рычага под одним углом, кривая будет иметь абсолютно гладкую форму; другими словами, в форме не будет никаких видимых углов/точек, как в случае с опцией Disconnected.

Mirrored

«Asymmetric» (Асимметричный) способ похож на Mirrored, так как ручки управления также находятся под одним углом, но края ручки удалены от векторной точки на разное расстояние. Эта опция особенно полезна, когда нужно придать более заостренную форму кривой на одной из сторон.

Asymmetric

«Disconnected» (Разомкнутый способ) позволяет управлять каждой ручкой независимо от другой. Такая опция необходима в двух случаях:

  1. Вам бы хотелось переломить ход кривой в векторной точке, сменить угол ее направления.
  2. Вам необходимо избавиться от одного рычага; иметь контроль над кривой только с одной стороны от точки, и вообще не продолжать кривую с другой стороны. Если вы выбираете такой вариант, кликните на том рычаге, который вы хотите удалить, и нажмите кнопку «delete».

Disconnected

Точки с прямым углом и закругленные углы:

Когда выбрана опция Straight (прямой), у векторной точки вообще нет ручек управления, и через нее не проходит кривая. Если на двух соседних векторных точках выбрана эта опция, их будет соединять простая прямая линия. Sketch предоставляет вам возможность закруглить угол любой точки Straight (по типу border radius). И хотя в Sketch можно скруглить любой угол в два счета с помощью точки и значения радиуса, сама программа реализует это расчетом кривых Безье. Если вы желаете увидеть эти Кривые Безье, просто объедините слои вашей формы.
Точки с прямым углом и закругленные углы

Возьмите под контроль свои рычаги!

В построении кривых Безье многим не понятно, как разместить векторные точки для достижения желаемой формы. Дизайнер и художник-шрифтовик Дэйв Коулмен из AGSC недавно написал отличную статью. Я выделю основные ее моменты:

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

Когда все точки расставлены по своим местам, пора поиграться с рычагами. Выравнивание рычагов Безье вертикально или горизонтально в большинстве случаев смягчит переходы по кривой, делая ее более совершенной. Так как вам необходимо двигать рычаги только вдоль одной оси, весь процесс построения кривых значительно упрощается.

Кроме тех случаев, когда почему-то так не происходит. Иногда кривую нельзя никак полностью воспроизвести, если рычаги Безье не под углом, или когда векторная точка не находится в самой выступающей точке. Это НОРМАЛЬНО. Как и в любом другом руководстве, здесь бывают исключения. Изучайте правила, следуйте им, понимайте — и при необходимости — ломайте.

Вам, наверняка, будет приятно узнать, что существует быстрый способ установить рычаги Безье под углом 90°: просто держите нажатой кнопку «shift», пока двигаете контрольную точку рычага. Если эта функция не работает должным образом, как показано на графике ниже, проверьте, выключен ли режим «округления». Если вы используете округление до полного пикселя («Round to full pixel edges») или до полупикселя («half pixel edges»), и векторная точка находится не в точной пиксельной или полупиксельной позиции, рычаги не будут точно поворачиваться на угол 90°.

1-xBr3E3stOxxjZzhnf-Sjlg@2x

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

1-jDoVIF-kR0tmrzTsVMoPQA@2x

Спасительная скрытая опция

Работая над созданием логотипа, я обнаружил важную, но почему-то спрятанную функцию в Sketch: свои координаты есть не только у векторных точек, каждый рычаг управления кривой Безье тоже имеет их. И это вполне логично: эти координаты очень нужны компьютеру, чтобы прорисовать кривую. Но то, что в Sketch есть возможность установить их вручную, сразу обнаружить тяжело.

Эту функцию легко упустить, потому что вид рычагов не меняется при клике на них — меняются только значения X и Y позиции в инспекторе. Имея возможность настраивать координаты рычагов, я успешно решил все эти головоломки и поставил рычаги Безье точно туда, куда хотел. Более того, стало легче производить мелкие настройки (измеряемые долями пикселя). Попробуйте эту опцию сами; изменяйте кривую Безье, двигая рычаги, а затем установите их позицию вручную в инспекторе.

1-3T8vRVHileAk1Ogl4c8jXA@2x

Еще немного советов и быстрых клавиш

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

При редактировании формы, вы можете выбрать следующую векторную точку на кривой, нажав «tab» на клавиатуре. «Shift» + «tab» поможет выбрать предыдущую точку. Будет ли «следующая точка» по часовой или против часовой стрелки зависит от направления формы.

Когда векторная точка выбрана, нажимайте клавиши 1, 2, 3 и 4 на клавиатуре, чтобы переключаться между режимами straight, mirrored, disconnected и asymmetric.

Если удерживать клавишу «Command» (⌘), двигая векторную точку, Sketch будет игнорировать «smart guides», что поможет вам выровнять точку по вертикали или горизонтали с остальными.

Если удерживать клавишу «Command» (⌘), двигая рычаг Безье, вы сможете менять позицию этого рычага свободно и независимо от другого, как если бы векторная точка находилась в режиме Disconnected. Помните, если точка находится в режимах Mirrored или Asymmetrical, передвижение рычага без удержания клавиши Command сбросит результаты в режиме Disconnected. Попробуйте и посмотрите, как все это работает!

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

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

Отличный способ попрактиковаться — отрисовка шрифтов. Возьмите фотографию или рисунок красивой буквы (что-то изогнутое, вроде «G», «Q», «R», или другой символ рукописного шрифта), перенесите это изображение в Sketch, и используйте векторный инструмент для отрисовки контура этой буквы. Постарайтесь разместить векторные точки в самых выступающих местах объекта, используйте вертикальные или горизонтальные рычаги и настройте их вручную, используя координаты.

И не забудьте поделиться своими шедеврами! Используйте #sketchbezier в Twitter и Instagram. Я тоже опубликую некоторые свои наработки. Мир остро нуждается в красивых кривых!

#sketchbezier