Кривые безье в иллюстраторе: Как работать с кривыми в Illustrator CS5

Содержание

Редактирование кривых в Adobe Illustrator – методическая разработка для учителей, Султанова Зияш Карамановна

Общая цель:

— познакомить и научить учащихся выполнять редактирование кривых в программе Adobe Illustrator , закрепить и обобщить знания учащихся, формировать умения и навыки работы с графическим редактором Adobe Illustrator;

— развивать умения учащихся сравнивать, анализировать, систематизировать.

— развивать креативные навыки путем индивидуально-личностных, исследовательских исканий;

— воспитывать интерес к инновационным технологиям, к предмету данного урока, а также художественно-эстетические чувства и чувство сотрудничества.

Ожидаемые результаты:

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

Тип урока:

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

Задания:

психологический настрой, маршрутная карта, групповая работа.

Необходимые материалы:

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

Ход урока

Этапы урока

Действия учителя

Действия ученика

Вводная часть

3-5 мин

Орг. момент, психологический настрой.

Всегда — учиться, всё — знать! Чем больше узнаешь, тем сильнее станешь.

Психологический настрой.

Притча «Все в твоих руках».

https://youtu.be/8qFWSyFGfZc

Презентация

7-10 мин

Проверка дз, презентация новой темы

Актуализация знаний.

Маршрутная карта.

Сообщение учащимися целей урока и формы работы.

Учащиеся работают с маршрутной картой.

Взаимооценивание по критериям.

Основная часть, закрепление

20-25 мин

Творческая работа.

(3 мин)

(10 мин)

Работа в группах. Деление на группы по конфетам.

Группа №1. (Работа в группе/ взаимооценка)

Задание «Запуск Adobe Illustrator»

Впиши последовательность команд для запуска графического редактора Adobe Illustrator в схему.

«Инструменты»

Выбери названия инструментов графического редакторAdobe Illustrator в «магическом квадрате».

Б	С	Л	К	Р	Э	Л	Л	И	П	С	У
Т	С	А	Р	У	А	Ц	Ы	А	Н	К	Ц
И	Ш	С	З	Ж	З	Д	О	Д	Е	И	К
К	У	П	Е	Р	А	С	Я	П	Ы	С	Н
Ц	В	Ы	Д	Е	Л	Е	Н	И	Е	Т	Е
Й	Ы	Л	Ч	С	И	Б	И	С	Т	Ь	Г
Ф	Ы	И	В	А	В	П	О	Ь	У	Х	Г
Л	С	Т	И	Т	К	А	Р	Я	А	Р	Ш
И	И	Е	Л	Ь	А	Н	А	Н	Д	А	З
Н	В	А	О	Л	Ж	Э	Щ	В	Ф	Ш	Р
И	М	А	С	Ш	Т	А	Б	И	П	Р	П
Я	Т	И	М	Ч	Ч	К	Р	И	В	А	Я

Спрятанные слова: Эллипс, Надпись, Кисть, Распылитель, Выделение, Заливка, Карандаш, Линия, Масштаб, Кривая, Ластик

Группа №2. Разработать постер.

В графическом редакторе есть инструменты, которые помогут нам научится создавать подобные изображения. Простейший путь создать произвольную фигуру в Adobe Illustrator — нарисовать её при помощи карандаша («Рисовать произвольные контуры»). Фигуру можно создать в двух режимах: Рисовать кривую Безье (Кривые Безье очень просты в использовании, и могут описывать многие формы. Кривые Безье изобрел в 1962 году француз Пьер Безье. Он работал в компании «Рено» и проектировал кузова для легковых автомобилей. Ему надоело рисовать их карандашом и он решил создать алгоритм для компьютера) и Рисовать кривую Спиро (то есть всегда ровных, без «горбов» кривых). В векторном графическом редакторе Adobe Illustrator имеется много уникальных функций кривых Спиро. Кривые Спиро помогут вам в создании логотипов, узоров, фонов, различных абстрактных рисунков и завитушек.

Физминутка. Ребятам предлагается просмотреть видеоматериал на тему: «Что такое новые технологии?»

Практическая работа

Каждая группа выполняет свое задание.

Взаимооценивание по критериям. (Спикер группы оценивает работу в группе всех учащихся).

Ребятам дается задание пройти по ссылке на сайт:

https://bilimland. kz/ru/#lesson=16831

и разработать постер.

https://bilimland.kz/ru — lesson=11903

https://bilimland.kz/ru/#lesson=16831

Итог, рефлексия.

3-5 мин

Домашнее задание:

§24;
Кроссворд на тему: «Компьютерная графика».

Оценивание учащихся по критериям (взаимооценивание).

Проводится рефлексия (обратная связь).

Записывают на стикерах своё мнение об уроке.

О Кривой Безье, используемой в комп. графике.: f_code — LiveJournal

Category:

Компьютеры
Cancel

Кривая Безье — параметрическая кривая, задаваемая выражением

Линейные кривые.

Параметр t в функции, описывающей линейный случай кривой Безье, определяет где именно на расстоянии от P0 до P1 находится B(t). Например, при t = 0,25 значение функции B(t) соответствует четверти расстояния между точками P0 и P1. Параметр t изменяется от 0 до 1, а B(t) описывает отрезок прямой между точками P0 и P1.

Квадратные кривые.

Для построения квадратных кривых Безье требуется выделение двух промежуточных точек Q0 и Q1 из условия чтобы параметр t изменялся от 0 до 1:

* Точка Q0 изменяется от P0 до P1 и описывает линейную кривую Безье.
* Точка Q1 изменяется от P1 до P2 и также описывает линейную кривую Безье.
* Точка B0 изменяется от Q0 до Q1 и описывает квадратную кривую Безье.

Кривые высших степеней

Для построения кривых высших порядков соответственно требуется и больше промежуточных точек. Для кубической кривой это промежуточные точки Q0, Q1 и Q2, описывающие линейные кривые, а также точки R0 и R1, которые описывают квадратные кривые:

Кубическая кривая.

Кривая 4 степени.

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

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

Наибольшее значение имеют кубические кривые Безье. Кривые высших степеней при обработке требуют большего объёма вычислений и для практических целей используются реже. Для построения сложных по форме линий отдельные кривые Безье могут быть последовательно соединены друг с другом в сплайн Безье. Для того, чтобы обеспечить гладкость линии в месте соединения двух кривых, смежные опорные точки обеих кривых должны лежать на одной линии. В программах векторной графики наподобие Adobe Illustrator или Inkscape подобные фрагменты известны под названием «путей» (path).

~~Я спиздил этот текст~~ информация взята из Википедии.

Photo

Hint http://pics.livejournal.com/igrick/pic/000r1edq

Как работать с кривыми Безье в Adobe Illustrator

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

Инструмент «Перо» используется для создания контуров. Форма пути контролируется с помощью Точки привязки , которые определяют сегменты линии внутри пути. Существует три типа точек привязки:
- Угловые точки : Соедините сегменты прямой линии с сегментами прямой линии и не нуждайтесь в ручках Безье. Чтобы создать угловую точку, просто нажмите и отпустите кнопку мыши. Переместите курсор в новое место, затем снова нажмите и отпустите, и между двумя опорными точками образуется отрезок прямой линии. По мере того, как вы продолжаете щелкать в новых местах, формируются дополнительные сегменты линий. Удерживая Shift заставит дополнительные опорные точки находиться в той же горизонтальной, вертикальной плоскости или плоскости под углом 45°, что и предыдущая опорная точка.
- Гладкие точки : Чтобы создать сегменты линии, которые соединяются в гладкие, непрерывные кривые, нажмите, удерживайте и перетащите в направлении, в котором вы хотите, чтобы следующий сегмент линии изгибался. Две противоположные ручки Безье будут выходить из точки привязки, которые используются для управления изгибом. Ручки на гладкой опорной точке взаимны и всегда остаются на одной линии. Вот синусоида с тремя опорными точками:
- Соединительные точки : Соединительные точки используются для соединения сегментов прямых линий с криволинейными или для соединения сегментов изогнутых линий, которые встречаются под углом. Точки соединения могут иметь одну или две ручки Безье. Двуручные острия имеют шарнирные ручки, которые могут двигаться независимо друг от друга. Чтобы создать точку соединения с двумя ручками, сначала создайте плавную опорную точку, затем наведите указатель мыши на ручку, направление которой вы хотите изменить, и удерживайте клавишу Alt . Курсор изменится на незамкнутую стрелку. Нажмите и удерживайте ручку и перетащите ее в другое место.
В последних версиях Illustrator CC в инструмент «Перо» была добавлена функция Reshaping . После того, как сегмент линии был создан, вы можете навести указатель мыши на центр линии и удерживать нажатой клавишу Alt . Вы увидите, как курсор изменится на стрелку и кривую линию. Нажмите и удерживайте сегмент линии, затем перетащите его, чтобы «согнуть».
Когда вы работаете с Pen Tool, изменения курсора дадут вам визуальные подсказки относительно того, что вы собираетесь делать:
После того, как путь был создан, есть другие инструменты для редактирования, главный из них Инструмент прямого выбора [ ]. Пути редактируются путем перемещения точек привязки и регулировки длины или угла манипуляторов Безье. В последних версиях Illustrator инструмент «Прямое выделение» также имеет функцию изменения формы, но нет необходимости удерживать клавишу Alt. Просто наведите указатель мыши на сегмент линии, и вы увидите, как курсор изменится на значок изменения формы. Нажмите и перетащите линию на другой изгиб.
В дополнение к инструменту «Прямое выделение» существуют другие инструменты редактирования контура, вложенные в инструмент «Перо» для добавления и удаления опорных точек, а также инструмент «Опорная точка» , который можно использовать для преобразования типа привязки. точка — изменение гладкой точки на угловую или угловой на гладкую и т. д.

Как освоить кривые Безье в Illustrator, используя метод Box

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

Используя Adobe Illustrator 2020, мы покажем вам, как использовать кривые Безье для векторизации вашего логотипа с помощью метода коробки. Мы также рассмотрим несколько интересных советов, которые помогут вам освоить эту технику, и поговорим о том, как появились кривые Безье.

Это будет очень информативная тема, так что оставайтесь здесь.

Начнем с видеоруководства (ниже) и пошагового руководства в письменном виде.

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

Учебник

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

2 . Теперь давайте начнем. Нажмите на инструмент «Прямой выбор», чтобы увидеть несколько опорных точек, которые окружают формы букв. Размещение этих опорных точек достигается определенным образом: все по горизонтали и по вертикали, за исключением тех нескольких маленьких точек на углах «С» и «А» и т. д. Внимательно посмотрите на опорные точки, чтобы оценить симметрию в способ, которым опорные точки полностью покрывают каждую букву.

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

3 . Сначала откройте новый файл документа. Я открою А4 просто потому, что мне с ним удобно. Вы можете выбрать любого, кто вам нравится.

4 . Теперь создайте группу слоев в документе. Я назвал один слой «Шаблон», а другой — «Вектор». Сегодня мы будем работать над векторным слоем. Цель нескольких слоев — подготовить резервную копию, если вы хотите вернуться на несколько шагов назад в своем процессе. Это проще и эффективнее, чем «отменять» множество шагов.

5 . Уменьшите непрозрачность изображения логотипа примерно до 10%, чтобы границы фигуры выглядели более четкими и четкими. Цель более четких границ менее художественная и более практичная: мы хотим иметь возможность легко видеть, где мы размещаем точки и линии.

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

Что такое метод коробки?

Метод ящиков — это теория векторной графики, созданная с использованием контуров Безье. Всякий раз, когда вы создаете в Illustrator извилистую или круглую фигуру, программа дает вам опорные точки и маркеры (пути Безье). Эти опорные точки являются границами вокруг фигуры.

Чтобы увидеть его в действии, создайте круг на экране и включите режим Outline. Когда вы выделите его, вы увидите, что вокруг круга есть рамка. Теперь посмотрите внимательно. Везде, где коробка касается контура круга, это самая экстремальная кривая, самый дальний путь круга. И именно там будет точка привязки.

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

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

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

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

Возвращение к учебнику

7 . Теперь, когда вы понимаете метод коробки, давайте посмотрим, как он помогает в реальных ситуациях проектирования. Начнем с первой буквы логотипа: «О». Хотя вы можете легко создать эту форму, используя круг и манипулируя им, он не будет работать во всех ситуациях. Поэтому я собираюсь показать вам, как это сделать правильно, используя кривые Безье.

8 . Для этого сначала создайте направляющую вокруг буквы. Итак, продолжайте и создайте обводку фильтра, а затем создайте квадрат, рамку вокруг буквы. Затем уменьшите размер обводки до 0,25 pt.

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

10 . Вы видите точки, где круг встречается с квадратом? Это будут наши опорные точки. Теперь повторите этот процесс для овала внутри круга. Выделите квадрат, нажмите Ctrl+C (для пользователей Mac Command+C), а затем Ctrl+F (Command+F) и приступайте к работе: перетаскивайте. Убедитесь, что внутренний квадрат плотно охватывает овал внутри. Везде, где он касается овала, это наша опорная точка. Итак, всего у нас теперь восемь опорных точек. 4 для круга и 4 для овала.

11 . Выделите всю букву, содержащую оба поля, и нажмите Ctrl+5 (Command+5). Это создаст направляющие, которые вы можете включать и выключать.

12 . Все, что нам нужно сделать сейчас, это разместить опорные точки там, где это необходимо, и потянуть ручки таким образом, чтобы придать нам нужную форму. Если это звучит просто, это не так. Вам придется много практиковаться, чтобы овладеть им. Теперь, работая с фигурой, я не использую инструмент «Перо». Я использую что-то под названием InkScribe. Это плагин от AstituteGraphics, который упрощает использование инструмента «Перо». Но если вы предпочитаете использовать свой обычный инструмент «Перо», это нормально. Процесс такой же.

13 . Хорошо, теперь включите Smart Guides. Используйте Ctrl+U (Command+U) или перейдите на вкладку «Вид» и в раскрывающемся меню включите Smart Guides.

14 . Перейдите к верхней части формы внешнего блока и щелкните точно в точке, где блок касается границы O. Как только вы это сделаете, появится точка привязки с двумя ручками по обе стороны от нее. Эти ручки подвижны и позволяют манипулировать формой. Теперь будьте осторожны. Убедитесь, что ваши ручки идеально выровнены по горизонтальной линии верхней части коробки. Удерживайте «Shift», когда делаете это, иначе ручки могут пойти куда угодно.

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

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

17 . Чтобы увидеть, как выглядит фигура, переключитесь с Обводки на Заливку, и вы увидите, что форма не совсем соответствует действительности. Это выглядит как странное яйцо вместо стилизованной буквы O, которую мы хотим.

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

19 . Нажмите на верхний левый маркер, нажмите Shift и перетащите маркер, пока он не окажется прямо над границей формы.

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

21 . Нанесите опорные точки и для внутренней формы: овала. Работайте с ручками и доведите контур до идеального соответствия форме. Настройте его, чтобы он выглядел идеально.

22 . И вот он, идеально сформированный и векторный О. Но это не тот О, который нам нужен; внутренний овал не вырезали, поэтому он по-прежнему больше похож на круг, чем на букву. Так что же нам делать? Мы выделим всю фигуру, включая внутренний овал, затем нажмем Shift+M, чтобы вырезать овал с помощью инструмента «Создание фигур», получив идеальную букву «О».0003

23 . Продолжайте наносить опорные точки на оставшиеся буквы логотипа, пока не добьетесь идеальной формы для каждой буквы. Теперь, когда вы знаете механику кривых Безье, будет здорово узнать, что существует метод быстрого создания фигур для букв. Это делается путем тиснения круга на букве О, а затем простого перемещения и изменения размера круга, пока он не будет соответствовать форме. Посмотрите видео на 9:41 и поймите, что я имею в виду.

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

Почему кривые Безье? История

Кривая Безье основана на старом математическом явлении – многочленах Бернштейна – и была должным образом развита и популяризирована Пьером Безье. Он был французским инженером, и в 1960-х годах, работая над кузовом автомобилей Renault, который сделает автомобиль более экономичным, он придумал концепцию этой кривой, а затем запатентовал ее.

Интересно, что эти кривые уже были разработаны другим французским физиком и математиком, Полем де Кастельжо, в 1959 — на год раньше Безье. Он разработал эти кривые, работая в Citroën, другом автопроизводителе.

Но если он разработал кривые раньше Безье, почему они не названы в его честь? Почему мы называем их кривыми Безье, а не кривыми Кастельжо? Это история об украденном гении, мы начинаем ненавидеть Безье?

Нет. Они названы в честь Безье, потому что Citroën не позволил Кастельжо опубликовать свои открытия и запатентовать их. Год спустя, когда Безье самостоятельно пришел к идее этих кривых, Рено был более чем счастлив позволить ему опубликовать свои открытия и, в свою очередь, быть связанным со знаменитым инженером-новатором.

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

Какие существуют типы кривых Безье?

Математика, лежащая в основе кривых Безье, дает нам три различных типа этих кривых. Их различие зависит от того, сколько опорных точек и маркеров (контрольных точек) вы хотите видеть на кривой или дает вам кривая. Таким образом, есть три типа кривых Безье, которые вы можете использовать в своих анимациях или типах шрифтов. Название и описание каждого из них приведены ниже:

Линейные кривые Безье

Линейная кривая Безье дает вам две ручки, но не опорную точку, поэтому, по сути, линейная кривая дает вам прямую линейную линию.

Квадратичные кривые Безье

С помощью квадратичных кривых Безье вы получаете две точки привязки и одну контрольную точку. Компьютерные шрифты TrueType используют в своей конструкции квадратичные кривые Безье.

Кубические кривые Безье

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

Несколько полезных советов по освоению кривых Безье

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

Готовы сами поиграться с кривыми?

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

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