Разработка рамок

Рамки — это шаблоны, в которые фотография пользователя вписывается по координатам угловых точек четырёхугольной области. Эта область может занимать как часть всего изображения, так и весь холст (например, эффект двойной экспозиции на правом телефоне).

Примеры таких шаблонов можно найти в приложении 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-документах.

Копирование и вставка ориентаций шаблона

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

Разнесение ориентаций в разные psd-документы

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

Четырёхугольная область вписывания

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

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

Внутрь смарт-объекта для удобства можно поместить тестовые фотографии. Для того, чтобы открыть смарт-объект, дважды кликаем по его иконке:

Скопируем тестовые фотографии на новые слои, выберем из них одну и сохраним смарт-объект:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cоздание шаблона для вписывания в четырёхугольную область

Важные видеоуроки

Остальные видеоуроки (например, про работу с фильтрами) вы можете посмотреть на этой странице.