Мастеркласс: Как сделать фон прозрачным?

[admin]

Используем Adobe photoshop

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


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

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

Однажды я получил от дизайнера такой макет:

Для макета мне нужно было сохранить ленточку и коробочку (вместе с тенью) отдельной картинкой, которая накладывается поверх открытки и листа бумаги. Но дизайнер нарисовал тень как-то странно: она находится в отдельном слое, который накладывается на фон в режиме Multiply, при этом нарисована на белом фоне. Объединение слоя ribbon and box со слоем shadow давало непредсказуемый результат. Как ни крути, а использовать «волшебные» инструменты тут бесполезно — слишком долго придется выделять все области отсечения. К тому же есть вероятность добавления в эту область нужных пикселей, которые сделают тень резкой и неестественной.
Сложная, на первый взгляд, проблема решается довольно просто. Все, что нужно сделать, — это найти разность между картинкой с ленточкой и коробочкой и картинкой без них.
1. Выделяем все изображение (Ctrl+A), копируем видимую область (Edit → Copy Merged или жмем Shift+Ctrl+C), создаем новый документ (Ctrl+N) и вставляем в него картинку (Ctrl+V). 2. Возвращаемся в исходный макет и, не снимая выделения, отключаем слои ribbon and box и shadow (то есть все, что связано с вырезаемыми объектами). Копируем фоновое изображение (следите, чтобы слой background был выделен) и вставляем его в недавно созданный документ. В итоге должен получиться документ с двумя слоями: с ленточкой-коробочкой и без них:

3. Выделяем верхний слой (Layer 2) и меняем режим наложения с Normal на Difference:

4. Жмем на иконку внизу палитры Layers и выбираем из выпадающего списка Threshold. В появившемся окошке перетаскиваем ползунок в крайнее левое положение:

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

Хозяйке на заметку

С помощью режима наложения Difference (разность) мы подсветили те области, которые отличаются в наших двух слоях. А с помощью настроечного слоя Threshold (порог) мы одновременно выполнили две задачи: закрасили области с яркостью больше единицы в белый цвет и подготовили слой для создания выделения (попробуйте, не создав этого слоя, выделить черный цвет в слое Layer 2).


И наконец, не снимая выделения со слоя Threshold в палитре Layers, выделяем все черные области с помощью Magic Wand (или с помощью Select → Color Range), отключаем слои Threshold и Layer 2, выделяем слой Layer 1 и жмем кнопку Delete. Смотрим на результат:

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

[Stasis]

Откроем произвольное изображение, в котором необходимо отделить область от фона. Перейдем к палитре Слои (Layers) и дважды кликнем по единственному в ней представлению - это действие конвертирует фон в слой. Переименуем слой в Pretty Girl.

Откроем диалоговое окно Фрагмент (Extract): Изображение > Фрагмент (Image>Extract) или комбинация клавиш Alt+Ctrl+X.

1. Активируем инструмент Маркер (Edge Highlighter Tool) и проведем четко, насколько сможем, по контуру фрагмента изображения, который мы пытаемся извлечь. Центр стержня маркера должен проходить непосредственно по контуру фрагмента. Поверьте, это очень несложно. На контрастных участках попробуем обводить контур маркером с тонким стержнем (размер кисти 6-8); для более мягких областей, таких, например, как распущенные волосы, увеличим размер кисти до 12-14. Для увеличения/уменьшения размеров кисти используются клавиши [ и ].

2. После того, как требуемая область определена, выберем инструмент Заливка (Fill Tool) и зальем фрагмент изображения, который мы хотим отделить от фона. Если результаты нас устраивают, а я надеюсь, что так и есть, нажмем OK.
Внимательно проанализируем получившееся в результате изображение. При внимательном просмотре мы увидим, что незначительные фрагменты изображения случайным образом потеряны. Эту оплошность мы можем исправить с помощью инструментов Ластик (Eraser) и Кисть возврата (History brush).

В палитре Протокол (History) в качестве источника для Кисти возврата определим предпоследнее действие перед командой Фрагмент (Extract). Если мы не делали ничего лишнего, то это действие — Создать слой (Make Layer). В панели инструментов активируем инструмент Кисть возврата (History brush).

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

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

[Stasis]

В Photoshop откроем требуемое изображение: Файл > Открыть (File > Open) или Ctrl+O.

Активизируем инструмент Эллиптическое лассо (Elliptical marquee tool) и с его помощью выделим большую часть изображения.
Перейдем к палитре Каналы (Channels) и создадим новый канал.
На черном фоне мы увидим созданное нами выделение.

Выполним команду Выделение > Растушевка (Select > Feather). Радиус растушевки (Feather Radius) определим в размере 9 пикселей и нажмем Ввод (Enter).
Инвертируем выделение: Выделение > Инвертировать (Select > Inverse) или Ctrl+Shift+I.
Зальем выделение белым цветом - Alt+Del.

Добавим шум к выделению посредством выполнения команды: Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise). В диалоговом окне введем следующие значения:
Сила (Amount): 25
Распространение (Distribution): Однородное (Uniform)
Монохромный (Monochromatic).

Перейдем к фильтру Наклонные штрихи: Фильтр > Штрихи > Наклонные штрихи (Filter > Brush Strokes > Angled Strokes) и применим его к изображению со следующими параметрами:
Баланс направления (Direction balance): 50
Длина штриха (Stroke length): 15
Резкость (Sharpness): 3

Перейдем к палитре Слои (Layers). Щелкнем на представлении слоя в палитре.
Выполним команду Выделение > Загрузить выделение (Select > Load Selection) с параметром Операция: Новое выделение (Operation: New selection). В качестве выделения выберем Alpha 1.
Инвертируем выделение: Выделение > Инвертировать (Select > Inverse).

И, наконец, зальем выделение белым цветом, нажав Alt+Del.
Получилось!

[Stasis]

Ну вот еще как можно сделать растушевку...: