Забыл приложить ссылку, которую нагуглил, где написано, как вроде можно всё-таки перевести в кривые с сохранением всего форматирования: https://creativepro.com/converting-text-to-outlines-the-right-way/

И там в комментах от 2023 года есть ссылки на способ перевода в кривые через сохранение в PDF

(но я не проверял ни один способ пока)

Всем привет! ⚡️⚡️⚡️

5-го декабря в Белграде буду выступать на YaTalks 2023 — главной конференции Яндекса для IT-сообщества — с докладом про автоматизацию дизайна.

Это моя первая конференция, надеюсь будет круто. 😎

Автоматизация полиграфического дизайна

Выступил на Yatalks.Yandex с докладом на любимую тему.

Рассказал, как перестать верстать в Адобе силами верстальщиков и переходить на веб-технологии, сохраняя все требования к макетам в PDF.

Показал, как мой JP-движок работает с текстом, чтобы PDF «выглядел точно как в Иллюстраторе» — лигатуры, кернинг, трекинг, кривые. Моментально и без ошибок. Как движок встраивается в JS-приложения: браузер, PDF-сервер, Google-данные, OSM.

Показал Autocráft — веб-сервис инфопланирования с автоматической вёрсткой макетов в Adobe InDesign или прямо в браузере. Как это решение позволяет разделить работу на аналитику, расстановку и вёрстку навигации. И как сэкономить на лицензиях и верстальщиках. Скоро подробный анонс!

Смотрите, лайкайте (и на Ютубе тоже), шерьте, зовите на конференции и подкасты!

https://www.youtube.com/watch?v=CEEpBQ9GilY&list=PLQC2_0cDcSKCfKYWz21xB8UfCiMD4HqZJ

Что-то я забросил писать в этот канал. Надо как-то восстановить регулярность. И попробую начать с подведения итогов ушедшегода.

Итак, итоги (порядок случайный)

1. Выступил на конференции.
Понравилось, планирую в этом году ещё выступить, и не только про автоматизацию дизайна.

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

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

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

Это стал пдф-сервер на nodejs с контроль-панелью: клиент выполняет запросы, получает пдф-файлы и оценивает дизайн. А я захожу в админку и смотрю статус по каждой части макета: где «200», «400», а где 500 (коды статусов взял из веба :)) И большинство причин ошибок тоже удалось писать в логи.

4. Довели с ребятами Автокрафт до стабильной версии, которая уже начинает генерить сложные макеты и с текстами, и с графикой (что такое Автокрафт, можно чуть-чуть подсмотреть в видео на 25 минуте).

5. Выпустил генератор уличных указателей Екатеринбурга. Вот тут написано про проект, а тут — про создание генератора.

6. Научился более-менее рисовать карты в своём пдф по сырым данным из OSM.

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


А теперь планы на этот год:

1. Выпустить Автокрафт.
2. Запустить публичный пдф-сервер с какими-то простыми макетами.
3. Выступить на конференции.
4. Начать вести канал полезнее про это всё добро, а не только «про себя любимого».
5. Выпустить 2 экстеншена: свободный и платный.
6. Может быть всё-таки получится выпустить JP в библиотеке.
7. Сэкономить ещё кому-то несколько сот, а может и тысяч часов рутинной работы.

Как-то так.

Дилемма вертикальных метрик в веб-дизайне. Подробный разбор очень наболевшей темы совместимости вертикального выравнивания текста в браузерах/фигме/индизайне от Ани Даниловой для type today. Ценный материал, обязательный для всех, кто верстает текст в вебе: type.today/ru/journal/verticalmetrics

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

Вот у вас, уважаемые разработчики, обычно фронтенд и бэкенд. А у меня ещё дизайненд.

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

Вот и приходится запускать 3 «консоли»:
— фронтенд: pnpm dev
— бэкенд: symfony server:start -d
— дизайненд: открываю Adobe InDesign или Illustrator

Интересно, что Иллюстратор и Индизайн являются продуктами одной компании, используют одни и те же языки скриптования, но делать сетевые скрипты в Иллюстраторе в миллион раз сложнее Индизайна. Чтобы протестировать экстеншен (сетевые скрипты) в Индизайне, достаточно закрыть/открыть панель экстеншена, а в Иллюстраторе — надо закрыть/открыть сам Иллюстратор.

Но при этом если объявить константу в экстеншене Индизайна, то можно словить ошибку попытки переопределения константы, потому что файлы запускаются «заново», но «не все». Почему? А потому. И чтобы поймать подробности этой ошибки ещё надо очень сильно исхитриться, потому что по умолчанию ты видишь тупо Script eval error.

Вот так и живёшь: постоянно думаешь, что можно, а что нельзя. Зато Чат-джипити не скоро разберётся во всём этом добре.

Традиционная схема пасспотоков станций Мосметро за 4 квартал 2023 года без цифр — просто красивая картинка. Генерит её скрипт в Иллюстраторе

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

На 2-ой картинке видны кернинговые группы, когда одинаковый кернинг для разных пар глифов объединяется в группы, чтобы не указывать для каждой пары глифов одинаковое значение.

Группы сильно экономят место! Например, файлы с метрикой шрифта кернинговыми группами весит 300 КБ, а если убрать группы и хранить все пары отдельно, то файл разбухает до 4-5 МБ.

Про скорость создания шаблонов для генерации 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-шаблона.

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

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

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