Сергей Турулин

Движок JP хранит векторные формы в специальном формате, чтобы можно было любые части формы раскрасить в любые CMYK- или RGB-цвета: в шаблоне указывается 1 цвет или массив цветов. И я «руками» указывал цвета элементам форм: стрелка — белая, фон — синий, форма — зелёная. И так далее. Цвета хранятся в шаблоне знака. До этого у меня были макеты с малым количеством векторных форм (символов), и поэтому такой подход был достаточным — генерил их маленьким скриптом по одной штуке.

А в финских знаках — целая пачка символов! Поэтому я написал скрипт для Иллюстратора, который все указанные артборды конвертирует в набор готовых методов, достаточно передать ему массив цветов. Названия методов — это названия артбордов. Метод рисования в JP-движке — это имя символа (по умолчанию). Всё работает моментально.

И труд был не зря потраченным временем — как раз вскоре появилась задача на конвертацию 90 форм. Открываешь файл с иконками, запускаешь скрипт и через пару секунд получаешь 90 методов рисования иконок.

После создания генератора указателей дорог, захотелось сделать что-то с символами. И тут мне на глаза попался пост Серёжи Рассказова про новый шрифт Finlandika, специально созданный для навигации Финляндии. Мне так понравился этот шрифт, что решил сделать генератор финских туристических указателей. А главное — добавить себе, наконец, функционал для работы с пачкой векторных форм.

В итоге, собрал генератор:
https://adobescript.ru/en/generator/road-sign-tourist-finland
(в Сафари, особенно на мобильнике, выглядит не очень :)))

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

Время на создание самого генератора ушло мало — всего 4—5 часов для обоих шаблонов (со стрелкой внизу и без). А вот с иконками надо было повозиться.

👇

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

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

Собрать в генераторе можно указатель до 3 строк: можно добавить километры и стрелки. Одинаковые направления стрелок группируются. Разные направления — отделяются разделителем.

В общем, если вы хотите сделать какое-то объявление в виде дорожного знака, теперь вы знаете, где это можно сделать ;))

Вот ссылка: https://adobescript.ru/generator/road-sign-russia

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

Нагуглить справочники по скриптованию в Иллюстраторе и Индизайне можно достаточно легко. Они все более-менее одинаковые: списки методов и иногда примеры. Но есть один сайт — супер полезная штука!

Те, кто писал скрипты для Адоба, знают, как неудобно делать диалоговые окна: странные названия параметров, не интуитивное поведение и прочее. Так вот есть ЦЕЛЫЙ САЙТ, для генерации диалоговых окон (спасибо ему огромное!).

Сайт генерит код (кнопочка Export), в заголовке которого есть джейсон в комментарии, по которому можно потом «восстановить» окно на этом же сайте, если захочется что-то поменять (кнопочка Import).

Обычно я генерю диалоговое окно на этом сайте, а в результирующем коде перед методом dialog.show() добавляю свои обработчики событий или изменение элементов окна.

Сайт работает не во всех браузерах: https://scriptui.joonas.me/

Количество лайков/дизлайков покажет: интересно ли будет про такое читать.

Сергей Турулин pinned a GIF

Моя самая любимая фича — это подгонка форм под размер документа 😍🥰😘

Например, у вас есть фон у знака из сложной векторной формы. Ширина знака подгоняется под контент. Но мы не можем векторную форму просто «сжать».

Поэтому в движке есть специальный механизм: достаточно в шаблоне знака указать «выровняй мне 6 точек по правому краю» и движок сделает это сам моментально!

Как это работает?
1. Заходите на сайт в любом браузере
2. Вводите данные в поля и смотрите на превью
3. Если укажете Гугл-таблицу, то можете пройтись по строкам и проверить результаты
4. Нажимаете «Скачать»
И у вас готовый файл PDF или вся пачка в одном ZIP-файле.

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

Привет!

Хочу рассказать про свою разработку — движок JP для быстрой генерации PDF-макетов по шаблонам прямо в браузере.

Уже пару лет я генерю файлы в браузере, и вот он собрался в «движок», который умеет самое нужное:
— рисовать тексты и формы, выравнивая между собой,
— подгонять размер макета под контент (по ширине и/или высоте),
— делать CMYK или RGB в миллиметрах по точным значениям, никаких HTML-конвертеров,
— выравнивать объекты и группы объектов, а также сами объекты внутри групп,
— умещать текст в ширину или переносить по словам,
— подгонять символы под размер, не искажая их (напр., умещать стрелку в ширину),
— генерить в браузере форму ввода данных по данным в шаблоне,
— легко импортить данные из Гугл-таблиц или Экселя и скачивать ZIP-архив с PDF-файлами в 1 клик.

И это всё «из коробки», то есть быстро. Например, генератор в этом видео был сделан всего за 6 часов с внутренней логикой: смена цвета, группы стрелок + импорт из Гугл-таблиц.

Полное описание и видео на сайте: https://adobescript.ru/jp

Обновил схему «Тысячи пассажиров метро»

На портале появились данные за 2022 год, включая новые станции БКЛ.

На схеме — сумма тысяч пассажиров в день, которые входили и выходили на станции.

А ещё — уникальная схема в собаках! 🦮🐕🐩

Посмотреть свою «любимую» станцию, сравнить тысячи и скачать хайрез в PNG и PDF (включая в собаках) можно на сайте: https://metrostat.ru

PS: Прошу прощения за перепост — телега неудобна в этом плане ://

Генератор транспортных расписаний

Всё собирался написать сюда, что участвовал с Ильей Бирманом и Юлией Космыниной в создании системы генерации красивых расписаний транспорта. Пока собирался, сгенерированные расписания уже появились в Челябинске. Йоу!

https://t.me/ilyabirman_channel/8118

С новым счастьем!

На сайте Студии Артемия Лебедева вышел новогодний плакат, который задизайнил и запрограммировал.

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

Хочу поздравить всех, особенно программистов: С наступающим Новым кодом! 🎉🎈🎉

Тысячи пассажиров метро

Давно не было постов, потому что занимался написанием собственного движка для генерации PDF. Но об этом чуть позже. А сейчас...

На этой неделе мы выпустили «Тысячи пассажиров метро» — визуализацию пассажирских потоков станций Московского метро. Проект был для меня новым, потому что я был на нём и программистом, и верстальщиком и, как мне кажется, дизайнером. В результате получилась крутая наглядная схема с инфографикой по линиям метро.

Поэтому решил рассказать, как она создавалась (и как её можно использовать?).

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

В посте: подробный рассказ, видео и ссылки на результат.

https://adobescript.ru/project/moscow-metro-thousands