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

Пізніше Ctrl + ↑

Що послухати: Циферблат

Бачив новину, що у 2022 році на стрімінгових платформах:

  • 38 мільйонів треків не мали жодного прослуховування (24% від всього каталогу);
  • 67,1 мільйона треків набрали від одного до десяти прослуховувань (42% від каталогу).

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

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

Циферблат — Земля

Взагалі не знаю, хто цей хлопець і здається він з’явився у тому році. Випадково наткнувся у Youtube Music, а потім ще знайшов кліп. По-перше, це звучить дуже приємно, що аж можна нафантазувати картинку. А по-друге, продакшн одразу на рівні.

Далі ще можна послухати треки «Вночі» та «Для чого ти прийшла».


Хвиля нових адресних покажчиків

Там у Києві Цифровому знову опитування по перейменуванню ряду вулиць. Коментувати його не бачу сенсу, все так само погано з донесенням інформації, як і в перші рази. Зараз про інше. Разом із масовим перейменуванням вулиць також постає питання і безпосередньо вигляду покажчиків, бо якщо вже все міняти, то на щось добре. Саме так і у 2015 році почався проєкт у Києві, потім у Дніпрі. Масовим тоді це явище не стало, на жаль.

І от нова хвиля перейменувань підштовхує нові міста щось робити з дизайном табличок. Але, на мій погляд, усі йдуть найлегшим шляхом — копіюються рішення одного з міст, найчастіше Києва чи Дніпра, оскільки правила в них написані найбільш повно.

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

Рівне

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

Але ми доволі гарно поспілкувались і я цілих 38 хвилин розповідав багато про наш досвід і що ми враховували, а також що думаю про нові таблички Рівного. Ось повне інтерв’ю, можна просто слухати (монтувати не було можливості тож просто поділюсь кому цікаво):

Кропивницький

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

Дизайн табличок розробляли представники Подільської та Фортечної районних рад Кропивницького.

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

Суми

Або от Суми, разом з сумнівним голосуванням на сайті за один з варіантів. На момент за 1 день до закінчення терміну було зібрано 259 голосів. Чи така кількість людей бути репрезентативною вибіркою лишимо без коментарів.

Щодо самого дизайну: зі шрифтом e-Ukraine ще зрозумів варіант, але не міг зрозуміти, звідки той шрифт на другому варіанті. Потім знайшов, що це з брендбука, який так і не прижився в місті. Але якщо б і грати з брендом, на мою думку то можна було сміливіше це робити, наприклад, так:

Плитка з регулюванням відстані / пропуском води

Норвезька студія Snøhetta придумали цікаве інженерне рішення для плитки, яке дозволяє варіювати проміжок між верхніми поверхнями.

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

  • нижня з фіксованим розміром, яка і фіксується між собою;
    - верхня з трьома видами розмірів, яка й регулює рівень пропуску води.

Та і взагалі це доволі красиво виглядає.

Автоматизація дизайну з ChatGPT. Частина 2: скрипти для InDesign, Figma, Google Docs, Automator

Продовжую експерименти написання простих скриптів з допомогою ChatGPT. Тут перша частина зі скриптами для Adobe Illustrator.

1. Заміна шрифтів у InDesign

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

Тож спочатку я спробував подібними до попередніх запитами згенерувати скрипт. Але з 5-6 спроб робочого коду не вийшло. Тому далі я знайшов у спільноті Адоб шматок коду схожий на те, що мені треба.

Але для його використання для різних накреслень і шрифтів не вистачало масиву значень на початку та циклу його виконання. Тому я скопіював код і попросив ChatGPT додати мені ці модулі. І за кілька уточнень вийшло робоче рішення.

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

Створення скрипту заміни шрифту в InDesign

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

  • Версія, яка заміняє усі шрифти у всіх фреймах;
  • Версія, яка заміняє шрифт лише у виділеному тексті;
  • Версія, заміняє шрифт або у виділених фреймах, або в усіх;
  • Версія з двома вікнами введення назви старого і нового шрифтів;
  • Версія з одним вікном, в якому можна ввести кілька шрифтів.

1.2. Заміна стилів у InDesign

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

Скрипт для InDesign, який заміняє один стиль на інший

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

2. Збереження Google Docs у тій самій теці на Драйві

У мене є потреба періодично зберігати поруч з Гугл Документом також і PDF, який я потім можу відправити. При збереженні через меню документів сам документ у мене завантажується у Downloads, як і решта файлів. Але потім мені потрібно знову завантажувати PDF у ту саму теку на драйв. Не складно, але це витрата часу.

Шукав приклади скриптів, які  б могли зберігати PDF у ту саму теку, але робочих не знайшов. І от попросив ChatGPT запропонувати мені такий скрипт. І з першого разу отримав робочий варіант:

function onOpen() {
  var ui = DocumentApp.getUi();
  ui.createAddonMenu()
      .addItem(’Convert to PDF’, ’convertDocToPDF’)
      .addToUi();
}

function convertDocToPDF() {
  var docFile = DocumentApp.getActiveDocument().getId();
  var doc = DriveApp.getFileById(docFile);
  var pdfFile = DriveApp.createFile(doc.getAs(’application/pdf’)).setName(doc.getName() + «.pdf»);
  var parentFolder = doc.getParents().next();
  pdfFile.makeCopy(parentFolder);
  pdfFile.setTrashed(true);
}

Також ChatGPT описав інструкцію, як цей скрипт опублікувати, щоб він працював не тільки у конкретному документі, але це виявилось не так просто, як зробити скрипт 😅.

3. Транслітерація тексту в Figma

Колись для транслітерації назв зробили разом з програмістами простий сайт з простим JS, якій заміняв літери на інші за певними правилами. Потім з цього створили скрипти для AI та ID. А потім я стикнувся з такою з задачею у Фігмі, але робочих рішень не знайшов. Щось покрутив, але кинув, бо моїх знань було недостатньо.

І от спробував згодувати цю задачу ChatGPT. Взяв увесь наявний скрипт, як приклад, і попросив придумати, як з цього скрипту зробити скрипт для Фігми. Спочатку запропонований код транслітерував всі тексти на сторінці. Через уточнення він це робив для виділеного тексту, а якщо не виділений, то вже для всього.

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

Код транслітерації для Фігми від ChatGPT

4. Створення регулярних виразів для GREP / RegEx

Про грепи (або регулярні вирази, або regex) розповідав у лекції і все хотів написати детальну статтю зі всіма посиланнями, які назбирав, але все не знаходив час. GREP дуже потужна штука, але в неї був дуже високий поріг входу, щоб розуміти як будувати потрібні правильні вирази.

І от тепер з ChatGPT цей поріг можна вважати зниженим, бо він дуже гарно конструює навіть складні вирази.

Наприклад, давайте в Індизайні після всіх прийменників додамо нерозривні пробіли у всьому тексті через GREP-стилі. Для цього потрібно знайти у тексті всі прийменники. Тож створюємо стиль для символів без перенесень (no break) та питаємо у ChatGPT список всіх прийменників у вигляді регулярного виразу.

Він розуміє українську і віддає згенерований вираз вже у потрібній формі. Єдине що цей regex не зовсім підійде у Індизайн, тому уточнюємо що це має бути саме GREP для Індизайну і отримуємо робочий запит.

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

Приклади різних регулярних виразів

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

GREP заміни кириличних лапок латинськими

5.1 Зібрати відео зі скріншотів (з використанням ffmpeg)

Також в лекції згадував, що також у автоматизації дуже допомагають різні консольні команди (cli, command line interface), які заточені на певні дії. З ними така сама ситуація — щоб ними користуватись, потрібно розбиратись в прикладах та документації, що теж техно-орієнтованість.

Тому тут можна теж ChatGPT використовувати, як посередника для пошуку потрібної команди з потрібними параметрами. Наприклад, маємо купу скріншотів зроблених автоматично з різницею у 4-5 секунд, з яких хочемо зробити скрінкаст.

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

ffmpeg -framerate 30 -pattern_type glob -i ’/path/to/folder/*.jpg’ -c:v libx264 -pix_fmt yuv420p /path/to/output.mp4

Таким чином не потрібні ніякі додаткові програми, для створення відео з картинок: за допомогою Автоматора робимо скріншоти, а через ffmpeg отримуємо відео.

Збір відео з окремих картинок

5.2 Компресія відео (з використанням ffmpeg)

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

Раніше я шукав налаштування команд на Stackoverflow, а зараз швидше спитати у ChatGPT. Приклади запитів.

Компресія відео з ffmpeg

6. Зміна в наявному скрипті для Автоматора (Apple Script)

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

Зараз Дропбокс змінив і виходить старий скрипт некоректно працює. Йти шукати у документації до AppleScript як змінити шлях було б довго. Тому скопіював наявний скрипт і попросив замінити шлях збереження скріншотів у теку /Desktop.

7. Збереження в TIFF у Adobe Illustrator

Ще попросив зробити скрипт для швидкого збереження артборду у TIFF з заданим DPI. Отримав отакий варіант, який видавав помилку. Знайшов у спільноті Адоба відповідь зі схожою частиною, та побачив що один з параметрів замість IBM має називатись IBMPC, замінив, запрацювало. Тобто весь скрипт робочий, але помилка була в одному з параметрів. Завантажити скрипт.

Збереження артбоду в TIFF 300dpi

8. OSM Overpass Query

Деякі системи хоч і доступні всім, але поріг входу в них занадто високий. Але ChatGPT і тут зможе допомогти його подолати.

У OpenStreetMap (карта/база даних, які відкриті для всіх) зберігається величезна база геоданих, доступ до яких не суперпростий. І в OSM є мова запитів Overpass, яка дозволяє вивантажувати / запитувати якусь певну частину тих даних. Так от Overpass супер-неінтуітивна мова, і тут Chat GPT допомагає перекласти запит з людської на машинну.

P.S.

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

Тепер спробую модель Codex (Github Copilot), яка створювалась як раз для написання коду, а також GPT4. Напишу потім, що з цього вийшло.

Також хотів проілюструвати цю думку згенерувавши картинку людини з ще оною механізованою рукою, накшталт, технодесандників з Вархаммеру, але з 20 спроб у Midjourney v4 мого задуму не вийшло ¯\_(ツ)_/¯


?

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


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

ChatGPT як помічник з автоматизації

Знайшов для себе цікавий кейс застосування ChatGPT — створення простих скриптів для Ілюстратора.

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

Так от, нейромережа може допомогти створювати прості скрипти (до об’ємних вони поки не доросли).

ChatGPT → JSX → Adobe Illustrator

Наприклад, є задача: маємо купу інфографіки для звіту двома мовами. І в усіх картинках треба поміняти шрифт на інший та замінити кому на крапку у числах (45,5% → 45.5%).

У картинках використовуються різні накреслення, тож просто все виділити і поміняти не підходить. Треба йти в Find/Replace font і там вручну задавати зміну кожного накреслення. Довго. Те саме заміною символів: Find and Replace, ввести символи, замінити, підтвердити. Довго.

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

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

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

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

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

Відповіді ChatGPT

Ось вам приклад цього скрипта, який я частково докрутив: https://www.dropbox.com/s/5c26qlafyo225sq/Font%20Replacer.jsx?dl=0


На початку у масиві вказуються назви старого і нового шрифтів та їхні накреслення. Також можна вказати декілька змін для різних шрифтів і накреслень.

{
«oldFontName» : «Daikon»,  // Назва старого шрифта
«oldFontWeight» : «Bold»,  // Накреслення старого шрифта
«newFontName» : «DM Sans», // Назва нового шрифта
«newFontWeight» : «Bold»   // Накреслення нового шрифта
},

Не обов’язково треба вивчати кодування для програм Адоб, буде достатньо розуміння, що ви хочете отримати в результаті. Чим простіша і точкова задача, тим буде простіше поставити питання нейромережі й отримати більш-менш робоче рішення. 

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

Цікаво, як з такою задачею впрорається анонсований вчора GPT-4. Уявіть плагін, який би працював безпосередньо в Ілюстраторі, в який можна написати задачу і він видаватиме робочий скрипт, який можна запускати одразу у редакторі.

Раніше Ctrl + ↓