итоги дня

👆👆👆 Поавтоматизировал дизайн для крутой команды. Скоро подробно расскажу про эту работу, а пока фоточки с презентации 😎

Там в посте много фоточек. Это я неправильно репост сделал — только одну фотографию выбрал :(

Хвостики

Разбираюсь с шрифтом, где межбуквенное расстояние разрывает слияние у некоторых пар символов. Приходится «смещать края» у них.

Не мог не поделиться процессом.

👇 Генерю пасспотоки станций Московского метро в Иллюстраторе

«Тысячи пассажиров метро», 1 квартал 2023 год

Большое обновление тысяч Московского метро: замкнутая БКЛ и статистика по её станциям. Большую кольцевую пришлось рисовать самому, поэтому сделал всю схему совсем по-своему. Как вам? Пишите в комментариях!

Схема в высоком качестве и в пдф — в комментариях.

Лайк, репост — приветствуются!

И на сайте теперь лежат рядом все схемы, можно скачивать и сравнивать: https://metrostat.ru/ru/moscow

ps: обещанное большое обновление сайта получается настолько большое, что произойдёт позже 😎

Генератор адресных табличек Екатеринбурга

Выложил рассказ о проекте для дизайн-кода Екатеринбурга, где надо было и соблюсти кучу правил из рекомендаций по дизайну, и сделать всё компактно.

Веб-генератор PDF-файлов, в котором 6 шаблонов:
— подбирает размер шрифта;
— проверяет правильность номера дома: длину, литеру, корпус, строение;
— размещает элементы по правилам дизайна;
— заполняет транслитерацию;
— использует правильное родовое слово с сокращением или без;
— делает 2 страницы в PDF-файле отдельно для названия улицы и номера дома;
— добавляет стрелки направо или налево;
— переносит длинные названия по словам или по расставленным правилам с помощью мягкого переноса «­»;
— показывает превью файла на красивом объёмном носителе нужного размера;
— конвертирует шрифт в кривые;
— добавляет в файл фон для примерки;
— генерит уникальное имя файла по всем параметрам таблички.

Распространите везде и приходите за генераторами дизайна — они в сотни раз ускоряют работу верстальщиков и исключают ошибки!

В этом веб-генераторе создаётся 2 страницы PDF-файла разного размера и они прозрачными png-файлами накладываются на нужные объёмные носители для предпросмотра. Рядом пишутся все размеры в миллиметрах.

То есть это не примерный дизайн на css+html в браузере, а настоящий вид будущего файла 😎

Скрипт для Иллюстратора: длина линии, периметр и площадь формы

Благодаря подписчикам поймал и поправил ошибку: не работало в некоторых версиях Иллюстратора. Теперь работает.

Сам скрипт и описание — на сайте.

Написал пост про создание генератора адресных табличек Екатеринбурга

Оценить работу, которую генератор моментально и без ошибок делает за дизайнера, можно по ссылке.

И важный момент: как поддерживать базу данных улиц? Ответ тоже есть в посте.

Элементы дизайна и барьеры


Проблема

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

Пока эти случаи были единичными, я локально, то есть в самом месте рисования, смещал объекты на возможное расстояние. Но когда ситуация усложнилась (несколько «границ» в разных направлениях), появилось слишком много повторений кода, но с похожими действиями.

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


Решение — новый модуль

Суть модуля простая: у документа, например pdf-файла, есть место, где возможно пересечение элементов. Я инициализирую модуль, передаю ему элементы дизайна (которые можно двигать), барьеры (которые нельзя двигать) и границы возможного смещения. Элементы дизайна, включая барьеры, не рисуются в этот момент, а как бы складываются в «память файла» — в кэш.

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

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

И после этой всей логики мы рисуем объекты «из кэша». Готово.


Перспектива

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

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