«Adobe Photoshop. Базовый уровень». Занятие 12.1. Версия 2019

Первая часть конспекта к двенадцатому занятию курса «Adobe Photoshop. Базовый уровень» в его гибридной версии, стартовавшей в 2019 году. Курс состоит из 8 видоезанятий и 7 онлайн занятий. Конспекты сделаны только для видеозанятий, поскольку на онлайн занятиях идет разбор пройденной темы и домашних заданий. Здесь можно посмотреть полное описание и программу курса.

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

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

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

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

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

Задачи на занятие
1. Познакомиться с путями (Path) и освоить методику быстрого построения контура
2. Научиться создавать при помощи путей векторные и растровые маски
3. Понять принципы создания реалистичных фотомонтажей
4. Научиться работать с текстом и верстать простые макеты

Для самостоятельного изучения:
Андрей Журавлев. «Работа с путями (Path) в Photoshop»
Liveclasses. Adobe Photoshop: работа с путями. Инструменты и операции
Liveclasses. Adobe Photoshop: работа с путями. Практика применения
Liveclasses. Adobe Photoshop: работа с текстом

Тема 21. Работа с путями (Path).

Для самостоятельного изучения:
Liveclasses. Adobe Photoshop: работа с путями. Инструменты и операции

21.1 Что такое пути и для чего они нужны

• Пути — это элементы векторной графики, или, как их еще называют «Кривые Безье»
• Кривая Безье — это математически заданная кривая, поэтому она остается гладкой при любом увеличении
• Специализированной программой для работы с векторной графикой является Adobe Illustrator, в Photoshop пути применяются как вспомогательные элементы
• Пути не являются частью изображения и представляют собой просто набор лекал, используемых при решении различных задач
• Чаще всего с помощью путей строится точная граница объектов для их последующего вырезания или выборочной корекции
• Процесс построения пути, повторяющего форму объекта, называют: «обтравить», «оконтурить», «обойти путем», «оттрассировать»
• Таким образом вырезаются объекты с четкими плавными границами, маски для волос делаются на основе контрастов, содержащихся в каналах изображения

Для самостоятельного изучения:
RuGraphics. ru «Создание выделение с помощью «Пера» Pen Tool»
Википедия. «Кривые Безье»

21.2 Базовые операции в палитре Paths

• В командном меню работа с путями не представлена, поэтому все операции с ними выполняются через палитру Paths (Контуры) и выпадающее меню этой палитры
• Чтобы создать новый путь нужно кликнуть по второй справа кнопке Create new path (Создать новый контур) в нижней части палитры Paths (Контуры)
• Чтобы сделать пиктограмму пути крупнее нужно вызвать команду Panel Options (Параметры панели) и выбрать более крупную иконку
• Путь в палитре Paths (Контуры) является органайзером, аналогом прозрачного файла, в которую будут складываться отдельные контуры
• Активный в данный момент путь подкрашивается серым цветом, чтобы переключиться на другой путь достаточно кликнуть по нему
• Чтобы выделить несколько путей идущих по порядку, необходимо выделить крайний из них, зажать клавишу «Shift» и выделит крайний с друго конца
• Добавить или убрать из выделения любой из контуров можно зажав клавишу «Cmd» и кликнув рядом с его пиктограммой
• На экране отображаются контуры, находящиеся в активных путях
• Новый контур всегда будет строиться в активном пути, а если активных путей несколько, то в самом верхнем из них
• Любой контур можно скопировать из одного пути и вставить в другой, при этом положение вставленного контура будет точно таким же
• Деактивировать все пути можно кликнув по пустому пространству в палитре Paths (Контуры), или нажав клавишу «Enter», когда в палитре Tools (Инструменты) выбран любой инструмент по работе с путями
• Если на момент построения нового контура ни один из путей не активен, программа создаст временный путь Work Path (Рабочий контур) и контур будет строится в нем
• ВНИМАНИЕ!!! Временный путь Work Path (Рабочий контур) может быть только один, если он уже существует и не активен, при создании нового временного пути программа уничтожит старый со всем его содержимым
• Если в процессе работы появился временный путь Work Path (Рабочий контур), просто кликните по его названию в палитре Paths (Контуры) и переименуйте, он превратиться в обычный путь
• Чтобы удалить контур, нужно перенести его на правую кнопку с пиктограммой корзинки в нижней части палитры Paths (Контуры)
• Второй способ удаления пути — нажать на кнопку «Del» при условии, что ни один из контуров в этом пути не является активным
• Данный способ является опасным, потому что при таком удалении контура система не требует подтверждения, а нажать на кнопку «Del» можно случайно

21. 3 Инструменты для построения и работы с контуром

• Основным инструментом при работе с путями является Pen Tool (Перо)
• В процессе работы активным должен быть только инструмент Pen Tool (Перо), быстрый доступ к остальным инструментам организуется за счет специальных настроек и нажатия клавиш-модификаторов
• Чтобы перо строило путь, а не Shape (Фигуру), в первом выпадающем меню палитры Options (Параметры) выбрать настройку Path (Контур)
• Простой клик пером ставит в соответствующем месте опорную точку без усов
• Если нажать клавишу мышки и не отпуская ее потянуть курсор в сторону, из вновь созданной опорной точки будут сразу вытянуты усы
• В процессе создания усы связаны как по направлению, так и по длине
• Контур состоит из опорных точек и соединяющих их отрезков кривой (прямой)
• Если из обеих точек не выходят направляющие (усы) они соединяются отрезком прямой
• Если хотя бы из одной опорной точки выходит направляющая (ус), эти точки будут соединяться кривой
• Направление уса является касательной к кривой на входе в опорную точку, длина уса задает степень ее кривизны
• Если усы, выходящие из точки, связаны (образуют развернутый угол), контур проходит через это точку плавно, без излома
• По умолчанию усы, выходящие из опорной точки, связаны и образуют развернутый угол
• Чтобы замкнуть контур, нужно кликнуть пером по первой опорной точке контура
• Чтобы оставить контур не замкнутым, нужно прервать его построение, сделав не активным путь в котором строился контур, или кликнув за пределами контура белой стрелкой
• Для продолжения построения прерванного ранее контура кликните пером по его крайней точке, признаком активности контура является отображение всех его опорных точек
• Аналогичным образом можно соединить строящийся контур с уже имеющимся
• Цвет и ширину отображения путей можно изменить в настройках Preferences > Guides, Grid & Slices (Настройки > Направляющие, сетка и фрагменты)
• Инструмент Freeform Pen Tool (Свободное перо) строит путь по траектории движения курсора
• При обтравке Freeform Pen Tool (Свободное перо) бесполезен в силу низкой точности повторения реального контура объекта и низкого качества получающегося пути
• Инструмент Curvature Pen Tool (Перо кривизны) изменяет форму уже построенного контура, при этом работает более интерактивно и сложно, чем простое перемещение опорных точек
• Инструменты Add/Delete Anchor Point Tool (Перо (добавить/удалить опорную точку)) добавляют новые опорные точки и удаляют уже существующие опорные точек, без разрыва контура в месте удаления точки
• Чтобы обычное перо автоматически добавляло/удаляло опорные точки достаточно активировать в палитре Options (Параметры) настройку Auto Add/Delete (Оптимизация)
• Инструмент Path Selection Tool (Выделение контура), или «черная стрелка», выделяет весь контур целиком и позволяет его двигать и копировать
• Если черной стрелкой обвести прямоугольник, будут выделены все контуры, элементы которых попали в этот прямоугольник
• Инструмент Direct Selection Tool (Выделение узла), или «белая стрелка», работает с отдельными элементами контура: позволяет сдвигать опорные точки и изменять направляющие
• Чтобы изменить ус нужно переместить его крайнюю точку, при этом связь с противоположным усом сохраняется только по направлению
• Если белой стрелкой обвести прямоугольник, будут выделены все элементы контуров, которых попали в это прямоугольник. Добавлять или исключать элементы из выделения можно кликая по ним с зажатой клавишей «Shift»
• Чтобы на время превратить обычное перо в Direct Selection Tool (Выделение узла) нужно зажать клавиши «Cmd»
• Convert Point Tool (Угол) или «галочка» — инструмент для раздельной работы с направляющими
• Если галочкой подхватить ус за крайнюю точку, он отвяжется от противоположного уса (станет не зависимым по направлению). В результате в данном месте возникнет излом контура
• Теоритичеки, связать однажды развязанные усы невозможно, однако, на практике эта задача успешно решается: достаточно кликнуть галочкой по опорной точки (усы будут удалены) и не отпускаю клавишу мышки растянуть из нее новую пару связанных усов
• Чтобы на время превратить обычное перо в Convert Point Tool (Угол) нужно зажать клавиши «Alt»
• Чтобы удалить опорную точку, разорвав в этом месте контур, нужно активировать эту опорную точку и один раз нажать на кнопку «Del»
• После такого удаления опорной точки все остальные опорные точки данного контура будут активированы, поэтому второе нажатие на кнопку «Del» приведет к удалению остатков контура

Для самостоятельного изучения:
RuGraphics. ru «Векторный инструмент Photoshop. Произвольная Фигура»

21.4 Порядок операций для быстрого построения контура

• Процесс построения пути, повторяющего форму объекта, называют: «обтравить», «оконтурить», «обойти путем», «оттрассировать»
• Для быстрого и эффективного построения контура нужно работать циклически, как швейная машинка: каждый следующий стежок делается на чистовую и весь построенный участок контура является качественным
• Операция 1: ставим новую точку контура и сразу вытягиваем из нее усы так, чтобы предыдущая часть контура точно повторила границу объекта
• Операция 2: поправляем выходной ус так, чтобы можно было построить следующий участок контура
• Если в этом месте контур должен преломляться, развязываем усу, если нет — не развязываем
• Следите, чтобы длина усов была адекватна расстоянию между точками: чем оно больше, тем длиннее должны быть усы при той же кривизне контура
• При необходимости, возвращайтесь к предыдущим точкам и поправляйте их положение и выходящие из них усы
• Не гонитесь за скоростью, она придет сама собой. Следите за аккуратностью и старайтесь уменьшать количество правок предыдущих точек
• Мысленно разбивайте контур на участки более-менее постоянной кривизны. Стыки между ними и будут оптимальным положением опорных точек
• Можно сделать переменную кривизну контура между соседними точками если вытягивать из них усы разной длины
• Старайтесь строить контур из участков без двойного перегиба. Управлять таким контуром будет легче
• Любой контур можно представить как последовательность больше или меньше деформированных четвертинок окружности
• Старайтесь мыслить на 2-3 точки вперед, это защитит от неприятных тупиков в поисках следующей позиции для опорной точки
• При замыкании контура не забудьте потянуть в сторону курсор, чтобы вытянуть ус, входящий в начальную точку контура

Дополнительные материалы:
Андрей Журавлев. «Работа с путями (Path) в Photoshop»

21. 5 Основные ошибки при построении контура

• При обтравке обычно используется масштаб отображения картинке на экране 200%-400%. Такой масштаб позволяет, с одной стороны, хорошо разглядеть все детали и нюансы границы объекта, а с другой стороны, уместить на экран участок между опорными точками и его окрестности, достаточные для растягивания усов
• Не жадничайте и ставьте точки там, где они необходимы. В противном случае подгонка контура под форму границы займет слишком много времени, а некоторые тонкие особенности формы вообще не получится повторить
• Не ставьте лишних точек. Это замедляет работу из-за избыточных операций и делает контур менее гладким и управляемым
• При большом количестве точек расстояние между ними и, как следствие, длина усов оказываются маленькими. В таком случае даже незначительные промахи в положении опорных точек и концов усов приводят к волнистости контура
• Следите, чтобы длина всех усов, как выходящих из одной точки в противоположные стороны, так и выходящих из соседних точек навстречу друг другу, были согласованы с расстоянием между точками
• Слишком малая длина усов может привести к мягкому надлому контура
• Обязательно вытягивайте из точки усы и не развязывайте их, если не хотите переломить в этом месте контур

21. 6 Степень детализации при обтравке

• Начинать тренировки лучше с обтравки букв. Чистота формы таких объектов делают путь более регулярным, но требуют достаточно точной симметрии
• По степени сложности литеры (из представленных в примере) идут в порядка «П», «З», «О»
• Сложность формы литер в разных гарнитурах возрастает в порядке: прямой рубленый шрифт (Helvetica Regular), прямой засечный шрифт (Times New Roman Regular), курсивный засечный шрифт (Times New Roman Italic)
• Одним из самых сложных объектов при островке являются кисти рук. Даже не очень сильное упрощение контура делает их форму неестественной (пальцы превращаются в сосиски), а точное построение требует очень большого количества точек
• Упрощение контура возможно при вырезании объекта, если сглаживание формы границ делает границу более аккуратной и приятной на вид
• Помните, что форма, которая задается границами объекта, должна быть согласована с формой, которая задается светл-теневым рисунком

Тема 22. Применение путей.

Для самостоятельного изучения:
Liveclasses. Adobe Photoshop: работа с путями. Практика применения

22.1 Векторная маска

• Vector Mask (Векторная маска) — это маска слоя, сделанная на основе векторного контура
• Чтобы создать векторную маску нужно активировать слой, к которому она будет применяться, путь, из которого она будет создана, и отдать команду Layer > Vector Mask > Current Path (Слои > Векторная маска > Активный контур)
• Более быстрый способ создания векторной маски: произведя те же предварительные действия, кликнуть по кнопке быстрого создания маски в нижней части палитры Layers (Слои) с зажатой клавишей «Cmd»
• При активном слое его векторная маска появляется как временный путь в палитре Paths (Контуры)
• В дальнейшем векторная маска редактируется так же, как обычный путь
• Основной плюс векторной маски — возможность быстро редактировать контур вырезания с сохранением плавности границ
• Основной минус векторной маски — ограниченные возможности по ее доработке, ее можно только растушевать
• Чтобы граница вырезания не выглядела слишком резкой, маску нужно немного (в пределах одного пикселя) растушевать
• Растушёвку для векторной маски можно сделать через регулятор Feather (Растушевка) в палитре Properties (Свойства)
• Обычно пути применяют не напрямую в виде векторной маски, а как вспомогательные лекала для создания обычной (растровой) маски слоя

Для самостоятельного изучения:
RuGraphics. ru «Вырезаем фигуру человека из фотографии. Применение векторной маски»

22.2 Проверка качества обтравки и доработка маски

• Проверка качества обтравки сводится к поиску артефактов вдоль границы объекта и производится при помощи подстановки вырезанного объекта на фона разного цвета
• После обтравки ее качество проверяют создав векторную маску и подставляя объект на белый, средне-серый, черный, красный, синий и зеленый фона
• Наиболее заметны артефакты будут на фоне противоположного цвета тому, на котором происходила съемка
• Ни на одном новом фоне на границе объекта не должны просматриваться следы старого фона
• При наличии мелких следов старого фона, или микроблоков, на границах, проще всего незначительно сдвинуть в этом месте границу вырезания вовнутрь объекта
• Чтобы избежать эффекта вырезания ножницами границу маски слегка растушевывают при помощи настройки Feather (Растушевка) в палитре Properties (Свойства)
• После размытия вдоль контура может появиться тонкое свечение от старого фона. Проще всего можно побороть этот эффект равномерно сдвинув границы маски вовнутрь, но сделать это быстро и просто с векторной маской невозможно
• Избежать такого эффекта можно сделав на основе контура растровую маску, предварительно завалив ее на один пиксел вовнутрь и размыв границы на тот же один пиксел
• Загружаем выделение по силуэту пути при помощи команды Make Selection (Выделить область) из выпадающего меню палитры Paths (Контуры), или кликнув по пиктограмме пути с зажатой клавишей «Cmd»
• Заваливаем границу выделения вовнутрь с помощью команды Select > Modify > Contract (Выделние > Модификация > Сжать) с настройкой 1px
• Рстушевываем границу выделения с помощью команды Select > Modify > Feather (Выделние > Модификация > Растушевка) с настройкой 1px
• Создаем маску слоя, которая автоматически формируется на основе активного выделения
• Перед быстрой загрузкой выделения по контуру пути хотя бы один раз загрузите ее с помощью команды Make Selection (Выделить область) из выпадающего меню палитры Paths (Контуры), чтобы проверить параметры при загрузке выделения
• Сдвиг границы маски и ее растушевка применимы только к четким резким границам. Применять такие команды к макам лохматых объектов категорически нельзя!
• Команда Make Work Papth (Образовать рабочий контур) автоматически создает путь на основе активного выделения. Такой путь является крайне неаккуратным, поэтому применять эту команды категорически не рекомендуется

22.3 Создание сложной растровой маски на основе контуров

• Контуры для границ объектов, имеющих разный вид, удобнее разнести на отдельные пути
• В данном примере для обтравки бомбардировщика сделано три пути: общий силуэт самолета без лопастей и переплета передней кабины; силуэт смазанных лопастей; силуэт для элементов переплета в передней кабине
• Сборка маски производится на слоях и начинается с создания корректирующего слоя-заливки черного цвета
• Перед созданием слоя-заливки деактивируйтесь все пути в палитре Paths (Контуры)
• Каждый следующий элемент маски создаем на отдельном растровом слое для удобства их последующей раздельной доработки

22. 4 Взаимодействие контуров при создании выделений

• Алгоритм взаимодействия выделений, загружаемых по разным контурам одного и того же пути, зависит от настроек инструмента Pen Tool (Перо), которые он имел на момент построения контуров
• Чтобы узнать, по какому алгоритму будет взаимодействовать выделение конкретного контура, нужно активировать его и взяв в руки белую или черную стрелку проверить настойку Path Operations (Операции с контуром) в палитре Options (Параметры)
• Настройка Combine Shapes (Объединить фигуры) добавляет выделение по данному контуру к остальным выделениям
• Настройка Subtract Front Shapes (Вычесть переднюю фигуру) вычитает выделение по данному контуру из выделений, сделанных по нижележащим контурам
• Настройка Intersect Shape Areas (Область пересечения фигур) ставляет область пересечения выделения по данному контуру с остальными выделениями
• Настройка Exclude Overlapping Shapes (Исключить пересекающиеся фигуры) дает выделение участков, лежащих внутри нечетного количества контуров, и отсутствие выделения участков, попадающих вовнутрь четного количества контуров
• В настройках Path Operations (Операции с контуром) пера показываются настройки не активных контуров, а самого пера
• Чтобы гарантированно и стабильно переключить режим активных контуров на Exclude Overlapping Shapes (Исключить пересекающиеся фигуры) нужно в настройках пера переключиться на любой ненужный режим, а потом опять переключиться на Exclude Overlapping Shapes (Исключить пересекающиеся фигуры)
• Загрузив выделение по силуэту самолета, заливаем его на отдельном слое белым цветом, после этого снимаем выделение и немного размываем получившийся белый силуэт для смягчения его границ
• Аналогичным образом поступаем с силуэтом лопастей, только задаем растушёвку с большим радиусом

22. 5 Маска для протяженных объектов постоянной ширины

• При обтравке проводов, лески, ниток или любых других протяженных объектов постоянной ширины, их можно просто нарисовать на маске, подобрав соответствующий диаметр кисти
• Для этого нужно подобрать диаметр кисти, построить контуры по осевым линиям данных объектов и отдать команду Stroke Path (Выполнить ободку контура)
• При достаточно маленьком диаметре кисти (несколько пикселей) жесткость ее границ можно не снижать, края мазка и так будут достаточно жесткими
• Перед тем как отдать команду Stroke Path (Выполнить ободку контура) нужно произвести все настройки инструмента, которым будет производиться обводка контура
• Ключ Simulate Pressure (Имитировать нажим) активировать не нужно, чтобы не менялась ширина мазка
• После получения нужного силуэта превращаем его в выделение, объединяем слои, участвовавшие в создании маски, в группу и отключаем ее видимость
• Чтобы загрузить в качестве выделения сформированный на слоях ч/б силуэт, нужно кликнуть по пиктограмме композитного канала в палитре Channels (Каналы)

Для самостоятельного изучения:
pskurs. ru «Обводка контура в Фотошоп»

22.6 Shape Layer (Слой Фигура)

• Shape Layer (Фигура) — это слой в котором форма объектов задается векторными контурами, а заливка и обводка присваивается им как атрибут
• Чтобы получить Shape Layer (Фигура) нужно применить векторную маску к любому слою-заливке
• Настройка параметров заливки и обводки Shape Layer (Фигура) производится через палитру Options (Параметры) инструментов Path Selection Tool (Выделение контура) или Direct Selection Tool (Выделение узла)
• Все эффекты и стили слоя применяются к Shape Layer (Фигура) так же, как и к обычным слоям
• Первый плюс Shape Layer (Фигура) — возможность быстро перекрашивать графические элементы
• Второй плюс Shape Layer (Фигура) — возможность сильно менять размер таких фигур с сохранением плавности границ

Для самостоятельного изучения:
RuGraphics.ru «Пунктирная рамка и линия в Photoshop CS6»

© Андрей Журавлев (aka zhur74), 2012 г.
Редакция третья (2019 г.) переработанная и дополненная.
Первая публикаци https://zhur74.livejournal.com/98092.html

Фигуры Photoshop — векторные формы, контуры и пиксельные заливки

Автор Дмитрий Евсеенков На чтение 15 мин Просмотров 1.3к.
Обновлено 28.10.2021

В предыдущих уроках по рисованию фигур в Photoshop я упомянул, что в этой программе имеется три различных типа фигур — это собственно «Векторная фигура» (Shape), «Контур» (Path) и «Пиксельная заливка» (Pixel-Based Shapes). Т.е в Photoshopvs можем создавать векторные фигуры, контуры и пиксельные формы. В этом уроке мы будем более внимательно рассмотрим разницу между этими типами и в каких случаях какой тип следует выбирать.

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

Как мы узнали из урока «Как рисовать векторные фигуры в Photoshop«, инструменты форм Photoshop расположены во вложении в одном месте в панели инструментов. По умолчанию, на панели отображён инструмент «Прямоугольник» (Rectangle Tool), но если нажать на иконку инструмента правой клавишей мыши, то откроется выпадающее меню со списком остальных доступных инструментов. Я выберу инструмент «Эллипс» (Ellipse Tool) из этого списка, но все, что мы узнаем далее, распространяется и на остальные инструменты формы, а не только на «Эллипс»:

Выбор инструмента «Эллипс».

Содержание

Режимы рисования

После того, как мы выбрали инструмент «Эллипс», мы должны указать Photoshop, форму какого типа мы хотим создать — векторную фигуру , контур или пиксельную форму, сделать это можно с помощью выпадающего списка в левом углу панели параметров.

Три режима рисования фигур

Из трех типов режимов рисования наиболее часто используемой является тип «Фигура».
Сам Photoshop, как понятно из названия, известен больше как программа для редактирования фотографий и фотомонтажа, а также растрового (пиксельного) рисования.

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

Векторные изображения, с другой стороны, не имеют ничего общего с пиксельными. Они состоят из математических алгоритмов, описывающих элементарные геометрические объекты, обычно называемые примитивами, такие как точки, линии, сплайны, кривые Безье, круги и окружности, многоугольники. Все эти примитивы и образуют то, что мы видим в Photoshop-документе, как векторную фигуру. Не волнуйтесь о «математической» составляющей векторных фигур, Photoshop обрабатывает всю математику за кулисами, чтобы мы могли сосредоточиться исключительно на рисовании фигур.

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

Давайте посмотрим на некоторые из вещей, которые мы можем сделать с векторными фигурами в Photoshop, а затем мы сравним их с контурами и пиксельными заливками. Чтобы начать рисовать векторных фигур, выберите опцию «Фигура» (Shape Layers) в панели параметров:

Выбор опции Фигура» (Shape Layers) для рисования векторных фигур на слоях.

Прежде, чем начать что-либо делать, давайте посмотрим на панель слоёв, где видно, что в настоящее время мой документ состоит всего из одного слоя — фонового — который заполнен белым цветом:

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

Для упрощения примера я возьму инструмент «Эллипс» (Ellipse Tool) и выберу заливку сплошным красным цветом без обводки, подробнее о построении фигур и их заливке здесь, и, зажав Shift, построю правильный круг:

Векторная фигура в виде правильного круга

Photoshop помещает каждую новую нарисованную нами векторную фигуру на отдельный слой, называемый слой-фигурой. И если мы сейчас посмотрим на панель слоев, то увидим новый слой с фигурой с именем «Эллипс 1» (в англ. — Ellipse 1), расположенный выше фонового слоя. На то, что это слой с векторной фигурой, указывает значок, расположенный справа внизу миниатюры слоя:

Каждая новая векторная фигура получает свой собственный слой, значок векторного слоя обведён салатовым цветом

Каждая новая векторная фигура получает свой собственный слой в панели слоёв.
В документе одна фигура готова, я нарисую вторую такую же фигуру рядом с первой так, чтобы вторая фигура немного перекрывала первую. Photoshop автоматически помещает эту вторую векторную фигуру на собственном слое (слой автоматически именован «Эллипс 1») на миниатюре слоя также имеется значок:

Две перекрывающихся векторные фигуры. Вторая векторная фигура в настоящее время перекрывает первую. На панели слоёв видны два отдельных слоя с фигурами.

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

Изменение цвета фигуры после двойного клика по миниатюре слоя в панели слоёв. Обратите внимание, что при изменении цвета в палитре цветов, цвет также меняется в качестве предпросмотра у фигуры в документе и миниатюры слоя. Если Вы нажмёте кнопку «Отмена» вместо «ОК», палитра цветов закроется, а цвет фигуры не изменится (в моём случае, останется красным)

Я нажму кнопку ОК, чтобы закрыть Палитру цветов и принять изменения. Теперь моя фигура стала синей.

Выбрать векторную фигуру в документе можно с помощью инструмента «Выделение контура» (Path Selection Tool):

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

Выбор красного круга: сперва выбрать слой, затем клик по фигуре.

Я могу менять слои в стеке панели слоёв. Например, если я перетащу слой с красным кругом вверх, он закроет синий:

Перемещение слоя с красным кругом вверх.

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

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

Итак, давайте сложим две векторные фигуры. В панели слоёв выбираем синюю фигуру и нажимаем Ctrl+C. Затем удалим слой методом перетаскивания мышкой в корзину:

Удаление слоя после копирования

Теперь у нас на панели слоёв остался только слой с красной фигурой и фоновый. Нажимаем на слой с фигурой для его выбора и затем нажимаем комбинацию клавиш Ctrl+V на клавиатуре, чтобы вставить скопированную формы в слой. при этом фигуры объединятся в одну:

Объединённая фигура из двух кругов на одном слое.

Так как в данный момент обе фигуры находятся на одном слое, я могу изменить взаимодействие фигур друг относительно друга, выбирая различные варианты на панели параметров с помощью кнопки «Операции с контуром» (Path Operations):

Кнопка переключений режимов взаимодействия контуров («Операции с контуром»)

По нажатию на эту кнопку выпадает список с четырьмя различными режимами взаимодействия, это: Объединить фигуры (Add to Shape Area), Вычесть переднюю фигуру (Subtract from Shape Area), Область пересечения фигур (Intersect Shape Areas), и Исключить пересекающиеся фигуры (Exclude Overlapping Shape Areas):

Операции с контуром

Операция «Объединить фигуры» (Add to Shape Area) была инициирована в тот момент,когда мы вклеили скопированную фигуру в слой с фигурой. Давайте рассмотрим другие операции.

Вычесть переднюю фигуру (Subtract from Shape Area) — вторая (вклеенная) фигура больше не видны в документе. Вместо этого, Photoshop использует её, чтобы удалить часть первоначальной фигуры, ту часть, где две фигуры пересекаются:

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

Область пересечения фигур (Intersect Shape Areas) — На этот раз, остается видимым только тот участок, где две фигуры перекрывают друг друга:

Видимый участок остался только в области пересечения фигур

Исключить пересекающиеся фигуры (Exclude Overlapping Shape Areas) — результат, противоположный предыдущему. Обе формы видны только в тех областях, где они не перекрываются:

Видимыми остаются только те области фигур, где они не перекрывают друг друга

Полное объединение компонентов фигур

И в списке осталась ещё одна команда — «Объединить компоненты фигур» (Merge Shape Components). Команда не зря отстоит особняком от других, т.к. она приводит к необратимым действиям — объединению образующих контуров. Если ранее мы просто переключались между командами, то после применения этой команды, переключиться уже будет нельзя.

Если мы нажмём на эту строку, то появится сообщение с предупреждением «Эта операция превратит фигуру в обычный контур. Продолжить?» (This operation will turn a live shape into a regular path. Continue?), после нажатия ОК контуры будут объединены, все внутренние линии пересекающихся контуров будут удалены, и две или несколько векторных фигур будут преобразованы в один контур, это показано на рисунке, объединение компонентов фигур при:
1. Объединить фигуры (Add to Shape Area)
2. Вычесть переднюю фигуру (Subtract from Shape Area)
3. Область пересечения фигур (Intersect Shape Areas)

Объединение компонентов фигур при различных состояниях операций с контурами

Рисование контуров

До сих пор мы использовали векторные инструменты в режиме фигур. Давайте переключим режим в панели параметров на «Контур» (Path). Обратите внимание, что после переключение из панели параметров исчезли некоторые опции, например, заливка цветом, обводка и т.п:

Панель параметров при режиме векторных инструментов «Контур» (Path)

Создадим новый документ Photoshop, на котором имеется только лишь один фоновый слой, возьмём инструмент «Эллипс» (Ellipse Tool), на панели параметров выберем, как я говорил выше, режим инструмента «Контур», и проведём контур на документе. Курсор vsib при этом примет вид креста в плюсиком:

Контур, созданный инструментом «Эллипс» в режиме «Контур».

Обратите внимание, что в панели слоёв ничего не изменилось — как был один фоновый слой до рисования контура, так он один и остался после рисования.

Причина этого заключена в том, что чистые контура не зависят от слоев. И, хотя на данный момент мы можем видеть контур в документе, но при сохранении документа a формате JPG, PNG и т.п., а также при распечатке, контур не будет отображён.

Контур является всего-лишь инструментом для каких-либо действий — преобразования контура в выделенную область, обводки контура, заливки цветом, создание 3D экструзии из контура и т.п., но полноценным элементом рисунка контур не является.

И так как контура не зависят от слоев, они имеют свою собственную панель — Панель контуров (Paths panel) — которая, по умолчанию, сгруппирована в с панелями слоёв и каналов. На рисунке ниже я переключиться на панель контуров, где мы можем увидеть контур, который я только что нарисовал, он автоматически именован Photoshop как как «Рабочий контур (в англ. — Work Path):

Контур в документе и на панели контуров

Название «Рабочий контур» означает, что на данный момент этот контур является временным, но мы можем сохранить его как часть документа, для этого нам нужно просто его переименовать. Для переименования дважды кликните на его имени в панели контуров, после чего Photoshop откроет диалоговое окно для сохранения контура, предлагающее новое имя. Вы можете просто принять новое имя по умолчанию или ввести своё. Я назову свой «контур-эллипс»:

Путь для сохранения контура

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

Инструменты для работы с контурами — это «Выделение контура» (Path Selection Tool ), «Выделение узла» (Direct Selection Tool), а также инструмент «Угол» (Convert Point Tool) из группы «Пера» (Pen Tool).

Инструмент «Выделение контура» выделяет контур целиком со всеми узлами, «Выделение узла» выделяет один (или насколько, если зажать Ctrl) опорных узлов контура, инструмент «Угол» изменяет свойства опорных узлов.

Изменение контура с помощью инструмента «Выделение узла»

Операции с контурами

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

Кнопки операций с контурами.

Перечисляю, слева направо:

Выполнить заливку контура основным цветом (Fill path with foreground color) — контур на активном слое в панели слоёв будет залит основным цветом цветовой палитры. Если в документе есть только фоновый слой, значит, будет залит фоновый.

Выполнить обводку контура кистью (Stroke path with brush) — контур на активном слое будет обведён кистью основным цветом цветовой палитры. Толщина и жёсткость линии обводки зависит от настроек инструмента «Кисть» (Brush Tool). К примеру, если «Кисть» заранее настроена — круглая, 50% жёсткости, а основной цвет в палитре красный — такая и будет линия обводки, красная, мягкая, толщиной 3 пикселя.

Загрузить контур, как выделенную область (Load Path as a selection) — контур будет преобразован в выделенную область.

Сделать из выделенной области рабочий контур (Make work path from selection) — в данном случае, по понятным причинам, не активна.

Добавить маску (Add a mask) — к слою будет добавлена слой-маска по очертаниям контура, прозрачная область маски — внутри контура, работает только после преобразования контура в выделенную область.

Создать новый контур (Create new Path) — в данном случае не используется.

Корзина (Delete current Path) — тут думаю. понятно, нужна для удаления контура

Кроме того, на панели параметров имеются три кнопки для работы с контурами:

Кнопки операций с контурами на панели параметров

Кнопка «Выделение» (Selection…) преобразует контур в выделенную область. В отличии от аналогичной кнопки внизу панели контуров, нажатие на эту кнопку преобразует контур в выделение не мгновенно, а открывает диалоговое окно с некоторыми параметрами и позволяет задать, к примеру, радиус растушёвки:

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

Маска (Mask) — добавляет к слою векторную маску. Если в панели слоёв имеется только фоновый слой, он преобразуется в обычный и к нему также добавляется векторная маска:

Векторная маска из фонового слоя

О третьей кнопке я расскажу чуть ниже.

Преобразование контуров в векторные фигуры

Для преобразования контуров в векторные фигуры на панели задач имеется специальная кнопка, активная в режиме «Контур», это третья кнопка из тех о которых я начал рассказывать выше, она называется «Фигура» (Shape):

Кнопка на панели параметров для преобразования контура в векторную фигуру.

Нажатие на кнопку моментально преобразует контур a векторную фигуру:

Векторная фигура из контура. Цвет заливки фигуры взят из основного цвета цветовой палитры.

При этом фигура заливается сплошным цветом. Этот цвет соответствует основному цвету цветовой палитры.

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

Итак, у меня имеется документ с фоновым слоем и простым контуром:

Контур для создания векторной фигуры.

Для создания фигуры нам придётся всего-лишь добавить корректирующий слой «Цвет» (Solid Color). Откроется диалоговое окно слоя, где выберите цвет заливки будущей фигуры и нажмите ОК. Всё, фигура готова, она создана на новом слое. Результат, по сути, тот же, как и при использовании кнопки «Фигура».:

Векторная фигура из контура с помощью корректирующего слоя «Цвет» (Solid Color).

Пиксельная заливка (Fill Pixels)

Третий режим рисования фигур в Photoshop — это Пиксельная заливка (Fill Pixels), которая позволяет нам создавать пиксельные формы. Я выберите опцию «Пикселы» (Pixels) на в панели параметров:

Режим пиксельной заливки в панели параметров

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

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

Так что для создания новых пиксельных фигур следует использовать новые пустые слои.

На данный момент у меня имеется документ с одним единственным фоновым слоем. Я добавлю новый слой, нажав Ctrl+Shift+Alt+N, задам в цветовой палитре цвет, скажем, зелёный #5ab345, возьму инструмент «Эллипс«, режим в панели параметров, как говорилось ранее, задан «Пикселы», нажимаю курсором мыши внутри документа и протаскиваю курсор для создания фигуры:

Создание пиксельной заливки.

После того, как я отпускаю клавишу мыши, фигура мгновенно заливается основным цветом с цветовой палитры:

Пиксельная заливка, созданная с помощью инструмента «Эллипс».

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

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

Недостатки пиксельного изображения подробно описаны в материале «Векторные и пиксельные формы в Photoshop«.

Как складывать, вычитать, пересекать и исключать

Инструмент «Форма» часто уступает место более «взрослым» инструментам, таким как инструмент «Текст» или инструмент «Выделение области» в Photoshop. Однако, если вы присмотритесь повнимательнее, вы обнаружите, что с ним можно многое сделать при создании графического дизайна. Операции с путями — один из способов раскрыть этот скрытый потенциал.

Это не только инструмент «Форма» — операции с контурами можно применять к любому объекту в Photoshop, созданному с помощью вектора или обведенному векторным контуром. Если вам уже нравится работать с геометрией в других творческих приложениях, таких как Illustrator, это одно из семейств инструментов, которое вы захотите запомнить.

Как использовать операции с контурами в Photoshop

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

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

Здесь у вас есть несколько вариантов. Что они все означают?

• Новый слой: Это выбранная операция пути по умолчанию — вы создаете новый слой векторной формы каждый раз, когда используете его.
• Объединить фигуры: Этот параметр объединяет каждую новую фигуру с предыдущей.
• Вычесть переднюю форму: Передняя форма врезается в новую.
• Области формы пересечения: Сохраняется только область пересечения.
• Исключить перекрывающиеся фигуры: Сохраняется все, кроме области пересечения.
• Объединить компоненты формы: Этот параметр можно использовать для ретроактивного объединения двух слоев формы после того, как они оба уже созданы.

Давайте попробуем.

Первый: Объединить фигуры . Мы будем использовать квадрат. Не снимая выделения с первого слоя, добавьте квадрат.

Ницца. Он чем-то похож на рыбу.

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

Чуть выше панели «Слои» вы увидите те же параметры Pathfinder в окне свойств .

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

Давайте посмотрим, что может сделать Subtract Front Shape, когда мы применяем его по ходу дела. Выберите этот параметр в настройках инструмента «Форма» еще раз и нарисуйте круг поверх этого треугольника.

Мы украли самый большой кусок этой пиццы. Эта опция очень полезна при создании дизайна — вы можете свободно перемещать все, что склеено на одном слое, как этот, как отдельный элемент.

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

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

Связанный: Как сделать узор в Adobe Illustrator

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

Давайте настроим себя — с включенной опцией Combine Shapes в настройках инструмента Shape добавьте еще один вектор к первому слою Shape.

Теперь Параметр «Объединить компоненты формы» должен быть активен и готов к использованию. Выберите его из раскрывающегося списка Path Operations , чтобы объединить эти два векторных компонента.

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

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

Почему именно это полезно?

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

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

Использование операций с контурами в Photoshop: некоторые идеи

Застрял на вдохновении? Вот несколько способов, которыми нам самим нравится использовать операции с контурами в Photoshop:

• Мы использовали только самые основные примитивы Shape в Photoshop; на самом деле есть масса других опций, когда вы используете инструмент Shape в Custom Shape Mode . По умолчанию вы найдете зверей, цветы и ботанические мотивы, но если вы знаете, где искать, можно загрузить и установить гораздо больше.
• Еще один способ разнообразить дизайн — поиграть с настройками Fill и Stroke . Одной из наших любимых схем по умолчанию должна быть классическая предустановка полутонового купона Photoshop, дополненная пунктирной линией для вырезания.
• Это удобный способ добавления окон с помощью фотографий или других графических элементов при разработке макета для печати или веб-макета.
• Все эти инструменты совместимы со слоем текста, который вы преобразовали в фигуру — вы найдете параметр, щелкнув правой кнопкой мыши любой Слой текста на панели «Слои» и выбор «Преобразовать в форму ». Использование операций с траекториями с текстом — это интересный способ создания привлекательных дизайнов логотипов и добавления визуального интереса к любому макету, над которым вы работаете.
• Для модельщиков этот инструмент часто бывает незаменим. Это лучший способ изменить векторные контуры в Photoshop и отличный метод для применения при создании таких вещей, как геометрические узоры и мозаика.

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

Выбери свой путь

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

Выбор контура и редактирование в Photoshop

ОПЫТНЫЙ · 8 МИН

Выберите один или несколько объектов или контуров для быстрого редактирования.

Что вам понадобится

Получить файлы

Примеры файлов для практики (ZIP, 1,2 МБ)

Использование инструмента выбора пути

В этом уроке вы настроите несколько слоев формы и пути.

Откройте загруженный файл в Photoshop. Выберите инструмент Path Selection Tool на панели инструментов (клавиша A). Если вы не видите панель инструментов, выберите Windows > Инструменты.

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

Чтобы изменить одну фигуру или контур с выбранным параметром «Все слои» (шаг 1), просто щелкните фигуру или контур. В этом документе щелкните оранжевый прямоугольник внизу изображения (как показано на рисунке).

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

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

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

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

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

Выберите несколько фигур или путей

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

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

Изоляция фигур или контуров

Когда изображение состоит из нескольких слоев, иногда полезно изолировать только те фигуры или контуры, которые вы хотите отредактировать. Выделим пути, из которых состоит велосипед. На панели «Слои» щелкните, чтобы выбрать слой «велосипедное сиденье». Нажмите Shift и выберите слой «передние спицы» на панели «Слой». Это выделяет два слоя и все слои между ними. Теперь вы сделали все слои формы велосипеда активными.

На панели параметров в верхней части рабочей области выберите «Активные слои» в раскрывающемся меню «Выбор». Это ограничивает инструмент выбора пути, так что он работает только с активными слоями.

Изоляция фигур или путей (продолжение)

С помощью инструмента выбора пути щелкните и перетащите, чтобы выбрать заднюю шину и спицы велосипеда.