Фотошоп в далёком 2013 году научился сам сохранять в реальном времени графику в файлы. Это ускоряло у веб-дизайнеров подготовку графических ассетов для вёрстки.
При любом изменении слоя Фотошоп сохраняет его в заданном расширении в папку с исходником и не нужно вручную обрезать слои, копировать их в отдельный файл, использовать Save for Web, Export As. Слои сразу обрезаются генератором по видимым пикселям.
Содержание статьи
Польза для иллюстратора
Для меня этот плагин при работе с иллюстрациями маст хэв. Как выглядит обычный процесс без него:
- переношу векторную иллюстрацию в Фотошоп смарт-объектом;
- добавляю текстуры иллюстрациям в Фотошопе;
- образуется набор различных дополнительных слоёв;
- при экспорте для дальнейшей вставки в макеты приходится вручную сливать слои, сохранять по отдельности, переименовывать файлы.
А с генератором в начале группируем ключевые объекты, задаём имена слоям и дальше всё внимание уделяем только работе над иллюстрацией, зная что актуальные файлы уже лежат в папке.
Также это незаменимая штука, когда нужно сохранять скетчи для предварительного показа. Пока накидываем на слоях идеи, Фотошоп в реальном времени нам их сохранит в папке.
Небольшой минус в этом случае: однотипные слои, например, фон придётся в каждую группу продублировать. Конвертируйте такие слои в смарт-объекты, чтобы в случае чего, разом везде менять содержимое.
В одном из клиентских проектов с десятком иллюстраций после настройки генератора я моментально получал из Фотошопа набор 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» и через пробел описываем любые нужные нам правила.
SVG
Хотя везде пишут только про растровые форматы PNG, JPG, GIF, на самом деле Фотошоп может сохранить SVG из шейпов или переведённых в кривые текстовых слоёв. Достаточно векторным шейпам дописать расширение .svg, при чём работает и с группами векторных слоёв.
Переименование
Если вручную заполнять имена слоя лень, существует для простых случаев расширение Generator Layer Names, но для сложных схем оно не подойдёт, например, несколько размеров с одного слоя с включенными Scale и Resize — расширение пропишет одно конфликтное имя для конечного файла «200% layer.png, 313×546 layer.png», хотя можно и вручную потом поправить.
Тонкие настройки
С помощью конфигурационных файлов плагин можно прокачать. Изменить алгоритм интерполяции, встроить цветовой профиль, активировать поддержку WebP (пока на Маке), активировать пропорциональное масштабирование эффектов слоя и т.п.
Полное описание опций генератора
Опции настраиваются в формате JSON в отдельном файле в корневой папке пользователя. Но чтобы не заморачиваться, можно установить расширение Generator Config.
Заключение
В общем для иллюстратора это один из реально полезных инструментов автоматизации, имеющихся в Фотошопе. С его помощью с минимальными усилиями мы можем получить изображения в разных разрешениях.
Вариантов настроек у генератора множество и для задачи «просто быстро сохранить картинку» они в полном объёме вам будут и не нужны. Достаточно запомнить, как включать генератор и задавать слоям имя плюс расширение экспортируемого файла.
Если вы рисуете иллюстрации только в векторных редакторах, то Фотошоп и функционал генератора, может вам сохранить время на этапе создания и сохранения эскизов иллюстрации для согласования с клиентом.
Загрузка...
