Как сделать кривую безье цветной

Добавил пользователь Алексей Ф.
Обновлено: 05.10.2024

Аннотация: В этой части курса мы продолжим изучать базовую технику рисования в CorelDRAW и продолжим знакомство с кривыми Безье.

Рекомендации по технике рисования кривых

Для освоения технологии рисования произвольных кривых линий мы рекомендуем придерживаться следующих правил:

• старайтесь строить контуры, минимизируя число узловых точек. Меньшее количество узловых точек упрощает и ускоряет процедуру редактирования формы кривой, а сама кривая получается более плавной и занимает меньше места в памяти компьютера;
• если вы неудачно поставили последнюю опорную точку кривой, не старайтесь скомпенсировать форму кривой, используя в дальнейшем слишком длинные или неестественно короткие касательные линии. Вместо этого лучше удалить последнюю точку, нажав клавиши Ctrl+Z или нажав на последней точке правой кнопкой мыши и выбрав из контекстного меню команду Undo Curve Append (Отменить добавление к кривой). После этого для продолжения рисования нажмите на последнюю оставшуюся точку и после того, как у нее появятся касательные отрезки, продолжите рисование этой кривой снова. Нажатие клавиши Del удаляет всю кривую;
• чтобы построить вертикальный или горизонтальный отрезок, или отрезок, расположенный под углом, кратным 15-ти градусам, удерживайте клавишу Ctrl;
• для того, чтобы продолжить рисование любой кривой, ее нужно предварительно выделить. На кривой будут отображены узловые точки, а первая узловая точка будет несколько большего размера, чем остальные. Затем выберите инструмент Bezier (Кривая Безье) и нажмите на одну из концевых точек контура. У этой точки появятся маркеры касательных, и после этого можно продолжать рисовать эту кривую так, как было описано выше.

Пример 3.1. Применяем кривые на практике и рисуем сердечко

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

1. Выберите на панели графики инструмент Ellipse (Эллипс) и, удерживая нажатой клавишу Ctrl, нарисуйте круг.
2. Щелкните на круге правой кнопкой мыши и выберите из появляющегося контекстного меню команду Сonvert to curves (Преобразовать в кривые). Обратите внимание, что круг превращается в контур (форму), содержащую четыре узла: сверху, снизу, справа и слева.
3. Выберите инструмент Shape (Форма) и выделите им нижний узел ( рис. 3.1).

Атрибуты объекта (заливка и обводка)

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

Обводка или абрис

Инструмент Outline Color (Обводка) характеризуется следующим набором параметров (атрибутов):

• толщина линии;
• стиль (например, пунктирная линия);
• параметры углов и концов линий обводки (например, стрелки);
• цвет.

В CorelDRAW для настройки параметров обводки используется окно диалога Outline Pen (Параметры обводки) ( рис. 3.4).

Терминология в данном окне такова:

• Line caps (Концы линий) - позволяет установить вариант оформления окончания незамкнутой линии: срезанный, закругленный или квадратный;
• Corners (Углы) - предназначен для настройки типа соединения соседних сегментов контура: угловой, срезанный или закругленный;
• Аrrows (Стрелки) - позволяет оформить концы незамкнутой линии в виде разнообразных форм стрелок или оперений;
• Style (Стиль) - предназначен для выбора структуры обводки контура: сплошная, пунктирная, штрих пунктирная и т. п.

Заливка

Как уже отмечалось, заливкой называется закраска внутренней области контура. Fill Color (Заливка) является вторым цветовым атрибутом объекта (контура). В ряде векторных редакторов эта характеристика присуща только замкнутым контурам. Варианты заливок таковы:

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

Комбинированные объекты

Векторное изображение может состоять из десятков и сотен объектов. Для составных объектов в CorelDRAW предусмотрена группа операций:

• группировка объектов;
• их объединение;
• использование составных контуров.

Группировка объектов

Операция группировки состоит в объединении двух или более объектов в одну группу. Со сгруппированным объектом можно обращаться как с единым целым (перемещать, поворачивать, растягивать и так далее).

Группировка выполняется командой Arrange (Монтаж) | Group (Сгруппировать). Предварительно перед ее применением следует выделить все объекты, которые необходимо объединить в группу, с помощью инструмента Pick (Указатель). Это осуществляют путем протягивания с помощью мыши прямоугольной рамки выделения, захватывающей все группируемые объекты (или последовательным выделением объектов с удержанием Shift).

Каждый элементарный объект, объединенный в результате применения этой операции в группу с другими объектами, сохраняет свои свойства. Поэтому при необходимости вы всегда можете выполнить обратную операцию - разгруппировать группу объектов командой Arrange (Монтаж) | Ungroup (Разгруппировать) и работать с каждым объектом индивидуально.

Булево взаимодействие объектов

В современных векторных редакторах предусмотрены различные варианты слияния графических объектов. Наиболее распространенными из них являются три процедуры, принцип действия которых основан на использовании базовых логических операциях ИЛИ, НЕ, И. Перечисленные команды расположены в подменю, для отображения которого необходимо выбрать команду Arrange (Монтаж) | Shaping (Формирование).

Взаимодействие двух исходных объектов приведено на рис. 3.5-3.7.

После выполнения команды Weld (Объединение), соответствующей логическому ИЛИ, в результирующий контур входят все области нижнего и верхнего контура ( рис. 3.5).

В случае применения команды Trim (Исключение) результирующий контур ( рис. 3.6) представляет собой "вырубку" одного объекта из другого (операция НЕ). Команда удаляет те части объекта, которые перекрываются с частями других объектов.

При выполнении команды Intersection (Пересечение) в результирующий контур входят только пересекающиеся (общие) области объектов ( рис. 3.7). Это графический аналог логической операции И.

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

Обучение переводу статей англоязычной документации, статьи про алгоритмы, а также LifeHacks, статьи по Компьютеру и Программированию, Журнал для Детей, Математику и смежные науки Инженерии.

Поиск по этому блогу

Алгоритмы - Кривые Безье

Данная статья посвящена компьютерной графике, точнее её двухмерной части — Кривым Безье. Статья расскажет Вам, как построить самостоятельно кривую Безье. Что в дальнейшем поможет Вам в Ваших приложениях для векторной графики. На основании этой статьи Вы сможете построить свой графический редактор.

1. Введение

Поле де Кастельжо предложил их геометрическое рекурсивное обоснование. Пьер Безье предложил только их математическую формулировку.

Кривая Безье является частным случаем многочленов Бернштейна, описанных Сергеем Натановичем Бернштейном в 1912 году.

2. Кривая Безье

Кривая Безье записывается следующим параметрическим выражением:

, а P_i - координаты i-ой точки. Т.е.:

t — изменяется от 0 до 1, вещественное, точность его определяется в зависимости от уровня разрешения монитора.

Далее приводятся примеры уравнений кривых от 1-го до 3-го порядка.

Уравнение кривой Безье 1-го порядка:

Рис. 1. Линейная кривая Безье.

Уравнение кривой Безье 2-го порядка:

Рис. 2. Квадратичная кривая Безье.

Уравнение кривой Безье 3-го порядка:

Рис. 3. Кубическая кривая Безье.

На рисунках 1-4 представлены кривые Безье с точками: P₀ = (20, 20), P₁ = (120, 160), P₂ = (160, 160), P₃ = (170, 30), P₄ = (380, 180), построенными на поле шириной 400 точек и высотой 200 точек.

Рис. 4. Линейная кривая Безье.

Рис. 5. Квадратичная кривая Безье.

Рис. 6. Кубическая кривая Безье.

Рис. 7. Кривая Безье 4-го порядка.

Далее посмотрим на анимацию построения кривых Безье (точка t плавно двигается по кривой).

Анимация 1. Линейная кривая Безье.

Анимация 2. Квадратичная кривая Безье.

Анимация 3. Кубическая кривая Безье.

Анимация 4. Кривая Безье 4-го порядка.

3. Геометрическое объяснение кривых Безье Поля де Кастельжо

Строим линейные кривые Безье от первой точки до второй, от второй к третьей и так до последней, не соединяя линейной кривой Безье последнюю и 0-ую точку. Через точки t (полученных ранее линейных кривых) строим линейные кривые Безье начиная с нулевой и до последней, как ранее, но уже по полученным точкам, которых на одну меньше, чем ранее. Снова строим через новополученные точки t линейные кривые и из них получаем новые точки. Так повторяем пока точка не останется одна — это и есть точка кривой. Теперь представьте всё это в движении — это и есть кривая Безье. Наглядно посмотрите на анимации далее.

Построение кривой Безье 1-го порядка:

Анимация 5. Геометрический смысл линейной кривой Безье.

Построение кривой Безье 2-го порядка:

Анимация 6. Геометрический смысл квадратичной кривой Безье.

Построение кривой Безье 3-го порядка:

Анимация 7. Геометрический смысл кубической кривой Безье.

Построение кривой Безье 4-го порядка:

Анимация 8. Геометрический смысл кривой Безье 4-го порядка.

4. Уровень дискретизации t

Данный раздел показывает, как увеличивать t, чтобы при следующем не значительном увеличении вычисленные координаты не попали на туже точку.

Уравнение выглядит так, более конкретно:

Решим это уравнение для линейной кривой:

Это уравнение Δt действительно для уравнения только кривой Безье первого порядка (n=1), хотя для неё бессмысленно начальное утверждение, но оно подойдёт Вам для многочленов Безье большего порядка. В конце показано, что выбирается минимальное Δt, но можно использовать и для конкретной оси.

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

5. Заключение

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

С выбором темы для очередной заметки долго думать не пришлось. Было решено написать, пожалуй, об одном из самых важных инструментов векторного редактора – Bezier. И как всегда, прежде чем писать, я решил посмотреть, а что же писали до меня. Пробежав взглядом несколько уроков об использовании инструмента Bezier в CorelDRAW, я обратил внимание на то, что почти везде описан лишь процесс рисования, а вот тонкости этого процесса не указаны. А между прочим именно эти тонкости делают инструмент незаменимым, особенно для тех, кому важна скорость и удобство в работе.

Если вам есть что добавить, не стесняйтесь. :)

Полезно знать

Что бы настроить параметры инструмента Bezier, дважды кликните на нём.

В момент, когда вы определили местоположение узла, но ещё не отпустили кнопку мыши, зажатый Alt позволит откорректировать положение узла, а вот Ctrl фиксирует поворот маркеров на шаг в 15 градусов. Так же советую попробовать Ctrl и Alt вместе.

Если удерживать Alt до момента создания нового узла, то все последующие отрезки будут прямыми. Однако это не совсем удобно.

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

Режим наложения Умножить

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

И тогда вы сможете увидеть свои цвета!

Однако, Умножение не является идеальным решением. Например, если во время какой-либо магии редактирования изображения я перекрашу контур в голубой цвет, это приведёт к следующему:

Это связано с тем, что режим Умножение буквально умножает цвета. В нём используется математика!

Сначала он получает значения яркости RGB-каналов, а затем делит их на максимальное значение (так как у нас 8 бит, то это 255), процесс, называемый нормализацией. Затем он переножает нормированные значения. Наконец, он снова умножает полученное на 255, чтобы получить окончательный результат.

Это не всегда является нежелательным, и многие художники используют этот эффект для обогащения своих цветов.

Преимущества

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

На самом деле не прозрачно.

С цветными линиями действует немного странно.

Маска прозрачности

Второй способ – использовать маски прозрачности.

на наименовании слоя и выберите Преобразовать → в маску прозрачности

Теперь нижележащий слой получит слой с контурами в качестве маски, что означает, что черные части станут прозрачными. Мы хотим, чтобы белые части были прозрачными, поэтому мы выбираем слой Маска прозрачности и инвертируем его. (Фильтры → Коррекция → Инвертирование или нажмите Shift + I , у меня в 3-й и 4-й версиях надо нажать Ctrl+I – прим. пер. ). Затем перетащите маску прозрачности на любой заполненный пиксельный слой:

Преимущества

Раздельность этой прозрачности и цвета.

Можно всё сделать ещё быстрее.

Дополнительные записи в списке слоёв.

Не работает без черно-белого контура.

Цвет в альфа-канал

Наиболее удобным вариантом, вероятно, является фильтр Цвет в альфа-канал. Находится в меню Фильтры → Цвета → Цвет в альфа-канал .

Щелкните по белой полоске, чтобы изменить цвет, который вы хотите удалить. В нашем случае белый цвет по-умолчанию отлично подходит.

Преимущества

Самый быстрый способ.

Работает с цветным контуром.

Нет строгого разделения прозрачности и цвета, как в примере с масками.

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

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

Инструмент для рисования от руки

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

Преимущества

Вы не захотите использовать этот вариант для больших областей.

Инструмент Заливка

Порог (Threshold) определяет, когда инструмент заливки должен рассматривать пиксель другого цвета в качестве границы. А Радиус (Feathering) дополнительно добавляет мягкую границу при заполнении.

Теперь, если вы нажмёте на часть изображения с непрерывной границей вашим выбранным цветом. (Не забудьте установить непрозрачность в 1.0!)

В зависимости от вашего контурного рисунка, вы, возможно, быстро сможете заполнить его плоскими цветами. Но установка низкого Порога может привести к небольшим артефактам около мест, где линии соединяются:

Преимущества

Довольно быстро заполняет в зависимости от имеющихся настроек.

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

И лучше всего работает с несглаженным (aliased) контуром.

Выделение

Выделения работают с использованием инструментов выделения.

Например, с помощью инструмента Выделение кривой Безье вы легко можете выбрать криволинейную область, а с помощью Shift + (не путайте с +Shift, есть разница!), вы можете добавить её к существующему выделению. (Я попробовал так сделать, получилось не сразу. При существующем выделении нужно нажать Shift, мышой поставить первую точку кривой, отпустить Shift , и дальше рисовать уже только мышкой. При замыкании кривой она станет границей выделения, объединённого с ранее существующим – прим.пер. )

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

По завершении выберите цвет, которым вы хотите заполнить выделенную область, и нажмите Shift + Backspace.

Вы можете сохранить выделение в виде маски выделения с помощью на слое, а затем выбрав Добавить → Локальное выделение. Сначала нужно отключить выбор, нажав круг перед добавлением нового выделения.

Это может служить альтернативным способом разделения различных частей изображения, что хорошо для более живописных произведений:

Преимущества

Немного точнее, чем заливка.

Предварительный просмотр вашего цвета не так прост.

Инструмент кривой Безье

Обычно у вас есть инструмент для создания прямоугольников или кругов. А в случае Krita – инструмент для кривых Безье.

Выберите инструмент Нарисовать кривую Безье ( ) и задайте такие параметры инструмента: Заливка = Цвет переднего плана и Контур = Без контура. Убедитесь, что ваша непрозрачность установлена на 1.00 (полностью непрозрачная)

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

Вы также можете стирать с помощью этого инструмента. Просто нажмите E или кнопку Режим ластика.

Преимущества

Быстрее, чем использование кисти или выделения.

Также хорошо подходит для контуров, которые содержат разрывы.

Очень подробные детали этим инструментом заполнять трудно. Поэтому я рекомендую пропускать их и докрашивать позже кистью.

Тонирующая маска

Итак, это несколько неожиданно. В оригинальном учебнике вы увидите, что я предлагаю использовать G'Mic, но это было несколько лет назад, а g'mic немного нестабилен в Windows. Поэтому разработчики Krita попытались сделать встроенный инструмент, делающий то же самое.

Он отключен в версии 3.1, но если вы используете 4.0 или более новую, он присутсвует на панели инструментов. Для получения дополнительной информации посмотрите раздел документации Colorize Mask.

Итак, этот инструмент работает следующим образом:

Выберите инструмент редактирования тонирующей маски.

Отметьте слой, который вы используете.

Нарисуйте цвета, которые хотите получить с помощью тонирующей маски.

Нажмите Обновить, чтобы увидеть результаты (кнопка Обновить находится на панели свойств инструмента – прим. пер.):

Затем вы можете добавить больше штрихов для улучшения результата.

Затем, когда вы закончите, разделите слои с помощью команды меню Слой → Разделить → Разделить слой. Существует несколько вариантов, которые вы можете выбрать, но следующие опции должны хорошо подойти:

Преимущества

Работает с anti aliased (сглаженным) контуром.

Основную часть работы можно выполнить очень быстро.

Может автоматически закрывать разрывы.

Не существует никакого anti aliasing (сглаживания).

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

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

УРОК ЧЕТВЁРТЫЙ
КРИВЫЕ БЕЗЬЕ В ФОТОШОПЕ

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

Создание.
Выберите инструмент Pen Tool (рис. 1) и убедитесь, что вы собираетесь создать просто КБ (Path, рис. 2). Если Вы будете просто тыкать в экран этим инструментом, то будете создавать угловые управляющие точки кривой Безье (угловые УТКБ). Если будете нажимать и проводить по экрану, то будете создавать гладкие УТКБ (рис. 3).

Если Вы подведете курсор к первой УТКБ, то крестик сменится на перо с ноликом. Это значит, что Вы собираетесь замкнуть кривую. Кривую можно замкнуть в процессе создания или потом.

Дорисовка или укорочение.
Чтобы дорисовать КБ, возьмите инструмент Перо и сначала ткните или ткните-потяните в крайнюю УТКБ. Продоолжайте построение КБ.
Чтобы удалить крайнюю точку КБ возьмите инструмент Direct Selection Tool (выбор УТКБ, рис. 4) и нажмите Delete.

Замыкание и размыкание КБ.
Замкнуть КБ Вы можете двумя способами:
1. Дорисовать КБ (См. выше).
2. Нарисовать рядом открытую КБ, инструментом Указатель всей КБ (Path selection Tool, рис. 5) выделить обе (рис. 6) и через логическую операцию сварки (рис. 7) сварить их в одну (рис. 8).

Размыкание КБ.
1. Инструментом Pen Tool добавить к кривой (рис. 9) две точки: одну там, где предполагаете разомкнуть и две по бокам (рис. 10).
2. Инструментом Direct Selection Tool удалите среднюю точку (рис. 11).

Рис. 12
Перемещение, добавление и удаление УТКБ. УТКБ перемещаются инструментом Direct Selection Tool, добавляются инструментом Pen Tool и удаляются инструментом Delete Anchor Point Tool (делит энкер пойнт тул, удаление УТКБ, рис. 12).

Изменение типа УТКБ.
Пользуйтесь инструментом Convert Point Tool (рис. 13). Этим инструментом Вы можете по кругу переключать тип точки:
1. Без ручек.
2. Гладкая точка.
3. Угловая точка с ручками.

Кривую Безье можно залить краской, обвести кисточкой или, если в параметирах кисточки стоит симулировать нажим, обвести красиво (рис. 14) Также по кривой можно создать область выделения (рис. 15, 16).

Читайте также:

  
• Как сделать неровные доски
  
• Как сделать картофельную пушку в скрап механик
  
• Как сделать макароны с мясом
  
• Как сделать из пленки для цветов
  
• Как сделать татар бораки