Плоские кривые

Что такое путь, или немного теории

Путь (Path) в Photoshop’е – это векторное включение в растровую картинку. Он может использоваться как самостоятельно (атрибут Clipping Path, Vector Mask), так и в качестве заготовки для последующих операций по обработке изображения (изготовление селекций, обрисовка инструментами и т.д.).

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

Кривая Безье состоит из опорных точек (Anchor Points) и отрезков, соединяющих опорные точки. Эти отрезки могут быть прямолинейными (в результате путь будет представлять собой ломаную линию) или криволинейными (в результате путь будет представлять собой кривую). Для задания параметров кривой, выходящей из опорной точки, используются направляющие, в простонародье часто называемые “усами”. Направление “уса” задает касательную к кривой на выходе из опорной точки, а длина “уса” – степень ее кривизны.

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

На рисунке приведены примеры, иллюстрирующие описанное выше:

1. Ломаная линия
2. Кривая линия
3. Зависимость угла выхода кривой из опорной точки от положения направляющей
4. Зависимость кривизны кривой от длинны направляющей
5. Точки перегиба кривой
6. Точки перелома кривой

Создание ломаной линии

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

Незамкнутая ломаная линия

Проще всего использовать для создания такой линии инструмент Фотошопа — «Перо».

Отдельная и достаточно подробная статья по инструменту “Перо” в Photoshop в одном из наших уроков: Как пользоваться пером в Photoshop

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

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

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

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

Далее создаем требуемую фигуру, применяя функцию копирования слоя (вызывается сочетанием клавиш CTRL+J)

и параметра «Свободное трансформирование» (для этого воспользуйтесь сочетанием клавиш CTRL+T).

Создание замкнутой ломаной линии в Фотошопе

Как мы уже говорили выше, ломаные линии бывают двух типов. Замкнутая ломаная – это многоугольник, с любым количеством граней. В Фотошопе существует два метода построения такой фигуры. Наиболее простым способом будет использование специального инструмента программы — «Фигура». Либо же можно создать выделение требуемой формы и затем сделать обводку контура.

Способ №1 — фигура

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

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

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

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

Cпособ №2 — прямолинейное лассо

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

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

В открывшемся окне можно выставить нужные параметры, такие как размер, цвет и положение контура.

Кликаем “ОК” и получаем результат:

Как нарисовать кривую линию в Photoshop

Загрузить PDF

Загрузить PDF

В данной статье мы расскажем вам, как создать кривую линию в Photoshop на компьютерах Mac или Windows. Для этой цели можно использовать инструмент «Перо» по умолчанию и упрощенную версию такого инструмента. Достаточно будет лишь щелкнуть по различным точкам на холсте.

С помощью инструмента «Перо»

1. 1

   Откройте проект в Photoshop. Если проект еще не открыт, тогда дважды щелкните по проекту, в котором нужно нарисовать кривую линию.

   

   

   

   

   

   

   

   

   

   

2. 2

   Выберите инструмент «Перо». Иконка данного инструмента выглядит как вечное перо и находится на панели инструментов в левой части окна. В выпадающем меню выберите пункт Инструмент «Перо».

3. 3

   Расположите курсор. Прежде всего следует расположить курсор в точке, где должна начинаться ваша кривая линия.

4. 4

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

   Точка, в которой нужно отпустить курсор — это верхняя точка вашей кривой линии.

5. 5

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

   Чтобы получить «S»-образную кривую, нужно перетаскивать курсор мыши в том же направлении, что и желаемый наклон.

6. 6

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

7. 7

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

С помощью инструмента «Перо кривизны»

1. 1

   Откройте проект в Photoshop. Если проект еще не открыт, тогда дважды щелкните по проекту, в котором нужно нарисовать кривую линию.

2. 2

   Выберите инструмент «Перо кривизны». Иконка данного инструмента выглядит как вечное перо и находится на панели инструментов в левой части окна. В выпадающем меню выберите пункт Инструмент «Перо кривизны».

   «Перо кривизны» позволяет создать кривую линию просто при помощи последовательных нажатий в различных точках холста.

3. 3

   Выберите исходную точку. Нужно щелкнуть по точке, в которой должна начинаться ваша кривая линия.

   

   

   

   

   

   

   

   

   

   

4. 4

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

5. 5

   Создайте третью точку. Добавьте третью точку вашей кривой, в результате чего вершиной линии окажется вторая точка.

6. 6

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

7. 7

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

Многовариантность построений или чей путь лучше?

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

На рисунке приведены два варианта обтравочного контура для одной и той же фигуры. Их можно условно назвать контур “по скатам” и контур “по гребням” волны. Оба они имеют право на существование, какой выбрать, зависит от множества факторов: привычки и пристрастия контурящего, точка “входа” пути на волну (если первая точка контура, попавшая на волну, будет находиться на гребне, то, скорее всего, дальше контур пойдет по гребням, если на скате, то по скатам), особенностей конкретной фигуры и т.д.

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

Прямоугольник, многоугольник и пазы

На вкладке 2D-эскиз в группе команд Создать в списке Прямоугольник содержатся команды создания прямоугольников, многоугольников и пазов.

Алгоритм создания прямоугольника:

1. На вкладке Эскиз в группе команд Создать выбрать команду создания прямоугольника:.
   1. Прямоугольник: две точки — создание прямоугольника, ориентированного вдоль осей системы координат, с помощью двух щелчков мыши, которые определяют угловые точки по диагонали. Прямоугольники по двум точкам выравниваются с использованием системы координат эскиза.
   2. Прямоугольник: три точки — создание прямоугольника по трем точкам путем определения длины, направления и смежной стороны. Первым щелчком мыши задается угол, вторым — направление и расстояние одной стороны, третьим щелчком задается расстояние смежной стороны. Таким образом, ориентацию прямоугольника, построенного по трем точкам, можно задавать произвольно.
   3. Прямоугольник по двум точкам (центр) — создание прямоугольника путем определения центра, ширины и длины формы. Первым щелчком мыши задается начало координат; вторым — угол.
   4. Прямоугольник по трем точкам (центр) — создание прямоугольника путем определения центра, направления и смежной стороны. Первым щелчком мыши задается центр, вторым — направление и расстояние одной стороны, третьим щелчком задается расстояние смежной стороны.
2. Нажать ОК.

Рисунок 7 — Создание прямоугольников

Алгоритм создания вписанного/описанного многоугольника:

1. На вкладке Эскиз в группе команд Создать выбрать команду Многоугольник.
2. В открывшемся диалоговом окне Многоугольник выбрать один из следующих параметров.
   1. Вписанный — кнопка, позволяющая задать вершину между двумя сторонами и определить размер и ориентацию многоугольника.
   2. Описанный — кнопка, позволяющая использовать середину стороны для определения размера и ориентации многоугольника
3. В текстовом поле задать число сторон многоугольника.
4. Щелкнуть в графическом окне, чтобы задать центр многоугольника, а затем перетащить курсор для создания формы.
5. Для завершения
   1. нажать клавишу ESC,
   2. выбрать другую команду
   3. в диалоговом окне Многоугольник нажать кнопку Готово.

Рисунок 8 — Создание многоугольников

Пазы

Рисунок 9 — Создание пазов

Алгоритм создания пазов

1. На вкладке Эскиз в группе команд Создать выбрать команду создания паза:
2. Паз (от центра до центра) — создание линейного паза путем определения размещения и расстояния центров дуг паза и ширины паза. Первыми двумя щелчками мыши задаются центры дуг, третьим щелчком задается ширина паза.
3. Для завершения проецирования нажать Esc или выбрать другую команду.

Сколько ставить точек, или чем «хороший путь» отличается от «плохого»?

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

Чтобы было проще разобраться в навернутой выше фразе, посмотрите на рисунок:

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

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

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

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

Как я уже говорил, вся работа делается «онлайном» — наметили примитив, сразу его построили, намечаем следующий. Чтобы не попадать в затыки типа «не знаю куда теперь поставить следующую точку», каждый раз намечая текущий отрезок, прикиньте на 1-2 отрезка вперед. Попробуйте понаблюдать за изменением формы примитива двигая направляющие и прочувствовать ее. Это позволит вам понять какие участки контура можно отобразить с помощью одного примитива, а какие нельзя, и, следовательно, придется разбивать на более короткие отрезки. Еще это сильно поможет с построением направляющей из первой точки отрезка (пункт 3а-3б в последовательности построения пути), ведь ее придется выставлять еще не видя самого отрезка.

Не пугайтесь, все это проще делать, чем описывать. Практикуйтесь сразу на реальных работах. Во-первых, это имеет практическую пользу, а во-вторых лучше откладывается в памяти. Через 2-3 десятка работ вы будете «контурить» уверенно и быстро. И всегда следите за соблюдением двух принципов:

1. Не ставь лишних точек. Не строй 2 примитива там, где можно обойтись одним. Любая лишняя точка ухудшает плавность кривой, создает паразитные искажения и снижает редактопригодность пути. Кроме того, это лишние движения мышкой и отнятое у вас время.
2. Не жадничай — ставь точку, если она нужна. Если участок контура невозможно передать одним примитивом, разбей его на несколько.

Именно этим хороший путь отличается от посредственного или просто плохого.

Вместо заключения

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

Вообще то — это практический совет по работе с путями в Adobe Photoshop, но, если хотите, можете воспринимать это заключение философски.

к оглавлению раздела

Материалы по теме:

Работа с путями (Path) в Photoshop (часть 2)
Использование команды Replace Color в Adobe Photoshop
Устраняем хроматические аберрации средствами Adobe Photoshop
Сведение нескольких экспозиций в Photoshop и работа с плагином LR/Enfuse
Использование инструмента Match Color в Photoshop

Новости по теме:

Adobe представил публичную бета-версию Photoshop CS6  // 2012-04-01

Компания Adobe выпустила Photoshop CS5 и CS5 Extended  // 2010-04-30

Adobe Photoshop исполнилось 20 лет  // 2010-02-25

Adobe выпустил Photoshop Elements 8  // 2009-09-25

  // 2008-04-08

Предисловие

Уже второе десятилетие Adobe Photoshop является лидирующим программным пакетом в области обработки растровой графики. И произошло это не потому, что он имеет какие-то уникальные, недоступные в других программах инструменты, а потому, что набор этих инструментов продуман и сбалансирован, а логика их работы прозрачна для понимания пользователя. Такая “прозрачность” позволяет оператору легко прогнозировать результат работы каждого конкретного инструмента и, основываясь на этом прогнозе и собственном опыте, вырабатывать как методику применения отдельного инструмента, так и методику комплексной обработки изображения с последовательным применением различных инструментов.

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

Именно в этом и состоит вся мощь Photoshop. Она скрыта не в палетках с инструментами и настройками, а в головах операторов. В очередной раз подтверждается старый добрый армейский принцип: “Воюет не оружие, воюют люди”.

На данный момент по Adobe Photoshop выпущено много хороших книг справочной направленности с подробными объяснениями и множеством примеров и иллюстраций: какие есть инструменты; какие у них есть настройки; как все это работает. Но эти книги обучают тому, “как работает инструмент”, а не “как работать с инструментом”. Изучение таких книг позволит вам сдать экзамен и стать сертифицированным специалистом Adobe, но не научит реальной работе над изображением.

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

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

Сплайн

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

В Inventor поддерживаются два типа сплайнов: Сплайны с интерполяцией и Сплайны по управляющим вершинам

Рисунок 3 — Контекстное меню команды Сплайн (интерполяция)

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

Алгоритм создания сплайнов с интерполяцией

1. В активном эскизе выбрать Сплайн с интерполяцией .
2. Щелкнуть в графическом окне, чтобы задать первую точку, или выбрать существующую.
3. Выполнить ряд последовательных щелчков мышью для создания определяющих точек.
4. По завершении нажать кнопку ОК, чтобы завершить построение сплайна и закрыть команду, или нажать кнопку Создать, чтобы завершить построение сплайна и создать дополнительные сплайны.
5. Нажать кнопку ОК

Рисунок 4 — Контекстное меню команды Сплайн (управляющая вершина)

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

Алгоритм создания сплайнов по управляющим вершинам

1. В активном эскизе выбрать Сплайн по управляющим вершинам
2. Щелкнуть в графическом окне, чтобы задать первую точку, или выбрать существующую точку.
3. Выполнить ряд последовательных щелчков мышью для создания.
4. По завершении нажать кнопку ОК, чтобы завершить построение сплайна и закрыть команду, или нажать кнопку Создать, чтобы завершить построение сплайна и создать дополнительные сплайны.
5. Нажать кнопку ОК

Алгоритм изменения типа сплайна

1. В контекстном меню выбрать Преобразовать в сплайн по управляющим вершинам или Преобразовать в интерполяцию

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

2. Можно изменить расположение точек

Построение кривой линии

Как и ломаные линии, кривые делятся на два типа: незамкнутые и замкнутые. Для построения кривой в программе Photoshop существует множество инструментов и способов.

Для построения такой линии есть всего один инструмент — «Перо» ( с последующей обводкой). Либо же можно нарисовать такую линию вручную.

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

При использовании этого инструмента мы получим овальную область. Снова делаем обводку. Затем этот овал можно изменять при помощи «Свободного трансформирования», о котором мы ранее говорили. Нажмите для вызова этой функции CTRL+T. На появившейся сетке можно легко изменять фигуру и добиться требуемой формы.

Возьмем инструмент — «Эллипс». В верхнем меню выставим требуемые настройки и создаем фигуру – овал.

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

Результат после применения деформации:

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