Использование маски по пользовательской фотографии для создания шаблона с эффектом неоновых бликов

Разработаем шаблон, с помощью которого можно добиться следующего визуального эффекта:

Оригинальное фото Результат

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

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

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

Шаг 1

Создадим проект в Конструкторе шаблонов. Для этого в меню “Файл” выберем пункт “Создать проект”. В открывшемся окне выберем тип проекта “рамка”, ориентацию “вертикаль”, а также укажем название проекта и место его сохранения.

ШАГ 2

В Photoshop в подгруппу “Графический слой 1” добавим наше фоновое изображение (скачать) и для удобства переименуем подгруппу в “Фон”. Перечитаем слои нашего PSD.

Шаг 3

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

Шаг 4

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

  • Нейрофильтр (имя нейрофильтра “Caramel Mood”, непрозрачность 50);
  • Коррекция (контраст 14, яркость 15);
  • Тёплый фильтр (сила коррекции 0,8)

В результате получаем вот такое изображение:

Шаг 5

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

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

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

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

Pасположим новую область вписывания поверх существующей и попутно переименуем слои для удобства работы (SQ Линии, SQ Фото).

Перечитаем PSD и применим фильтр “Определение границ нейро” на область вписывания “SQ Линии”. Убедитесь при этом, что на области вписывания "SQ Фото" данный фильтр отсутствует.

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

Шаг 6

Добавим цвета в наш шаблон. Для этого перейдем в Photoshop и создадим новый слой в подгруппе “Графический слой 3”.

При помощи инструмента Пипетка выберем на фоновом изображении образец фиолетового цвета (#af05a9) и заполним им слой при помощи инструмента Заливка.

Повторим операцию для подгруппы “Графический слой 2”, но уже с голубым цветом (#68c5fe). Переименуем подгруппы согласно цвету слоя, временно скроем слой с голубой заливкой и перечитаем PSD.

Шаг 7

Вернемся в Конструктор шаблонов. Применим к графическому слою “Фиолетовый” динамическую маску по пользовательской фотографии, построенную по области вписывания “SQ Линии”. Чтобы ограничить применение маски в рамках фигуры, на том же графическом слое построим маску по фигуре по области вписывания “SQ Фото”. Режим наложения при этом мы оставляем без изменения - умножение.

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

Как мы видим, у нас получились фиолетовые линии, не выходящие за рамки фигуры с пользовательской фотографии, отрисованные на черном фоне. Теперь нам необходимо убрать с фотографии непосредственный результат применения фильтра “определение границ нейро”, оставив только фиолетовые очертания. Для этого обратимся к слою "SQ Линии" в Photoshop и сделаем его прозрачным.

Перечитаем слой и проверим результат.

Шаг 8

Теперь добавим к шаблону голубые блики. Для этого обратимся к слою “Голубой”, и тоже применим к нему динамическую маску по пользовательской фотографии. На этот раз построим её по области вписывания “SQ Фото”.

Давайте наглядно рассмотрим принцип построения маски в этом случае.

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

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

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

Шаг 9

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

Для этого обратимся к диалогу создания динамической маски, где во вкладке “по пользовательской фотографии” мы уменьшим вытравку и увеличим радиус размытия. Для области вписывания “SQ Линии”, которая отвечает за построение фиолетовых штрихов, установим значение вытравки на -2 и размытие на 1,5, а для области вписывания SQ Фото сделаем вытравку -3 и размытие 3.

SQ Линии SQ Фото

При работе с маской по пользовательской фотографии изменение параметров "вытравка" и "размытие" может привести к нежелательным результатам.

Шаг 10

В качестве финального штриха нам осталось настроить блендинг для графических слоев. Перейдем в Photoshop и для подгруппы слоев “Фиолетовый” добавим наложение “Экран” и непрозрачность около 70%, а для подгруппы “Голубой” — "мягкий свет". Настройки непрозрачности для этого слоя в нашем случае мы оставили без изменения.

Перечитаем слои и обработаем фотографию.

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