Про скорость создания шаблонов для генерации PDF в вебе

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

Действительно, генерить макеты по шаблонам — это понятная штука. Есть шаблон и массив данных: заменяем тексты, поправляем стили и генерим PDF. А как делать эти шаблоны? Кто их делает? И что это вообще «шаблон для PDF»?

Проблема шаблонов для PDF в том, что готовые PDF файлы всегда делают из какой-то другой программы: Иллюстратора, Индизайна, Ворда или даже Экселя.

Когда на Yatalks.Yandex рассказывал про генерацию дизайна в вебе, показывал свои шаблоны. Это просто JSON-файлики с описанием макета — цвета, размеры, шрифты, выравнивания и прочее. Первая картинка следующего поста как раз это шаблон. Конечно, пока я их делаю сам. Там ничего сложного, но всё равно их надо делать. Сейчас эти «JSON-файлики» мы уже называем «конфиги», потому что там намного больше информации. Но об этом в следующих постах.

И тут случился показательный кейс про скорость создания макетов, о котором хочу рассказать.

Клиент, который сделал уже всё инфопланирование в вебе на нашем Автокрафте с вёрсткой в Индизайне через плагин, пришёл с новым проектом. Мы посмотрели макеты, которые были средней сложности, и предложили попробовать сгенерить всю навигацию в вебе. Вообще без Индизайна. И чтобы у клиента была возможность самим потом править данные в вебе и генерить PDF полиграфического качества.

Договорились, что после утверждения дизайна мне дадут макеты в Иллюстраторе (рисовали дизайн в нём). Я сделаю шаблоны и загружу их в Автокрафт. После этого кто угодно с доступом может скачать все макеты всего проекта со всех планов (6 этажей) одного типа (шаблона) в один zip-файл в один клик в браузере.

О сроках договорились, что у меня будет 2 недели на создание шаблонов и неделя на правки. Там чуть больше 50 шаблонов средней сложности. Некоторые со статичными данными, но всё равно нужна система нумерации, шаблоны и готовые файлы. Сроки вроде комфортные. Решили попробовать.

И конечно, утверждение дизайнов задержался, сроки сдвинулись, что-то там ещё произошло. В общем на создание 50 шаблонов и генерацию макетов осталось... 2 дня (тут должен быть анимированный растровый смайлик с кривой рожицей из аськи).

Когда я это узнал, был за рулём, но не потерял управление и спокойно доехал до дома. Было решено поступить так: все шаблоны, у которых больше 3 носителей, я буду делать в вебе, а единичные будет верстать дизайнер в Иллюстраторе старой доброй копипастой. Начали мы одновременно.

Что должен делать дизайнер, превращаясь в верстальщика: открыть дизайн, скопировать данные из Автокрафта (из расстановки носителей на плане), заменить данные, перевести тексты в кривые, сохранять в PDF с нужным именем файла.

Что должен делать я: открыть дизайн, создать шаблон нужных размеров с нужным форматированием текста, выгрузить статическую часть (фон и неменяющиеся элементы), загрузить шаблон в Автокрафт, проверить бегло все растровые превью в списке носителей и выгрузить все готовые макеты этого типа пачкой PDF-файлов в кривых.

Скорость оказалась такой: пока я делал все макеты одного шаблона, дизайнер (верстальщик) успевал сделать 3 файла. Всего 3 файла! за то время, пока я успевал сделать шаблон и все существующие макеты по нему, и все возможные будущие макеты этого типа.

В нашем чатике это так и выглядело: 3 сообщения от дизайнера, 1 моё сообщение, 3 сообщения от дизайнера, 1 моё сообщение. Причем в моих шаблонах часто был вариативный фон (зависел от переменных), потому что некоторые элементы были с градиентами и переведены в кривые. Но и это текущая версия JP-движка умеет делать прямо из JSON-шаблона.

Дизайнеры знают, что скруглённые углы просто по радиусам выглядят не круто. Намного круче выглядят углы, выполненные суперэллипсами.

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

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

Автоматические тесты для Адоба

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

Но в Иллюстраторе и Индизайне у тебя на выходе файл, в котором «что-то произошло». Если пытаться после запуска скрипта писать ещё один скрипт, который будет открывать файл и проверять, сколько там у тебя создалось этих кружочков, то это с ума можно сойти!

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

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

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

Так вот у нас и готова база для тестирования! Просто надо логи писать рядом Адоб-файлом. И состоит система из:
1. файл, в котором запускается скрипт,
2. файлы, которые получились,
3. лог-файл.

Магическая папочка tests содержит:
1. конфиг-файл, где прописывается путь до запускаемого скрипта,
2. если надо, то файл входящих переменных, которые скрипт создаст перед каждой попыткой,
3. адрес папки, где лежит файл клиента,
4. список проверок, то есть тех самых тестов.

На текущий момент у меня уже проверки:
— есть ошибка или нет, точный текст ошибки, текст ошибки может содержать текст,
— сколько и каких файлов создалось и в каких папках,
— какие объекты были созданы и на каких позициях.

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

То есть скрипт-тестировщик должен просто:
1. зайти в папку с очередным исходных файлом, загрузить переменные при необходимости,
2. открыть файл и выполнить скрипт, закрыть файл,
3. пройтись по лог-файлу и найти там все нужные статусы, значения, тексты ошибок, уведомления успехов,
4. пройтись по файлам, если они создавались скриптом (предварительно очистив эту папку в начале запуска теста), и убедиться, что всё создано, как надо.

Тут, конечно, надо точно соблюдать одинаковые способы написание логов, чтобы эта система работала на разных скриптах. Но без аккуратности, по-моему, вообще не возможен программист для скриптов под Адоб. Там выживают самые аккуратные и внимательные. 😍


Ну волшебство же! Запустить тесты на 5 файлах клиента за последние полгода и получить в результате:

Tests status = OK
tests: 5, asserts: 23

Скрипт от дизайнеров Додо Пиццы 🍕

Пригодится, если вы дизайнер и сохраняете макеты из Adobe Illustrator: shift.dodobrands.io/automation/script-for-saving-layouts

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

Забирайте себе, делитесь с теми, кому это актуально.
Инфа открыта, но who knows!

👆 Неожиданное упоминание 😎

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

🍕🍕🍕🍕🍕🍕🍕🍕

В среду, 30 октября, собираемся чтобы поговорить (и послушать) про автоматизацию процессов производства макетов при проектировании и внедрении систем визуальной коммуникации и навигации. И особенно посмотрим на то, как это можно делать без привязки к продуктам Adobe.

Приглашённый эксперт — Сергей Турулин, технический директор «Эникрафт». Сергей занимался автоматизацией дизайна в Студии Лебедева, Золото-Групп (ZTL.Group), Додо-Пицца. Создавал навигацию для Москвы, Екатеринбурга, Челябинска и других городов России и зарубежья.

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

Встреча пройдёт в Высшей школе брендинга (г. Москва
Протопоповский пер., 9, стр. 1, этаж 4, ауд. 424), начинаем в 19:00

Участие бесплатное
Регистрация тут

В 19 начало. Йоу!
Ссылка на трансляцию будет тут

Ошибка как источник идеи

Недавно я добавил на сайт Метростата метро Питера. Обновление делал поздно вечером. Не буду грузить технической информацией, но получилось так, что одинаковые станции Москвы и Питера перепутались и по «Беговой» из Питера показывалась московская.

Я быстро поправил баг. Но Яндекс за эти несколько минут успел проиндексировать сайт и выдал мне ворнинг в статистике, что у разных страниц одинаковый контент.

И у меня появилась идея сделать статистику по одинаковым названиям станций разных метрополитенов.

В общем, везде надо искать идеи. 💡

Открытый семинар с Сергеем Турулиным

В воскресенье, 3 ноября, зовём вас на встречу с одним из первых автоматизаторов дизайна в России.

Сергей Турулин работал в Студии Лебедева, Золото-Групп и Додо-пицце. Он генерировал навигацию Москвы, создавал генератор адресных табличек для Екатеринбурга, Челябинска и других городов России и зарубежья. Скорее всего, вы каждый день видите дизайн, который создан с помощью его инструментов.

Просто посмотрите, сколько крутоты у него на сайте: adobescript.ru

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

А ещё про:
— автоматическое нанесение пассажиропотоков на схему метро;
— генеративные новогодние плакаты для Студии Лебедева;
— упрощение и унификацию создания адресных табличек и указателей Екатеринбурга;
— автоматическое составление расписаний челябинских автобусов (проект с Ильёй Бирманом);
— PDF-сервер;
— Автокрафт — инструмент планирования навигации прямо в браузере.

Если останется время, пойдём в хардкор — поговорим о кернинге, полном отказе от Адоба и отличия обычного PDF от того, что без вопросов примут в типографии.

Это нужно всем дизайнерам. Такое случается раз в столетие. В это воскресенье. В 18:00 по Москве. Ссылка на зум будет тут.

👆 Завтра, в воскресенье, в 6 вечера по Москве устроим созвон с ребятами из «Сетки».

Расскажу о проектах, в некоторые залезу «под капот». Всем, кому интересна автоматизация дизайна, забронируйте у себя в календаре час—полтора. Можно будет задавать вопросы.

Думаю, интересно будет не только дизайнерам, но и менеджерам и разработчикам. ;–)

Ссылка на зум будет завтра.

Запись семинара ↑ с Сергеем Турулиным

https://youtu.be/5A3-fwkr85g
https://youtu.be/5A3-fwkr85g
https://youtu.be/5A3-fwkr85g

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

Подписывайтесь на канал Сергея про автоматизацию дизайн-инструментов: @adobescript.

Выпиваем за Эникрафт. Чин-чин! 🥂

Раньше генерил дизайн сам, а теперь с друзьями! Запустили стартап – автоматизируем дизайн в вебе и в Adobe. Welcome!