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

Главное правило: Если что-то смущает или вызывает вопросы — консультируйтесь с автором задачи! Ничего не переводите самостоятельно! Если указано, что необходимо локализовать текст, то все переводы (локализации) просите у автора задачи

Виды анимации:

• Программные — обычные линейные анимации (перемещения, масштабирование, покраска), их делает программист кодом.
• Секвенции — набор PNG, представляющих собой покадровые слайды. Их готовит художник (чаще всего есть готовые, которые нужно вставить в PSD и подогнать размер). Если в ассетах нет нужной секвенции — спроси у автора задачи. Пример секвенции.

Общие требования

Шаблон с ресайзной сеткой, которым нужно пользоваться (внутри 4 экрана, места для лого и кнопок под каждый сайз): PSD Размер макета 1390x1390 сразу под вертикальную и горизонтальную ориентацию

ПЕРЕД ТЕМ, КАК ДЕЛАТЬ ПРЕВЬЮ СО ВСЕМИ РЕСАЙЗАМИ И РАСКАДРОВКАМИ, СОГЛАСОВЫВАЕМ ВЕРТИКАЛЬНЫЙ ВИД 640x1390

1. Внутри общего макета (1390x1390) обязательно должны быть нанесены технические рамки для всех ключевых разрешений: 640x1390, 1390x640, 640x854, 854x640 - для вертикальной и горизонтальной ориентации.
2. Все важные элементы должны помещаться в область 640x854 и 854x640, края будут обрезаться в зависимости от размеров экрана.
   1. Допускается масштабирование сцены для маленьких соотношений сторон и горизонтальной ориентации
   2. Допускается перемещение некоторых элементов на сцене для определенных соотношений сторон.

Цветовой профиль: sRGB IEC61966-2.1;

Нейминг файлов и правила сдачи проекта

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

1. Структура рабочих слоев (Готовим файл для программиста)

• Папка elements: Соберите уникальные элементы компоновки уровня над всеми слоями в отдельную папку elements. Все интерактивные ассеты (фишки для мерджа, тайлы, пустые кнопки, масти карт и т.д.) должны лежать внутри строго «стопочкой» — друг под другом и идеально отцентрованно.
• Активная папка: В итоговом PSD должна быть основная папка с вертикальной ориентацией (640x1390). В ней вы собираете основную структурированную сцену: интерактивные объекты, персонажей, UI, текст и т.д. в виде смарт-объектов.
• Остальное — слито: Все остальные варианты отображения (горизонтальный вид и дополнительные ресайзы) должны присутствовать в файле, но в слитом (растрированном) виде, как картинки-превью.

Зачем это нужно: Программисту важно иметь один набор редактируемых ассетов. Слитые слои других ориентаций служат для него наглядным референсом: он видит, куда именно в коде ему нужно переместить или как смасштабировать ваши «живые» объекты при повороте экрана.

2. Очистка макета перед сдачей