В Фотошопе ЦЦ появилась полезная функция, которой давно не хватало и о которой почему-то мало кто знает, называется Генератор.

Допустим, у нас есть мобильное приложение с вот таким количеством иконок, их здесь около 50:

Иконки в Иллюстраторе

Они нам нужны в пяти размерах для Андроида и в трех для айОС, итого получается 5×50+3×50=400 файлов. Безумие, сохранять такое количество картинок вручную.

Для начала, разбираем всё оформление в Иллюстраторе и копируем-вставляем шейпы в Фотошоп.

Важный момент — края некоторых иконок, даже если вы рисуете их по пиксельной сетке, всё равно располагаются между пикселями. Для Иллюстратора это не проблема, а вот Фотошоп такое не оценит и выровняет край контура строго по сетке.

Слева контур выровнен как надо, справа — как получилось

Чтобы избежать такого эффекта, пойдем на хитрость — подложим под каждую иконку квадрат нужного размера, в моём случае 80×80 пикселей, и копируем-вставим вместе с ним в Фотошоп. Таким образом мы сохраняем расположение иконки на пиксельной сетке, а заодно задаем нужный размер, в который вписана иконка. Это как раз понадобится далее.

Из Иллюстратора в Фотошоп

После импорта всех контуров из Иллюстратора в Фотошоп, сделаем из слоев артборды. Кликаем на каждом слое правой кнопкой мыши и нажимаем «Artboard from layers…». Если не хочется 50 раз тыкать и нажимать ОК, можно создать макрос и назначить на него горячую клавишу, что я и сделал. После, удаляем квадраты, в которые вписаны иконки и получаем что-то вроде этого:

Голубая подложка нужна, чтобы было видно белые иконки.

Называем каждый артборд руководствуясь документацией Адобе. В моём случае названия такие — 50% 1x/signal-2.png, 75% 1.5x/signal-2.png, 100% 2x/signal-2.png, 150% 3x/signal-2.png, 200% 4x/signal-2.png

Чтобы не мучиться с однотипными названиями артбордов, вынесем повторяющиеся параметры за скобки в спецслой с названием default 50% 1x/, 75% 1.5x/, 100% 2x/, 150% 3x/, 200% 4x/

Далее заходим в меню «File → Generate» и ставим галочку у «Image assets».

Иконки сохранились и разложились по папкам. При внесении изменений, файлы автоматически пересохраняются. Почему надо выносить каждую иконку на отдельный артборд, спросите вы? Потому что иконки по размеру не строго A×A, а чуть меньше в высоту или ширину и Фотошоп будет их триммировать, отрезая прозрачность. Для этого, в том числе, и нужны были квадраты.