Автоматизация дизайнерской работы
«Дизайн нейросетями» и попытки воссоздать при помощи машинного обучения работу человеческого мозга сейчас в тренде, но многие дизайнеры не освоили еще предыдущий уровень коллаборации человека с машиной:
- Человек делает работу за машину: сортирует файлики вручную, считает в уме, повторяет шаблонные монотонные операции и совершает прочую работу, с которой машина вообще-то справляется лучше.
- Машины делают то, что могут сделать лучше человека, человек делает остальное (творчество, аналитика, принятие решений).
- Машины делают работу за людей: воссоздают процесс творчества, обучения и т.д.
Получается странная ситуация:
Пытаясь научить машину действовать как человек и делать работу за человека, люди не замечают, что человек до сих вынужден действовать как машина и делать работу за машину.
В данном случае я говорю про дизайнерскую рутину, весь этот быт в графических редакторах: действия с мелкой моторикой, конвейерная работа, утомляющие повторения одних и тех же действий.
Если кто-то не осознает, насколько его повседневность состоит из прицеливания курсором в маленькие интерфейсные элементы, может установить себе программку IOGraphica, визуализирующую все перемещения курсора и клики за день.
А если вспомнить закон Фиттса и всю эти интерфейсные семечки программ, то не стоит удивляться, что обычный дизайнер тратит большой (если не «больший») запас концентрации на попадание в кнопочки интерфейсов, чем на проектирование смыслов. Хочется верить, что дизайнера не за это держат на работе, и хочется верить, что дизайнер не для этого ходит на работу. Поэтому цель автоматизации дизайнерской рутины проста: больше дизайна, меньше пробега у курсора.
Заумная теория
Концептуально есть несколько способов для достижения этой цели:
- Замена «тяжелого» действия на «легкое».
Пример: вместо прицеливания курсором в кнопку «Ок» диалогового окна (тяжело) жать на пробел на клавиатуре (легче).
2. Замена одновременного совершения нескольких действий на одно.
Пример: поменять хоткеи, чтобы раскладка клавиатуры переключалась при нажатии на одну клавишу (например, капслок).
3. Замена последовательности неизменных действий в одно действие, их включающее.
Пример: в текстовых редакторах использовать кнопку «Сбросить стиль текста» вместо того, чтобы последовательно менять цвет, шрифт, кегль.
4. Замена последовательности действий, совершающихся по четко определенным правилам, на программу, который выполняет этот алгоритм за человека.
Пример: сортировка файлов по имени вместо ручного раскладывания по порядку.
5. То же самое, что предыдущий пункт, но только когда шаги алгоритма определены нечетко.
Пример: сложить все фотографии с изображением кота в альбом «кот».
Важно понимать, что у каждого из перечисленных пунктов есть своя стоимость внедрения и приносимая польза. Пользу еще можно разбить на несколько параметров:
— Выигрыш в скорости: сколько времени сэкономили;
— Уровень снижения фрустрации: сколько страданий дизайнера сократили;
— Общеприменимость/масштабируемость: насколько решение узкоспециализировано, есть ли у него применение за пределами текущей задачи.
Соотношение всех этих параметров определяет окупаемость автоматизации, то есть отвечает на вопрос, стоит ли вообще игра свеч.
Поэтому последний пункт списка (то самое машинное обучение, нейросети, генетические алгоритмы и всё такое) пока внедряется скорее как инвестиции в будущее, так как решения пока еще сильно узкоспециализированные и ресурсоемкие для задач небольшого тиража. И поэтому такой популярный лозунг «Всё, что умеет делать машина, должна делать машина» прагматично дополнить уточнением: «Всё, что машина умеет делать лучше человека за ту же стоимость, должна делать машина».
Обычно зависимость такая: чем больше выигрыш в скорости, тем сложнее внедрение и меньше общеприменимость. Это логично: узкоспециализированные решения эффективней.
Итак, способы автоматизации:
Хоткеи
Банально, но очень полезно. Правило простое: если собираешься сделать действие за пределами рабочего полотна, то это можно заменить на хоткеи. Изучите существующие горячие клавиши, назначьте удобные сочетания для частоиспользуемых действий. Не стесняйтесь менять стандартные хоткеи, чтобы похожие действия в разных программах совершались по единому сочетанию клавиш.
Полезная ссылка: универсальная программка-шпоргалка хоткеев любой программы CheatSheet.
Плагины
Плагины — это как джейлбрейк для айфонов: накручиваешь себе на программу дополнительный функционал от сторонних разработчиков, а потом «большой папа» смотрит, что есть интересного среди плагинов и реализует этот функционал в следующей версии программы, так что необходимость в этом плагине отпадает.
Я котирую VectorScribe и DirectPrefs от компании Astute Graphics, хотя есть десятки разных плагинов как от этих ребят, так и многих других разработчиков, больших и малых, альтруистичных гиков и солидных коммерческих фирм.
Экшены
Это про схлопывание последовательности действий в одно. Как работает, думаю, все знаете — записываете последовательность действий в команду, которую потом можно запустить в один клик или даже с хоткея. Можно скормить экшену целую папку по принципу «открой по очереди каждый файл отсюда, проделай эти операции и сохрани обратно».
Благодаря доступности и понятному принципу «повторяй за мной» экшены может создавать кто угодно, есть куча всяких сайтов с коллекциями экшенов, сообщества, документации и т.д. За эту легкость приходится расплачиваться некоторой «тупизной» экшенов, связанной с разными возможными трактовками записываемых действий. Программа пытается угадать: ты сейчас выбрал следующий по порядку слой, слой по имени layer_2 или просто ткнул в определенную точку экрана? Какое из этих действий повторять при запуске экшена? Чтобы избежать подобных мучений, я стараюсь записывать экшены при помощи хоткеев, а не действий курсором.
Скрипты
Ради них, в общем, и писался этот текст. В основных приложениях адоба (Илюстратор, Фш, ИнДиз, Афтер) реализована возможность использовать скрипты, написанные на языках AppleScript (под макосью), VBScript (под виндой) и JavaScript (везде). Я практиковал только js-скрипты для Иллюстратора и Индизайна, поэтому авторитетно могу только об этих комбинациях рассказывать. О всех вариантах подробно рассказано на специальном разделе сайта адоба.
По сути речь идет об управление программой через код. Жмешь в иллюстраторе File → Scripts → Other Script…, выбираешь js-файл, и начинается исполнение заложенных в него команд, которые не ограничены практически ничем: можно манипулировать любыми объектами, текстовыми полями, слоями, свотчами, стилями, двигать точки у кривых, при открытии программы автоматически менять воркспейс в зависимости от времени суток и лунного календаря, закрывать и открывать файлы, открывать страницы в браузерах, отправлять файл на печать, считывать файлы с компьютера и интернета и писать файлы с результатом обратно на диск. Список объектов, свойств и методов, которыми можно вертеть, например, в Иллюстраторе, перечислен в официальной пдфке.
За неограниченность возможностей, конечно, придется расплачиваться относительно высоким входным порогом: да, это программирование, поэтому для погружения в этот мир надо хотя бы не бояться открытого в текстовом редакторе кода, преодолеть стадию «ой, тут какие-то цветные буковки непонятные и закорючки». Но рабочий и полезный скрипт может занимать и две строчки кода, и в целом для написания скриптов достаточно владеть уровнем «писал на jquery всякие эффектики себе на домашнюю страничку». Хотя скрипт для обработки карт для московского метро у меня занял уже четыре тысячи строчек кода.
Понятное дело, что разработка любого скрипта требует куда больше времени, чем настройка экшенов или хоткеев. Эта относительно высокая цена ограничивает сферу применения скриптов несколькими случаями:
1. Огромный тираж. Ну типа пять тысяч файлов, в которых надо сделать одно и то же действие. Например, те же карты для метро: любая простейшая операция вроде «поменять прозрачность у плашки» превращается в сложновыполнимую, когда речь идет о 200 станциях метро, у каждой из которых может быть до 12 карт.
2. Регулярное повторение однотипных операций над одним файлом. Например, работаешь над транспортной схемой и постоянно приходится выравнивать название станции относительно пенька. Действие специфическое и тупое, но регулярность действия оправдывает затраты на разработку скрипта для этого.
3. Разработка универсального скрипта с действиями, которые часто нужны в самых разных файлах вне зависимости от проекта. По сути это такой колхозный самописный плагин (колхозный, потому что настоящие плагины пишутся уже на солидном C++ и у них совершенно другой уровень доступа к программе). Например, скрипт, который типографит выделенное текстовое поле: добавляет неразрывные пробелы, кавычки елочками делает и т.д.
За пределами этих случаев писать скрипт обычно просто нерационально, так как временные затраты не окупаются. Ну как с формулами в экселях: при небольших объемах таблички проще подсчитать нужное свойство самому, чем сочинять формулу.
Ресурсы
У скриптописания, конечно же, есть свое комьюнити, сайты по интересам, самописные документации помимо официальной, уроки, видосы с гайдами на ютубе, раздел на форуме adobe, движ на стэковерфлоу и так далее. Это всё очень полезно, потому что даже официальная документация от адоба не упоминает все возможности скриптов. Например, скрипты также могут обладать своим интерфейсом: панелькой с чекбоксами, ползунками и прочими способами настройки функционала, и обучиться этой магии поможет только неофициальная документация вроде этой безумно-полезной пдфки.
Ну и еще парочка ссылок из гугла про скриптование:
— Онлайн-учебник: https://illustrator-scripting-guide.readthedocs.io/
— Обсуждение на русском: https://vk.com/topic-159903417_38752810
— Гайд по скриптованию Ai без привязки к языку (что как вообще, объектная модель иллюстратора и тд): https://www.adobe.com/content/dam/acom/en/devnet/illustrator/pdf/AI_ScriptGd_2017.pdf
Еще не менее прекрасная сторона существования этого движа: можно и не писать свои скрипты, а пользоваться сотнями, тысячами уже написанных другими ребятами. На гитхабе этих подборок просто дохерище. Первые три из выдачи гугла:
https://github.com/creold/illustrator-scripts
https://github.com/shspage/illustrator-scripts
https://github.com/nvkelso/illustrator-scripts
Или, например, подборка подборок скриптов: https://github.com/topics/illustrator-scripts
Ну и всякие статьи с перечнем крутых скриптов, например:
https://design.tutsplus.com/articles/20-free-and-useful-adobe-illustrator-scripts--vector-3849
Минус тут в том, что они попадают все только под категорию 3 из перечисленных выше кейсов использования скриптов, то есть это общие скрипты-плагины, и узкоспециализированную задачу под конкретный проект они никак не решат.
Примеры
Теперь немного примеров и бахвальства. Чтобы немного расшевелить фантазию, перечислю примерный функционал написанных мной скриптов:
— Скрипт, который объединяет выделенные текстовые поля в одно с сохранением порядка текста и стилей
— Скрипт, который при сохранении INDD-файла автоматически сохраняет рядом для совместимости IDML-версию.
— Скрипт, который при сохранении ai-файла для CC автоматически сохраняет рядом версию для CS6.
— Скрипт, обсчитывающий сеть дорог на плане территории и сохраняющий ее в виде json-файла для дальнейшего обсчета оптимальных маршрутов.
— Скрипт, наполняющий шаблон значениями из гугл.таблицы и выгружающий экземпляр в пдф с генерацией пнг-превьюшки (конвейер, генерящий подобные макеты на основе шаблона)
— Скрипт, проверяющий все названия станций на схеме метро на наличие опечаток при помощи сравнения с хранящимися в гугл.таблице идеалами + проверка на отсутствие лишних или пропущенных названий.
— Скрипт, удаляющий из файла весь русский/английский/китайский язык или меняющий их местами.
— Скрипт, меняющий весь текст в файле по таблице соответствия «что на что менять».
— Скрипт, считающий площадь выделенного объекта.
— Скрипт, выравнивающий названия станций метро относительно пеньков.
— Скрипт, выравнивающий подпись относительно иконки:
— Скрипт, вращающий карту по сторонами света в зависимости от положения конкретного носителя с последующим применением изометрической проекции и при этом сохранением всего текста в горизонтальном положении на закрепленных за ними местах:
— Скрипт, генерящий 756 плакатов с уникальными маршрутами от каждой станции московского метро до стадионов, принимающих матчи ЧМ:
— Скрипт, определяющий, какие объекты оказались за пределами карты, и расставляющий их в виде зарамочных указателей в нужном месте:
— Скрипт, обрабатывающий сырые заготовки карт для навигации в метро (с этого всё началось): устанавливать правильные графические стили элементам карты, очищать файл от мусора, менять порядок слоев, правильно расставлять номера домов, формировать нужный облик остановок транспорта и станций метро, сортировать номера маршрутов, типографить текст, автоматически выравнивать его относительно ближайшей пиктограммы и генерировать зарамочные указатели из эксель-таблички:
Кажется, это всё, что хотел рассказать при скрипты, но это только кустарный быдлокодинг по сравнению с монстрами автоматизации, которые можно развернуть (и уже развернуты) на этих технологиях: огромная махина с шерстящими по файловой системе демонами, обсчитывающей фермой, очередью задач, веб-интерфейсом с контрольной панелью и прочими солидными штуками из мира промышленного программирования. Только к созданию этой махины я уже имею очень поверхностное отношение, так что и рассказывать о ней не считаю возможным. Надеюсь, однажды об этом выйдет отдельный поясняющий анонс.
Эта публикация — копипаст заметки из моего телеграм-канала «Мяу-дизайн» от мая 2019 года.
