Про дизайн, міста та дизайн у містах, кодінг та автоматизацію

Пізніше Ctrl + ↑

Конвеєр: масштабування PDF-файлів за допомогою pdfscale

Іноді буває треба робити однакові макети у різних масштабах. Наприклад, якій знаки, що можуть зчитуватись зблизька і здалека. І можна під ці випадки робити окремі макети, але оновлювати весь цей парк знаків не зручно.

Краще мати якийсь один майстер-макет, як компонент у Фігмі, який можна розтягнути або зменшити до потрібного розміру. Для цього можна зробити основу в AI/ID, а масштабні копії робити в окремому ID, де макет буде вставлений лінком, і будуть налаштовані нові розміри. Потім це все діло можна експортувати у PDF вже у новому розмірі.

Але це знову зайві дії: оновити майстер-файл, відкрити копії, оновити лінки, експортувати, зберегти у потрібну теку. А якщо у вас в одному файлі ще й різні макети які потрібно нарізати, то взагалі жах.

Тому виходом може бути вже масштабування вже готових PDF-файлів, з одного розміру в різні. В принципі так працює експорт для екранів в Adobe Illustrator або ж у Фігмі, але це для екранів, а в тому ж Індизайні таких функцій взагалі немає.

Принцип масштабування

Скрипт pdfscale

Знайшов гарний bash-скрипт саме для масштабування PDF — pdfscale (для роботи він потребує встановлених gs, iamgemagick, xpdf, все написано у документації в розділі Dependencies). Сам скрипт можна встановити як команду у терміналі, наприклад, через wget

wget -q -O /tmp/pdfScale.sh 'https://raw.githubusercontent.com/tavinus/pdfScale/master/pdfScale.sh' && bash /tmp/pdfScale.sh --install

У документації детально розписані всі функції і є приклади. Тож скрипт дозволяє масштабувати та змінювати розміри PDF: має вбудовані друкарські розміри і можливість вказати свої довільні у різних видах величин.

Наприклад, можна макет розтягнути до 1500×1500 мм:

bash pdfScale.sh -r "custom mm 1500 1500" file.pdf newfile.pdf

де:

  • — r «custom mm 1500 1500» — ключ resize, довільний розмір, у mm, а далі ширина та висота.
  • file.pdf — вихідний файл
  • newfile.pdf — змінений файл

При цьому не важливо у якому розмірі оригінал, він масштабується пропорційно.

Все це можна упакувати у цикл, який буде змінювати розмір всіх pff-файлів у теці й одразу складати їх у іншу теку 1500:

#!/bin/bash

for i in *.pdf
do
	pdfScale -r "custom mm 1434 1500" $i 1500/$i
	echo "$i - Done"
done

Або ж те саме можна викликати одним рядком у Терміналі:

for i in *.pdf; pdfScale -r "custom mm 1434 1500" $i 1500/$i; echo "$i - Done"

Додаткове перейменування

Далі також всі змасштабовані файли можна перейменувати. наприклад, основні макети я мав у розмірі 660×690 мм і відповідно у самих файлах був написаний цей розмір. Для цього у скрипт додав рядок, з функцією rename, що заміняє у нових файлах текст «-660x690» на «-1434x150»:

rename 's/-660x690/-1434x1500/g' 1500/$i

Весь скрипт:

#!/bin/bash

for i in *.pdf
do
	pdfScale -r "custom mm 1434 1500" $i 1500/$i
	echo "$i - Done"
    rename 's/-660x690/-1434x1500/g' 1500/$i
done

Або для Термінала:

for i in *.pdf; pdfScale -r "custom mm 1434 1500" $i 1500/$i;rename 's/-660x690/-1434x1500/g' 1500/$i; echo "$i - Done"
Як працює скрипт

CMD-файл

І далі можна перетворити це на виконуваний command-файл, який можна просто запускати з теки.

Сам код:

#!/bin/bash

# Change directory to be where the command is.
cd "$(cd "$(dirname "$0")" > /dev/null && pwd)"

# Run commands
for i in *.pdf
do
	pdfScale -r "custom mm 1434 1500" $i 1500/$i
	rename 's/-660x690/-1434x1500/g' 1500/$i
	echo "$i - Done"
done

Завантажити pdfscale.command — приклад виконавчого файлу запуску скрипту. Розміри та назви тільки вкажіть свої.

А якщо потрібно зробити кілька розмірів, то можна скопіювати рядки pdfScale та rename і
вказати додаткові розміри.

Як це виглядає в роботі


Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: 4441114450427339 або через сайт.

Конвеєр: автоматизоване нарізання PDF на різні файли

В роботі над дизайном багатьох макетів буває дуже зручно їх всі робити в одному файлі: можна простіше копіювати елементи та стилі, мати єдину базу символів, бачити загальну картинку одразу на всіх макетах тощо.

Багато макетів різних розмірів у Adobe Illustrator

Але редактори погано пристосовані для збереження потім таких робочих файлів, що йтимуть на виробництво. Процес збереження купи файлів починає нагадувати нудну справу, в якій ви вибираєте що зберігати, якось розділяєте на окремі файли та при збереженні у різні формати правильно називаєте все. Така безглузда трата робочого часу і це нууудно 🥱. І в такій ручній роботі точно виникатимуть помилки, тож доведеться починати наново.

У ІнДизайні є можливість зберігати PDF посторінково. Але можливості обмежені й потім все одно треба перейменовувати файли, як треба. У Ілюстраторі взагалі така опція є тільки для збереження окремих артбордів для екранів (у RGB), тож для друку це не підходить. І вирішувати це можна сторонніми скриптами, як-то скрипт для збереження файлу у різні формати, який ми робили для своєї роботи.

Але це не вирішує задачу, коли у вас частина макетів двосторонні й ці різні сторони мають зберегтись, наприклад, в один PDF на кілька сторінок.

А якщо вже після збереження потрібно буде внести якісь зміни, то весь цей нудний процес треба робити спочатку і добре якщо не для всіх файлів.

Конвеєр та алгоритм

Мені цікаво шукати і організовувати дизайн-конвеєр під такі задачі, оскільки вони точно повторюватимуться, тож автоматизація дає шалену економію часу, який можна витратити на цікавіші речі.

Колись писав про масове перейменування файлів, які перед цим нарізав в Акробаті на окремі файли. Але це все одно довго, треба ще швидше.

Спочатку потрібно подумати над наявними можливостями й алгоритмом. Кожен редактор може за раз зберігати всі або діапазон сторінок у суцільний PDF-файл. Тож якщо мати інструкцію, яка скаже які сторінки мають піти в який файл і як ці файли назвати. Така інструкція — своєрідна «маска», яку можна застосувати для файлу.

1-2=filename01
3=filename02
4-5=filename03
6-8 10=filename04
…

де:

  • 1-2 — сторінки документа (може містити одну цифру, діапазон через дефіс, перелік окремих сторінок через пробіл, також доступні параметри початку і кінця документа start-10 чи 57-end )
  • = — технічний розділювач (у назвах файлах його не повинно бути)
  • filename01 — назва вашого майбутнього PDF-файлу, в який в який увійдуть сторінки з діапазону (без розширення .pdf)

bash + PDFtk

Для цього bash (потрібна версія 4 і вище, перевіряється у терміналі через bash -v, встановлюється через brew install bash) та PDF Toolkit (PDFtk).

За допомогою ChatGPT в кілька ітерацій зробив скрипт, що бере вказаний PDF-файл, окремо бере текстову «маску» у TXT, як масив назв, в яких

#!/bin/bash

input_file="Tustan-Signs-All.pdf"
data_file="range.txt"

# Read page ranges and custom names from the external file into a single array
readarray -t page_data < "$data_file"

# Loop through the array and split the PDF
for data in "${page_data[@]}"; do
    IFS="=" read -r range custom_name <<< "$data"
    output_file="${custom_name// /_}.pdf"  # Replace spaces with underscores in the custom name
    pdftk "$input_file" cat $range output "$output_file"
    echo "$output_file — Done"
done

Для більшої універсальності я виніс вказання файлів, як аргументів у командному рядку. Тож тепер можна скопіювати скрипт у потрібну теку та запустити командою:

bash splitter-pro.sh filename.pdf mask.txt

де:

  • filename.pdf — назва вашого PDF-файлу
  • mask.txt — текстовий файл з «маскою»

Сам скрипт виглядає так ($1 — перший аргумент, тобто PDF-файл; $2 — другий аргумент, тобто TXT-файл):

#!/bin/bash

input_file=$1
data_file=$2

# Read page ranges and custom names from the external file into a single array. Requaire bash 4.0
readarray -t page_data < "$data_file"

# Loop through the array and split the PDF
for data in "${page_data[@]}"; do
    IFS="=" read -r range custom_name <<< "$data"
    output_file="${custom_name// /_}.pdf"  # Replace spaces with underscores in the custom name
    pdftk "$input_file" cat $range output "$output_file"
    echo "$output_file — Done"
done

Приклад «маски», де спочатку номери сторінок, символ =, а далі назва файла (Проект-Знак-Точка-Розмір):

1-2=Tustan-WF-Sign-Т1-400x600
3=Tustan-WF-Sign-Т2.1-200x350
4=Tustan-WF-Sign-Т2.2-200x350
5=Tustan-WF-Sign-Т3.1-200x350
6=Tustan-WF-Sign-Т3.2-200x350
7-8=Tustan-WF-Sign-Т4.1-T4.2-200x600
9-10=Tustan-WF-Sign-Т4.3-T4.4-200x600
11=Tustan-WF-Sign-Т5.1-200x600
12=Tustan-WF-Sign-Т5.2-200x600
13=Tustan-WF-Sign-Т6.1-200x600
14=Tustan-WF-Sign-Т6.2-200x600
15=Tustan-WF-Sign-Т7.1-200x600
16=Tustan-WF-Sign-Т7.2-200x600
17=Tustan-WF-Sign-Т8.1-200x600
18=Tustan-WF-Sign-Т8.2-200x600
19=Tustan-WF-Sign-Т9.1-200x600
20=Tustan-WF-Sign-Т9.2-200x600
21=Tustan-WF-Sign-Т9.3-200x600
22-23=Tustan-WF-Sign-Т10-200x600
…

Весь процес виглядає ось так:

Розділення PDF-файлу по «масці»

Також можна цей підхід використовувати для нарізання макетів по одному і одразу з правильним перейменуванням файлів. Колись робив скрипт для перейменування пачки файлів, але тепер можна цей крок пропустити й робити все швидше.

Розділення на файли по одній сторінці

Нюанси

№1. Порядок артбордів/сторінок у файлі має завжди зберігатись і співпадає з «маскою». Тож при зміні порядку, треба міняти й маску.

№2. При збереженні PDF з Ілюстратора рекомендую прибирати прапорець Preserve Illustrator Editing Capabilities. Так при розділенні PDF у файлі не буде нічого, що було поза потрібного артборду. Якщо ж цей прапорець увімкнутий, то навіть якщо ви бачитиме у прев’ю лише один артборд, все одно при відкритті файлу в Ілюстраторі в ньому будуть всі артборди й об’єкти, що були в оригінальному AI-файлі.

Налаштування при збереженні PDF

№3. Як і з будь-якою автоматизацією її треба уважно перевірити, коли створюєте. Наприклад, можна помилково вказати не ті сторінки в «масці» і файл нарізатиметься неправильно.

Бонус №1: запуск скрипку одразу в теці

Щоб ще прискорити процес і навіть не запускати консоль, то можна зібрати виконавчий файл .command, який запускатиме все в наявній теці.


#!/bin/bash

# Change directory to be where the command is.
cd "$(cd "$(dirname "$0")" > /dev/null && pwd)"

# Run script with arguments
bash pdf-splitter.sh metromap_tram_v1.12.pdf Metromap-Tram-Range.txt

Єдина маніпуляція, яку треба зробити — дати системі права на виконання скрипту в нашій теці:

chmod u+x splitter.command

Таким чином у теку копіюються сам bash-скрипт, маска .txt, вхідний .pdf та у command файлі замінюються значення. Тепер просто зберігаєте PDF, запускайте файл, п’єте каву ☕️, готово.

Скрипт упакований у виконавчий файл

Бонус №2: артборди в AI → «маска»

Якщо ви називали артборди в Ілюстраторі так, як би ви хотіли мати готові файли, то можна теж це використати і скриптом вже в самому AI зберегти всі назви артбордів, як «маску» у текстовому файлі. Знову ChatGPT запропонував доволі простий скрипт, що робить на робочому столі готовий txt-файл з маскою.

Робота скрипта

Трохи допиляв, що він робив одразу потрібний вигляд:

// Function to export artboard names to a text file
function exportArtboardNames() {
    var doc = app.activeDocument;
    var artboards = doc.artboards;
    var file = new File("~/Desktop/artboard_names.txt");
    file.open("w");

    for (var i = 0; i < artboards.length; i++) {
        var artboard = artboards[i];
        var artboardName = artboard.name;
        file.writeln("" + (i + 1) + "=" + artboardName);
    }

    file.close();
    alert("Artboard names exported to ~/Desktop/artboard_names.txt");
}

// Run the exportArtboardNames function
exportArtboardNames();

Напевно було б можна написати скрипт саме для Ілюстратора, який би з «маскою» зберігав певні артборди, але всі подібні скрипти в Adobe Illustrator працюють доволі повільно. Тому найшвидше створювати конвеєр іншими інструментами.

Бонус №3: зробити зі скрипта окрему cli-програму (Mac OS)

Копіювати скрипт у кожну теку не зручно, тож можна піти далі і зробити з цього скрипта cli-програму, яку можна буде викликати просто у певній теці одразу з терміналу (описав як зробити це у Mac OS, але думаю у Windows це так само можливо; якщо хтось напише як це зробити, то додам у статтю).

Для цього модифікуємо спочатку сам скрипт. У першому рядку міняємо шлях до bash:

#!/usr/local/bin/bash

input_file=$1
data_file=$2

# Read page ranges and custom names from the external file into a single array. Requaire bash 4.0
readarray -t page_data < "$data_file"

# Loop through the array and split the PDF
for data in "${page_data[@]}"; do
    IFS="=" read -r range custom_name <<< "$data"
    output_file="${custom_name// /_}.pdf"  # Replace spaces with underscores in the custom name
    pdftk "$input_file" cat $range output "$output_file"
    echo "$output_file — Done"
done

Потім краще прибрати розширення і назвати файл так, як ви будете викликати команду. У моєму випадку — pdfsplitter.

Далі скопіювати файл у директорію /usr/local/bin, можна одразу в терміналі:

sudo cp pdfsplitter /usr/local/bin

Тепер можна у терміналі викликати нашу команду. Якщо ж при цьому буде відображатись помилка доступу, на кшталт, «zsh: permission denied: pdfsplitter», то треба дати системі дозвіл використати нашу програму. Наприклад, командою:

chmod 755 /usr/local/bin/pdfsplitter

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

Скрипт, як cli-програма



Завантажити скрипти:

  • pdf-splitter.sh — розділювач PDF
  • artboard-names-to-file.jsx — назви артбордів AI у TXT файл
  • splitter.command — приклад виконавчого файлу запуску скрипта; має розміщуватись в одній теці з маскою та pdf-splitter.sh.


Якщо вам було цікаво та корисно, можете пригостити мене кавою ☕️: картка Монобанку: 4441114450427339 або через сайт.

Заклеєні навігаційні стели

Пост з фб.

Шановні кияни та гості столиці! Нам плювати на вас з високої дзвіниці, приходьте після перемоги.
Приблизно так виглядає відношення до людей у багатьох питаннях. Наприклад, навігаційні стели, які рік простояли зафарбовані, ніхто їх не мив, а зараз їх взагалі заклеїли повністю плівкою. Навіть стели на Львівській площі, на які ми зібрали гроші донатами і поставили без жодної бюджетної копійки (лише передали на баланс Київзеленбуду).

Заклеєні стели

При тому, що стели 2018-2020 років зроблені спеціально по технології, яка дозволяє відмивати поверхню від фарби за допомогою антисилікону.

Відмита частина стели на Львівській площі

Також все написано російським шрифтом Arkhip, в описі якого написано про «шрифт з російською душею, зроблений в ссср».

Російський шрифт Arkhip

На емоціях родився мем:

До чого веде таке байдуже відношення міста: всі інші теж перестають сприймати ту ж навігацію, як елементи простору, і думають, що якщо вже замальовано, то можна і зверху наклеїти свою рекламу. Культурний центр ось не дуже культурно заклеїв рекламою одну стелу. Хоча це вандалізм.

UPD

Зустрівся з командою Управління туризму. Досить адекватна команда, обговорили проблеми й можливі рішення. Сказали, що є «заборона зверху» на розміщення карт, вони не можуть навіть просто надрукувати такі ж макети та поклеїти, якщо не можна відчистити.

Спробую долучитись до нарад з цього приводу і переконати у зворотному. Якщо у кого є які аргументи і реальні кейси, коли потрібна навігація по місту, то пишіть теж.

Також є проблема з коштами, які на туризм не виділяють майже і навіть намагаються урізати. Планують комплексно оновлювати і стратегію і все інше скоріше після перемоги. Запропонував розробити і затвердити на рівні міста якийсь стандарт, коли до цього дійде.

За російський шрифт не знали, хтось робив макети безкоштовно ¯\_(ツ)_/¯. Провів роз’яснювальну роботу, погодились, що треба на це звертати увагу і краще звертатись до українських шрифтів і їхніх авторів.

Схема у «крюківські» вагони 81-7021/7022

У поїздах Крюківського заводу серії 81-7021/7022, що їздять зеленою гілкою, є особливість — великі вікна і майже немає стінок. Тому постало питання, де розмішувати схему.

Інтер’єр вагона 81-7021

Було кілька варіантів:

1. Берлінський варіант — на стелі. Але це аж занадто незвичний варіант, крім того, що стеля перфорована.

Схема метро Берліна на стелі вагона

2. На стійці біля кожної двері. Ширина стійки там 27-28 см, тож схему довелось би стиснути втричі. Мінус — занадто дрібний текст, плюс — однаковий макет всюди. З нюансів: на частині стійок розміщені стоп-крани та переговорні пристрої.

Зона дверей у вагоні

3. Розмістити схемі на склі. Тут є дві варіації — а) непрозора схема з білим тлом, б) прозора схема на матовій плівці. Варіант а — найпростіший по дизайну, бо використовується той самий макет, але має вагомий мінус — заклеєне скло. Оскільки скло існує для того, щоб в нього дивитись, і щоб не перетворюватись на всюдисущу рекламу, яка у метро тоді закривала купу вікон. У варіанту б з плюсів більш красивий вигляд, але з мінусів — додався новий вид схеми, яка потребувала адаптації.

Думали між варіантами 2 та 3, але зупинились в решті решт на 3б — прозора схема на склі.

Схема попередніх версій на склі

Технічні особливості прозорих схем

1. Адаптовані кольори. Весь чорний текст мав стати контрастним — білим, що на тлі темних тунелів би гарно читався, а також інші кольори відкориговані для кращої видимості на темному тлі, з більшим контрастом. Схоже на розробку темної теми інтерфейсу.

2. Шар білої фарби. Для гарного друку кольорів, щоб вони були яскравими, потрібно нанести знизу додатковий шар білої фарби, на яку вже накладатимуться кольори.

Білий шар фарби, що наноситься спочатку, та кольорова версія (для наглядності)

У макетів це потребує перенесення всіх елементів на окремий шар. При чому, щоб при друці уникнути видимого зсуву фарби, у білому шарі треба зробити відступ (offset) на долі міліметра всередину форми. Інакше якщо буде зсув, то може виникнути білий край з одного боку (біла фарба проглядатиметься).

Але окрім складнощів, цей підхід має плюс — з’являється можливість використати додатковий візуальний шар. Наприклад, у річки свідомо не зроблена біла підкладка. Таким чином фарба лягає напряму на плівку і просвічує (як ефект накладання Multiply). Це додає ефекту води та додатково відносить річку на задній план. Так само, наприклад, напівпрозорі ділянки ліній, що проходять під текстом.

Річка надрукована без білої фарби

Також ще можна підібрати вид самої плівки: або зовсім прозору, або матову, яка розмиватиме тло.

Зразки різних плівок: ліворуч внизу прозора, інші дві матові. Тест на просвічування на вікні.

~
Тож оновлювати потрібно дві версії схеми — світлу і темну — і в підсумку маємо схеми однакових розмірів, достатньо читабельний з відстані. Але це потребує додаткової роботи дизайнера.

Рекомендації Кабміну по доступності сприйняття інформації

Громадське: Уряд рекомендує держорганам подавати інформацію для громадян спрощеною мовою.

Що входить до урядових рекомендацій:

  • Структура урядового повідомлення має бути простою, логічною, послідовною та однозначною. А речення повинні містити одну ідею, кажуть у Міністерстві культури. Важливу інформацію треба розміщувати на початку документа, виділяючи жирним шрифтом або рамкою.
  • Слід уникати абревіатур, професійної лексики та скорочень. Також не варто розміщувати текст на зображеннях і використовувати шрифти із засічками. Складними для сприйняття будуть і кілька посилань в одному рядку. Процес читання полегшить контраст між текстом і його тлом, йдеться в рекомендаціях.


Сталося зрушення і на державному рівні підіймається питання подання інформації зрозуміло і доступно. Хоч і аргументується це лише доступністю для людей з інвалідністю. Але хоч так, може буде позитивний крок.

І, думаю, це займе досить багато часу, бо чиновники більше оперують і мислять як раз формально-правильною мовою законів-актів-документів. Може це стане ще додатковою професією перекладання з формального у людське (а може це навіть робитиме нейромережа 🙂 ).


Ось безпосередньо саме розпорядження Кабміну від 17 листопада 2023 р. № 1046-р з описаними рекомендаціями.

Рекомендації з розпорядження

У документі дві частини — про спрощену мову і про формат подання (контраст, кольори тощо). Хочеться відмітити, що більшість з рекомендацій дуже адекватні і хочеться потиснути руку, що такий документ нарешті з’явився на офіційному рівні.

Авжеж є деякі спірні пункти, як от світлий текст на темному фоні має бути на 25% більшим (чого? чому саме 25?). Або деякі тези явно потребують прикладів і пояснень, бо формулювання більш загальне.

Також про ці рекомендації написали колеги з Bot&Partners та спільноти Drafters та порівняли з подібними документами США.

До речі, про контраст і доступність писав у блозі.


У багатьох на слуху концепт Ільяхова «пиши, скорочуй», який є гарним простим прикладом пропаганди нового підходу. Але не достатньо просто скоротити щось у тексті.

Головне у зрозумілій доступній комунікації — емпатія до читачів, повага до них та їхньої гідності. Треба думати з точки зору допомоги кожній людині, хто б вона не була: хоч молода людина, хоч стара, хоч з ментальною інвалідністю, хоч без. Бо насправді кожна людина може перебувати в різних станах і по-різному сприймати будь-яку комунікацію.

Якщо ви захворієте, то вже важче щось сприйматимете. Або якщо у вас просто був важкий день/тиждень, то ви будете втомлені і не такі уважні чи сконцентровані.

Наприклад, працівники та керівники Служби руху метрополітену взагалі не розуміють потреби пасажирів і не завжди спокійно говорять «там все написано, а люди не читають». Таким чином знімають з себе і перекладають на людей відповідальність, що вони не можуть що знайти. Хоча знак може висіти не там, де треба, і на ньому може бути написано не те, що треба. І навіть думки немає допомогти цим «невдячним» пасажирам.

Раніше Ctrl + ↓