Немного теории

Что такое каналы в Adobe Photoshop?

Любое изображение в фотошоп представляется как наложение проекции нескольких цветов. Представьте себе фонарик с лампой, например, зелёного цвета. Наложите на него лист бумаги, частично закрашенный чёрным, серым и белым. Свет будет проходить через светлые зоны. Чем меньше насыщенность чёрного, тем ярче проекция. Аналог такого листка-накладки и есть канал «зелёного». Аналогично — остальные каналы. Накладываясь друг на друга они дают цветную картинку.

Что такое слои в Adobe Photoshop?

Любая фотография, картинка, коллаж в фотошоп представляет собой своеобразную стопку прозрачных плёнок. На каждой из них — часть рисунка. Для примера попробуйте сложить две фотографии и посмотреть через них на свет. Это и есть слой Photoshop. Картинка, которую мы видим — результат наложения множества «плёнок», называемых слоями. С другой стороны, слой может быть и один (если мы сверху ничего не добавляли).

Что такое маски в Adobe Photoshop?

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

Маски и каналы представляют из себя рисунок Grayscale (в оттенках серого). Информация под белой областью маски видимая. Под чёрной — нет.

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

Работа с масками идентична для всех версий. Начиная от Adobe Photoshop CS и вплоть до Adobe Photoshop CS6.

Точные способы

Цветовой диапазон

Инструмент работает примерно по тому же принципу, что и «Волшебная палочка», но при этом он гораздо более гибкий и потому подходит для сложных изображений. Если «Волшебная палочка» захватывает в выделение лишь пиксели одного конкретного цвета или близких цветов, то при помощи инструмента «Цветовой диапазон» (Color Range) в выделение можно добавить сколько угодно цветов.

• Убедитесь, что слой с вашим изображением активен, и выберите в верхнем меню «Выделение» → «Цветовой диапазон» (Select → Color Range);
• в открывшемся окне кликните пипеткой по цвету фона ― на превью он окрасится белым. Изображённое на превью получилось похожим на маску;
• к этой маске можно добавлять сколько угодно областей новых цветов: выберите пипетку со знаком «+» и кликайте по тем областям, которые вы также хотите убрать. Параметр «Разброс» (Fuzziness) отвечает за то, насколько точным будет выделение;
• после того как вы выбрали все цвета, которые хотите удалить, нажмите кнопку ОК и создайте маску, как описано в начале статьи. В данном случае её инвертировать не нужно, поскольку она будет точно совпадать с превью из окна «Цветовой диапазон».

Видео: Женя Травкина / Skillbox Media

Кисть и маска

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

Для более точной работы:

• лучше увеличить масштаб изображения ― он регулируется сочетаниями клавиш Ctrl + «+» и Ctrl + «−»;
• можно регулировать размер кисти и её жёсткость. Для этого кликните правой кнопкой с активным инструментом «Кисть» на любом участке изображения ― появится меню с настройками;
• если какой-то штрих ошибочен, то отмените действие сочетаниями клавиш Ctrl + Z или же подкорректируйте неудачное место, изменив цвет кисти на белый.

Видео: Женя Травкина / Skillbox Media

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

Читайте об истории Adobe:

• Компания, навсегда изменившая дизайн: Adobe
• Люди, на которых держится современный дизайн: создатели Figma, Photoshop и других сервисов

«Выделение и маска» (Select & Mask)

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

Чтобы попасть в рабочее пространство «Выделение и маска» (Select & Mask):

• выберите инструмент «Прямоугольная область» (Rectangular Marquee, клавиша М);
• в правой части панели настроек вверху нажмите на кнопку «Выделение и маска» (Select & Mask).

Суть этого инструмента в том, что он выделяет не целое поле сразу, как это делает «Волшебная палочка» или «Цветовой диапазон», а вы задаёте программе размер участка, который хотите обособить.

В рабочем пространстве «Выделение и маска» существует несколько вариантов отображения будущего выделения, наиболее удобны «Марширующие муравьи» (Marching Ants) или «На слоях» (On Layers). Изменить режим отображения можно в выпадающем меню «Просмотр» (View) в правой части рабочего пространства.

Три типа предпросмотра: «Марширующие муравьи», «Перекрытие», «На слоях»Изображение: Freepik / Skillbox Media

• Подберите размер кисти, которой будете выделять участок, ― кисть должна не выходить за его границы, но и не быть сильно меньше.
• Для этого на панели настроек в окне рабочего пространства в поле «Размер» (Size) введите числовое значение размера кисти и примерьте её на отделяемый объект.
• Изменить размер кисти можно также на панели настроек или воспользовавшись горячими клавишами «».
• Кликайте этой кистью по нужному фрагменту изображения ― программа сама определит границы объектов на основе контраста.
• Участки можно расширять, двигая курсор безотрывно, или же добавлять к выделению новые места, изменив при желании размер кисти.
• Если в выделение попало что-то лишнее, участок можно подкорректировать ― для этого нужно перейти в режим кисти «Вычитание» (Subtract), нажав на знак «−» в кружочке слева на панели настроек.
• Под меню «Просмотр» справа находятся тонкие настройки выделенной области, при помощи которых сразу же в режиме предпросмотра вы можете модифицировать уже созданное выделение.
• После того как всё будет готово, нажмите Enter, чтобы вернуться в рабочее пространство Photoshop. При этом маска для слоя будет создана автоматически.

1. Преобразование слоя в смарт-объект.

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

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

Неразрущающие фильтры. Когда вы применяете к смарт-объекту фильтры, то они применяются как смарт-фильтры, которые помогают изменить настройки в любой момент. Большинство фильтров в Photoshop CS6 совместимы со смарт-объектами.

Синхронизация/ Связывание параметров. Если вы сделаете копию смарт-объекта простым дублированием слоя, они окажутся связанными друг с другом. Любые изменения, проведенные с содержимым одного смарт-объекта, немедленно отразятся на втором. Это полезно, если вам нужно несколько копий одного и того же слоя, но чтобы все настройки в них синхронизировались.

Чтобы преобразовать слои в смарт-объекты, выделите их, щелкните правой кнопкой мыши на слое и выберите Преобразовать в смарт объект (Convert to smart object).

Как выполнять обтравку в Adobe Photoshop

Способ 1. С помощью простого вырезания объекта

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

Выделение предмета в Photoshop

Затем применяем функцию «Скопировать на новый слой» и получаем машину без фона. 

Копирование выделенного на новый слой

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

Способ 2. С помощью слоя-маски

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

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

Добавление слоя-маски

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

Вид слоя-маски до работы по ней

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

Грубое отсечение лишнего на слое-маске

Способ 3. С помощью обтравочной маски 

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

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

Иконка сердца для обтравки по ней

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

Создание обтравочной маски

Готово: фото машины обрезалось по форме сердца.

Итог применения обтравочной маски

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

Зарегистрироваться

Другие термины на букву «О»

Орнамент

2. Используйте команду Поместить (Place)

Многие при создании фотоманипуляций и коллажей прибегают к следующему способу: открыть изображение в Photoshop, скопировать его и затем вставить в другой документ. Для вас больше нет причин делать это. Копирование и вставка требует гораздо больше времени, а команда Файл – Поместить (File – Place) автоматически помещает выбранное изображение в документ как смарт-объект. Тем самым вы значительно экономите свое время.

С помощью команды Поместить можно размещать в документе RAW, AI и другие типы файлов как смарт-объекты. Например вы можете разместить RAW-файл как смарт-объект и использовать Adobe Camera Raw для редактирования в любое время, просто дважды щелкнув на смарт-объекте. Вам больше не придется конвертировать RAW-файлы в JPEG для размещения их в своей фотоманипуляции.

Постановка задачи

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

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

Для примера возьмём фотографию водопада словенских ключей.

Рисунок 1: задача отделить воду от фона

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

Работа будет вестись с помощью каналов, масок и слоёв. Что это такое?

Отделение струй воды от фона

В качестве примера отделим воду источника от фона.

1. Нажатием клавиши F7 включите просмотр слоёв. Определите зоны, содержащие нужную информацию. После этого перейдите в закладки «Каналы». Необходимая вкладка подключается через меню «Окно» — «Каналы» или непосредственно через палитру «Слои».

2. Последовательно меняя видимый канал, выберите наиболее контрастный по отношению к целевой зоне — той части изображения, которую хотите скопировать. Нажав сочетание клавиш «CTRL+A», выделите всю информацию с канала.

Рисунок 2: демонстрация метода выбора канала

3. Создание маски

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

Создайте маску. Для этого достаточно нажать соответствующую пиктограмму в нижней части палитры инструмента. Белый прямоугольник на пиктограмме слоя и есть маска Adobe Photoshop.

Рисунок 3: создание маски

Удерживая клавишу ALT, щёлкните левой клавишей мыши на него. Вы перешли на маску.

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

Рисунок 4: редактирование маски. Вставка информации из канала

3. Перейдите на маску. Инструментом «Кривые» («Изображения»-«Коррекция»-«Кривые») затемните зоны теней, средних тонов и добавьте яркости в зону света. Щелчок левой клавишей мыши на диагональной линии создаёт точку коррекции. Нажав второй раз и удерживая клавишу, Вы можете двигать её, изменяя таким образом характеристики изображения.

Сделайте примерно так, как показано на рис. 5. Вода стала более заметной, фон начал исчезать.

Рисунок 5: Редактирование маски с помощь кривых

4. Инструментами «Затемнитель» и «Осветлитель» из панели инструментов Adobe Photoshop доработайте контрастность. Используйте «мягкие» параметры: насыщенность инструментов до 20%. «Осветлителем» подсвечиваем зону света. «Затемнителем» затемняем зоны теней. Использовать инструменты следует поочерёдно, методом маятника: два мазка одного, два другого.

Рисунок 6: Использование инструментов «осветлитель» и «затемнитель»

5. Для смягчения граней воспользуйтесь стандартным фильтром «Размытие».

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

Рисунок 7: Параметры кисти для закрашивания ненужной информации

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

Рисунок 8: Проверка правильности вырезания

7. В случае наличия посторонних цветов, воспользуйтесь инструментом Adobe Photoshop «Цветовой тон/насыщенность». Он находится в меню «Изображения»-«Коррекция». Измените тон рисунка в сторону синего цвета, уменьшите насыщенность и увеличьте яркость. Это «обесцветит» вашу воду и придаст ей натуральный вид.

Рисунок 9: Доработка маски изображения

8. Примените маску. Для этого нажмите на пиктограмме маски правой клавишей и выберите «Применить слой» — «Маску».

При необходимости вставить воду, просто скопируйте слой в нужное изображение. Пример — водопад из памятника основателем Киева.

Рисунок 10: Добавление слоя

Удачной работы!

Почему обтравка так называется?

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

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

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