Разработка лицевиков

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

• 
• 
• 

• 
• 
• 

Примеры таких шаблонов можно найти в приложении Photo Lab в разделе “Фотомонтаж лица”.

Данные шаблоны можно использовать вместе со стикерами — просто добавьте в проекте фильтр "Растеризация".

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

Создание проекта в Конструкторе шаблонов

Для Конструктора шаблонов psd-файл со слоями должен быть ассоциирован с проектом в формате .pttp2.

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

Алгоритм

Откроем Конструктор шаблонов при открытом Photoshop (если Photoshop не запущен, то это произойдёт автоматически при открытии Конструктора) и в меню "Файл" выберем пункт "Создать проект":

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

Диалог создания нового проекта позволяет создать несколько типов psd-документов. Для лицевых шаблонов используется "Универсальная ориентация".

После этого в Photoshop откроется новый psd-файл, ассоциированный с новым проектом и имеющий необходимую структуру групп:

Если в Photoshop уже есть открытые документы, то в диалоге создания проекта можно будет создать проект на их основе:

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

Привязку psd-документа к файлам проекта в любой момент можно поменять, нажав на "Файл > Изменить проект" (CTRL + E).

Помимо изменения привязки psd-документа можно скорректировать и тип проекта. Тип проекта при прочих равных может повлиять на итоговый результат.

Подробнее о Конструкторе и о том, как тестировать в нём готовые шаблоны, можно прочитать в этом разделе.

Область вписывания лица

Область вписывания задается смарт-объектом, расположенным на одном уровне с подгруппами слоёв. В зависимости от типа шаблона смарт-объект имеет свои особенности.

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

Внутри данного смарт-объекта находится слой "Цвет коррекции" (его можно залить цветом для приведения разных тонов кожи к приблизительно одинаковому), и ещё один смарт-объект (он используется Конструктором в технических целях).

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

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

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

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

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

Чтобы отразить смарт-объект области вписывания, необходимо воспользоваться стандартными инструментами Photoshop, например, в меню "Редактирование -> Трансформация -> Отразить по горизонтали \ по вертикали".

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

Отражение работает одинаково для любых областей вписывания и вне зависимости от типа шаблона.

Вернемся к вопросу привязки лица. Так, смарт-объект с точками лица внутри Области вписывания является чем-то вроде “лицевой координатной плоскости”, в рамках которой производится привязка лица. Положение, масштаб, а также выбранные точки на этой “лицевой координатной плоскости” определяют положение лица в результирующем шаблоне. Этот принцип обобщенно иллюстрирует схема ниже*:

где:
1 - холст шаблона
2 - слой с позиционированной относительно холста областью вписывания лица
3 - лицо, распознанное на пользовательской фотографии.
* пунктирные линии указывают на притяжение конкретных точек лица к выбранным точкам на Области вписывания лица.

После всех необходимых манипуляций над Областью вписывания лица в PSD-документе, вопрос позиционирования лица переходит в плоскость Конструктора шаблонов.

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

После того, как в PSD-документе будет установлен на нужное место смарт-объект области вписывания лица и PSD-документ перечитан, в Конструкторе шаблонов появится информация о том, как располагать лицо на плоскости шаблона.

Представление области вписывания типа "Лицо" на холсте, в PSD-документе

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

Если рассматривать вариант настроек "по умолчанию", то из 94 возможных точек лица, по умолчанию выбраны 4 точки - это центры глаз и уголков губ (поэтому на предыдущей и последующей схемах спрятаны другие точки).

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

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

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

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

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

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

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

1. Представление шаблона в Photoshop. Для простоты рассмотрим шаблон, состоящий из белого фона и области вписывания, которая установлена в определенной позиции, масштабе и под определенным углом. В PSD-документе видны все возможнны 94 точки. При этом при позиционировании смарт-объекта следует следить за позициями только тех точек, которые в дальнейшем планируется использовать для позиционирования.
2. Представление шаблона после перечитывания его PSD-документа Конструктором и применения к лицевой области вписывания фильтра “Вписывание лица”. Здесь задаются точки, которые участвуют в позиционировании лица и сила притяжения выбранных точек.
3. Пользовательское фото. Здесь для удобства мы отобразим только те группы точек, которые участвуют в позиционировании лица (т.е. выбраны на шаге 2) в шаблоне, а именно точки глаз и губ.
4. Позиционирование пользовательской фотографии на холсте шаблона относительно указанных точек лица, с учетом заданной силы притяжения.

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

Открывшийся Редактор позиции лица, как уже говорилось выше, позволяет настраивать положение лица относительно холста шаблона.

В редакторе позиции присутствуют следующие элементы:

1. Возможность копирования настроек положения с других лицевых областей вписывания, имеющихся в документе
2. Отображение дополнительных элементов шаблона (например, графических слоев) на предварительном просмотре.
3. Видимость опорных точек лица, которые можно указать для привязки пользовательского лица
4. Типовые привязки и координаты курсора силы притяжения.
   • Выбор типовых привязок из списка предусмотренных.
   • Сброс - возможность сброса настроек привязки до варианта по-умолчанию - по зрачкам и уголкам рта.
   • Изменение координат прицела силы притяжения по осям X и Y.
   • Опция “скольжение” - в случае, если на пути движения курсора силы притяжения по одной из осей встречается ограничительная линия - прицел скользит вдоль ограничительной линии. Если “скольжение” отключено, курсор упрется в ограничитель.
5. Окно предпросмотра результата
6. Панель масштабирования превью результата
7. Включение/отключение автоматического обновления превью результата при изменении настроек
8. Указатель центра масс выбранных опорных точек с учетом силы притяжения. Если перекрестие красных линий окажется близко к одной из выбранных опорных точек, вычислить позицию лица будет невозможно*.
9. Отдельная опорная точка лица (в данном случае, не выбранная для привязки)
10. Опорная точка, выбранная для привязки.
11. Допустимая область расположения курсора силы притяжения. Определяется выбранными опорными точками. Может быть многоугольником или отрезком. Для корректного определения позиции лица, курсор силы притяжения должен находиться внутри допустимой области.
12. Курсор силы притяжения лица к выбранным опорным точкам лица.
13. Применение изменений, сделанных в Редакторе позиции лица.
14. Отмена изменений, сделанных в Редакторе позиции лица.

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

Может возникнуть справедливый вопрос - зачем указывать какие-либо привязки в отдельном редакторе, если в PSD-документе можно выставить размер, поворот, положение Области вписывания лица и ограничиться этим?

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

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

Расположение слоев в psd-документе	Расположение точек лица по умолчанию в Редакторе позиции лица

Примеры результирующих шаблонов:

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

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

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

Примеры результирующих шаблонов:

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

Дополнительно

Авторесайз шаблонов

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

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

Создание шаблонов с несколькими юзерфото

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

Анимация в шаблонах

Данный тип шаблонов возможно анимировать. Подробнее о разработке анимированных шаблонов можно узнать здесь.

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