Разработка лицевых шаблонов

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

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

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

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

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

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

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

Алгоритм

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

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

Диалог создания нового проекта позволяет создать несколько типов psd-документов:

  • Универсальная ориентация.
  • Несколько ориентаций в рамках одного psd-документа (подробнее здесь).
  • Несколько ориентаций, каждая из которых будет храниться в отдельном psd-документе (подробнее здесь).

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

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

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

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

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

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

Ориентации шаблона

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

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

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

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

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

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

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

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

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

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

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

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

где:

  • Холст шаблона
  • Слой с позиционированной относительно холста областью вписывания лица
  • Лицо, распознанное на пользовательской фотографии.

* пунктирные линии указывают на притяжение конкретных точек лица к выбранным точкам на Области вписывания лица.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Редактор позиции лица

Редактор позиции лица позволяет настраивать положение лица относительно холста шаблона.

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

  • Строка меню:

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

      • Точки лица – вариант по умолчанию.
      • Уточненные точки лица – вариант, позволяющий получить более точные размер головы и позиционирование точек лица.

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

    • Показать еще – отображение дополнительных элементов шаблона (например, графических слоев) на предварительном просмотре.
  • Настройки позиционирования:

    • Видимость опорных точек лица, которые можно указать для привязки пользовательского лица.
    • Типовые привязки и координаты курсора силы притяжения:
      • Выбор типовых привязок из списка предусмотренных.
      • Изменение координат курсора силы притяжения по осям X и Y.
      • Скольжение — в случае, если на пути движения курсора силы притяжения по одной из осей встречается ограничительная линия, курсор скользит вдоль ограничительной линии. Если скольжение отключено, курсор упрется в ограничитель.

      • Сброс — возможность сброса настроек привязки до варианта по умолчанию — по зрачкам и уголкам рта.
    • Точки позиционирования:

      • Опорные точки — точки лица, по которым будет выполняться привязка. Нажмите на точку, чтобы выбрать ее или отменить выбор.
      • Курсор силы притяжения — черный прицел, определяющий силу притяжения лица к выбранным опорным точкам лица.
      • Допустимая область расположения курсора силы притяжения — многоугольник или отрезок, определяемый выбранными опорными точками. Для корректного определения позиции лица курсор силы притяжения должен находиться внутри допустимой области.
      • Указатель центра масс — красное перекрестие, указывающее центр масс выбранных опорных точек с учетом силы притяжения. Если указатель окажется близко к одной из выбранных опорных точек, вычислить позицию лица будет невозможно*.
  • Окно предпросмотра результата.

    • Опция Автообработка включает автоматическое обновление превью результата при обновлении настроек. Если опция выключена, для обновления нужно нажать кнопку Обработать.
    • Панель под превью позволяет масштабировать результат.

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

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

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

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

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

Расположение слоев в psd-документе
Расположение точек лица по умолчанию в Редакторе позиции лица
Примеры результирующих шаблонов со стандартными настройками

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

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

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

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

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

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

Отражение области вписывания

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

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

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

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

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

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

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

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

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

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

Примеры разработки лицевых шаблонов

Пошаговые пособия

Примеры разработки лицевых шаблонов

Видеоуроки

Видеоуроки по созданию лицевых шаблонов