Adobe Generator на службе иллюстратора

Фотошоп в далёком 2013 году научился сам сохранять в реальном времени графику в файлы. Это ускоряло у веб-дизайнеров подготовку графических ассетов для вёрстки.

При любом изменении слоя Фотошоп сохраняет его в заданном расширении в папку с исходником и не нужно вручную обрезать слои, копировать их в отдельный файл, использовать Save for Web, Export As. Слои сразу обрезаются генератором по видимым пикселям.

Польза для иллюстратора

Для меня этот плагин при работе с иллюстрациями маст хэв. Как выглядит обычный процесс без него:

• переношу векторную иллюстрацию в Фотошоп смарт-объектом;

• добавляю текстуры иллюстрациям в Фотошопе;

• образуется набор различных дополнительных слоёв;

• при экспорте для дальнейшей вставки в макеты приходится вручную сливать слои, сохранять по отдельности, переименовывать файлы.

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

Нужен фон и персонаж. Разделяем на отдельные именованные группы, в которых работаем со слоями. В это время Фотошоп нам заботливо сохраняет два PNG

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

Генератор сохранил два скетча баннера с фоновым макетом

Небольшой минус в этом случае: однотипные слои, например, фон придётся в каждую группу продублировать. Конвертируйте такие слои в смарт-объекты, чтобы в случае чего, разом везде менять содержимое.

В одном из клиентских проектов с десятком иллюстраций после настройки генератора я моментально получал из Фотошопа набор PNG в @1x, @2x для передачи верстальщикам.

Активация генератора

• Проверяем, что в настройках Фотошопа активирован чекбокс Preferences → Plug-Ins → Enable Generator.

• Для текущего документа выбираем File → Generate → Image Assets.

• Слою, смарт-объекту, шейпу или группе слоёв задаем имя с расширением файла: .jpg, .png, .gif.

Файлы будут сохраняться в папке с исходником {имя PSD}-assets либо на рабочем столе, если создан новый документ.

Синтаксис

В именах слоёв можно использовать любые символы, кроме специальных «/», «:» и «*». Числовой префикс перед именем слоя ставится для указания размера, числовой суффикс после — для качества файла. Префикс от имени обязательно отделяем пробелом.

Официальная справка Адоб о генераторе.
Спецификация по синтаксису Image Assets на Гитхаб.

Размер

Применяются любые типовые единицы измерения. Первое число — ширина, второе — высота. Если не указывать, то Фотошоп будет считать в пикселях. Можно смешивать разные единицы измерения.

Примеры

• 120×90 image.jpg — размер файла 120×90 px

• 400×60cm image.jpg — первое число Фотошоп воспримет, как пиксели, второе — см

• 200% image.jpg — указание в процентах от исходного размера слоя.

Как сохранить файл под разные разрешения? Через запятую или знак «+» в имени слоя пишем имена, форматы, размеры всех файлов, которые нужно из него получить, например, «200% icon@2x.png, icon.png»

Качество сохранения

Генератор поддерживает различные параметры сжатия. Можно ставить дефис перед параметром качества (суффиксом) для читабельности.

Примеры

• image.jpg-100% — JPG с качеством 100%

• image.jpg-5 — JPG с качеством 50%

• image.png-8 — 8 битный PNG

Масштабирование

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

Примеры

• 500x? image.png

• ?x32px image.png

Трюки

Настройки по умолчанию
Если слоёв для экспорта много, то можно сделать шаблонный слой для Фотошопа. Для этого создаём на самом верху документа пустой слой, имя которого начинается с «default» и через пробел описываем любые нужные нам правила.

Из-за слоя-шаблона иконки будут сохранены в двух размерах в подпапках retina и normal

SVG
Хотя везде пишут только про растровые форматы PNG, JPG, GIF, на самом деле Фотошоп может сохранить SVG из шейпов или переведённых в кривые текстовых слоёв. Достаточно векторным шейпам дописать расширение .svg, при чём работает и с группами векторных слоёв.

Фотошоп сформировал код SVG. Откроется в любом векторном редакторе

Переименование
Если вручную заполнять имена слоя лень, существует для простых случаев расширение Generator Layer Names, но для сложных схем оно не подойдёт, например, несколько размеров с одного слоя с включенными Scale и Resize — расширение пропишет одно конфликтное имя для конечного файла «200% layer.png, 313×546 layer.png», хотя можно и вручную потом поправить.

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

Полное описание опций генератора

Опции настраиваются в формате JSON в отдельном файле в корневой папке пользователя. Но чтобы не заморачиваться, можно установить расширение Generator Config.

Заключение

В общем для иллюстратора это один из реально полезных инструментов автоматизации, имеющихся в Фотошопе. С его помощью с минимальными усилиями мы можем получить изображения в разных разрешениях.

Вариантов настроек у генератора множество и для задачи «просто быстро сохранить картинку» они в полном объёме вам будут и не нужны. Достаточно запомнить, как включать генератор и задавать слоям имя плюс расширение экспортируемого файла.

Если вы рисуете иллюстрации только в векторных редакторах, то Фотошоп и функционал генератора, может вам сохранить время на этапе создания и сохранения эскизов иллюстрации для согласования с клиентом.

Где меня найти: Telegram / Facebook / Behance / Dribbble