Как в фотошопе экспортировать все слои в отдельные файлы. Правильный экспорт макетов дизайна из AI в PSD

5 мая 2011

В наше время всё чаще можно встретить дизайнеров интерфейсов, которые отказались от использования старого доброго Adobe Photoshop в пользу векторных инструментов. Иными словами, в пользу Adobe Illustrator. Преимущества очевидны: работая с векторным исходником, мы можем лучше контролировать весь процесс, чем работая с растровой картинкой (пусть даже она разделена на слои). В векторном редакторе нарисованный круг остается нарисованным кругом, а в фотошопе — это просто множество закрашенных пикселей. Наконец, в векторном редакторе намного проще делать варианты для экранов с разной плотностью точек (привет, Retina Display!).

Однако, бытует мнение, будто переход дизайнеров на Adobe Illustrator сулит вагон проблем верстальщикам. Верстальщики — люди в большинстве своём консервативные, новые веяния принимают в штыки. Так что принимать исходники макетов дизайна в формате AI они чаще всего отказываются категорически. Такая позиция основывается на двух мифах:

Экспортировать макеты из AI в PSD очень сложно и долго.
При экспорте макетов из AI в PSD сильно страдает качество картинки.

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

Правильный способ экспорта макетов дизайна из AI в PSD состоит из трех шагов:

Шаг первый: наводим порядок. Выносим все текстовые объекты на отдельный слой (или на несколько отдельных слоёв). Все остальные объекты разумно группируем по слоям. В PSD каждый из этих слоёв будет совершенно плоским, так что на этом этапе самое время подумать и решить, какие детали можно сплющивать, а какие лучше разделить по разным слоям. Важно также следить за тем, чтобы все эффекты наложения объектов друг на друга оставались внутри слоёв, иначе будет безобразие.

В результате у нас должен получиться относительно небольшой набор понятно названных слоёв:

Шаг второй: растрируем. Для всех слоёв, кроме текстовых, применяем эффект Rasterize в режиме Type Optimized.

Звучит парадоксально, но делать нужно именно так. Только такой способ растеризации обеспечивает результат, в точности соответствующий тому, что мы видим в векторном исходнике. Подробнее об этой странной особенности Adobe Illustrator я писал в нашем блоге 7 лет назад: . Как это ни удивительно, в целом ситуация с тех пор не поменялась.

Шаг третий: экспортируем. В результате получаем PSD, картинка в котором в мельчайших деталях совпадает с исходной картинкой в AI.

Все программы в подборке бесплатны. С функциональностью Photoshop они, конечно, не сравнятся, но с простыми задачами справятся. Как минимум вы сможете просто открыть PSD-файл как изображение, а некоторые из этих программ открывают даже слои.

1. GIMP

Операционная система: Windows, Mac и Linux.
Русский язык: поддерживается.

Это один из самых интересных бесплатных аналогов Photoshop. GIMP читает файлы PSD без установки дополнительных плагинов, поэтому открыть файл можно так же, как и обычные изображения: File → Open.

GIMP открывает слои PSD-документа для редактирования. Но тут есть свои подводные камни: программа читает далеко не все слои, некоторые требуется растрировать. А ещё GIMP может некорректно сохранить изменения в PSD. После этого файл может не открыться в Photoshop. Последнее не должно вас беспокоить, если вы открыли файл для незначительных правок и сохранения картинки в JPEG.

Операционная система: начиная с Windows 7.
Русский язык: поддерживается.

Paint.NET лучше стандартного Microsoft Paint, но такой же максимально понятный и простой в использовании. Если не знаете, что делать с файлом в GIMP, открывайте Paint.NET.

Программа читает PSD, но только после установки соответствующего плагина. Для этого:

Загрузите плагин .
Извлеките файлы из загруженного архива.
Скопируйте файл PhotoShop.dll.
Перейдите в установочную папку Paint.NET (например, C:\Program Files\paint.net ).
Вставьте файл PhotoShop.dll в папку FileTypes.
Запустите Paint.NET.

Операционная система: любая, так как приложение открывается в браузере.
Русский язык: поддерживается.

Photopea - онлайн-сервис, интерфейс которого напоминает Photoshop или GIMP. Его преимущество - не нужно ничего устанавливать. Программа откроется в браузере на любом устройстве. Но онлайн-приложения зачастую не такие практичные, как устанавливаемые программы. Photopea не исключение, но зато позволяет работать со слоями в PSD-документе.

Операционная система: Windows (для Linux и macOS есть версия ).
Русский язык: поддерживается только в Standart и Extended-версиях.

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

Программа непопулярна, а зря: она способна открыть изображения в более чем 500 форматах и пересохранить их в ещё 70. Так что установите её в качестве примитивного редактора для PSD или конвертера.

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

Операционная система: Windows.
Русский язык: поддерживается.

Программа IrfanView, как и XnView, предназначена для просмотра и конвертирования графических файлов. Но IrfanView поддерживает меньше форматов. Программа открывает PSD как картинку. Редактировать слои нельзя, но обычное изображение можно. Чтобы получить больше возможностей для обработки, PSD-файл сначала нужно конвертировать в другой формат.

IrfanView быстро работает и мало весит (установочные файлы занимают чуть больше 3 МБ).

Если ни один из вариантов вам не подходит, можете конвертировать PSD в JPG, используя Go2Convert или любой другой конвертер. Вы также можете открыть PSD как картинку в Google Drive.

Как перенести иллюстрацию, дизайн сайта или UI из Иллюстратора в Фотошоп, не используя копирование в виде смарт-объекта? При этом хочется сохранить объекты векторными после переноса. В этом должна помочь стандартная функция экспорта в PSD, но так ли это?

В Иллюстраторе в меню File → Export → PSD есть опция «Write Layers» с пунктом «Maximum Editability», но результат — случайные растровые слои, в которые превращаются векторные объекты. Не похоже что-то на «максимум возможности редактирования» в Фотошопе.

Несмотря на опции экспорта, два квадрата стали одним растровым слоем в PSD

Поиск решения

Надо бороться с разработчиками Эдоуб несправедливостью. Ищу русскоязычные, западные статьи (попадается интересная 2011 года у Турбомилк), уроки, видео на Ютюбе. Почти везде все сводится к группировке объектов в иллюстрации, сортировке по слоям (порядок в слоях полезен для работы, а не только для экспорта) и дальнейшей ручной растеризации через Object → Rasterize в самом Иллюстраторе либо автоматической при экспорте. Но мне хочется сохранить объекты векторными в PSD.

Экспорт из AI по статье Турбомилк. Порядок в группах, слоях, но все растровое

Требуется Иллюстратор версии CS6 и выше

Cкрипт проводит проверку всех объектов в документе, в независимости от того, на каком они слое или в группе. Найдя объект с однотонной заливкой, он применяет к нему Экшн с операцией Make Compound Shape. Для сохранения векторных обводок к объектам нужно применить Object → Path → Outline Stroke.

Если у вас есть группа из сотен мелких объектов, например, кистью нарисованы волосы, шерсть или текст, переведенный в кривые, лучше перед выполнением скрипта объединить такие элементы в Compound Path клавишами Cmd + 8 (Ctrl в Windows), чтобы скрипт каждый объект, букву отдельно не обрабатывал.

Исключения

Если в файле присутствуют объекты, к которым применены Photoshop effects (тень, свечение, шум и т.д.), то их перед запуском скрипта надо вручную растрировать в режиме Type Optimized.

В силу специфичности некоторых видов объектов (градиенты, паттерны, меши и ряд других) по результатам тестов не все они могут экcпортироваться из AI в PSD, оставшись векторными, но их можно сделать отдельными растровыми слоями без долгой сортировки по группам и слоям в Иллюстраторе. Для этого применяется еще одна хитрость, скрипт по отдельности делает из каждого такого объекта отдельную группу.

2 квадрата в AI в отдельных группах после экспорта в PSD

Краткие итоги

При экспорте из AI в PSD у нас сохраняются параметры прозрачности, режимы наложения слоев.
Применение Make Compound Shape позволяет сохранить векторные объекты в PSD.
Градиенты, паттерны, меши, объекты с растровыми эффектами, фигуры с обводками растрируются.
Преобразование каждого растрируемого объекта в группу позволяет сохранить его после экспорта отдельным слоем в Фотошопе.
Флет иконки, UI элементы, иллюстрации — их можно после подготовки получить в PSD файле полностью в векторной форме.
Подготовка файла скриптом Ai2Psd помогает снизить количество ручной работы для файлов с большим количеством объектов.

Mateusz Nowak: «Thanks for Ai-to-Psd script!»
Dilyana Aleksandrova: «ai to psd saved my ass at work man, thank you for sharing it!»
Weyn Cueva: «This is amazing! I’ve been looking for something similar because I work more in Photoshop. Thank you.»
Maggie Stilwell: «This is awesome! A great timesaver. Thank you for sharing it.»
WashIrving: «выглядит чертовски полезно. спасибо, бро»
zmotion: «Шикарный скрипт. Уверен для многих, в том числе и для меня это будет весьма полезно!»

И для примера векторная иллюстрация, которая прошла обработку скриптом и была экспортирована в PSD формат.

173 объекта в AI обработалось за 40 сек. В итоговом PSD все слои — векторные шейпы

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

Шаг 1
Итак, у нас есть документ фотошопа с несколькими слоями (в данном случае 11), которые мы, собственно, и хотим преобразовать в отдельные файлы.

Шаг 2
В меню выбираем путь «Файл» (File) > «Сценарии» (Scripts) > «Экспорт слоев в файл» (Export Layers To Files)

Шаг 3
В открывшемся диалоговом окошке заполняем следующие поля. Куда сохранить картинку выбираем на компьютере с помощью «Browse…». Имя файла можно не задавать, так как скрипт все равно сохранит файлы под своими именами. Я обычно все файлы потом сама переименовываю. Если нужно сделать картинки только видимых слоев, то ставим галку у Visible Layers Only. Потом выбираем тип файла. Потом нажимаем Run.

Шаг 4
Скрипт предоставляет возможность выбора таких вот типов файлов. Самый полезный здесь для меня jpg.

Шаг 6
После выполнения задачи скрипт выдаст такое вот сообщение об успешном выполнении экспорта слоев в файлы.

Шаг 6
Ну а в том месте, где вы указали, появятся 11 отдельных файлов в формате jpg.

Документ в Иллюстраторе (Adobe Illustrator) состоит из слоев .

Зачем нужны слои?

Каждый слой состоит из подслоев или субслоев, на каждом субслое находиться 1 объект (кривая, линия, точка, простая фигура).

Основные функции слоев в Иллюстраторе:

Простое управление (выделение, группировка, перемещение, скрытие\показ) отдельными объектами, особенно актуально это когда иллюстрация сложная, объектов много и они перекрывают друг друга.
Перенос атрибутов (свойств)оформления между слоями
Управление направляющими
Создание сложных изображений используя иерархические цепочки (то есть те объекты, которые находятся на подслое принимают на себя и параметры слоя к которому они относятся)
Ручная трассировка (создание слоя-шаблона)

Итог — слои в Иллюстраторе (Adobe Illustrator) как и в Фотошопе нужны для более гибкой работы с отдельными объектами.

Работать со слоями мы можем в палитре Слои . Палитра Слои находиться в меню Окно/Слои , а по умолчанию она находиться на рабочем столе.

Новый документ состоит из 1-го слоя.

Для создания нового слоя в программе Adobe Illustrator нужно найти иконку внизу палитры Слои , которая называется Создание нового слоя . Или можно использовать горячие клавиши alt+ctrl+L

На каждом слое может находиться один или несколько объектов.

Несколько слоев или объектов на слоях могут объединяться в группы. Объекты в группах могут вместе перемещаться, трансформироваться , но при этом свойства (цвет, обводка) каждого объекта остаются индивидуальны и неизменны .

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

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

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

Слои могут быть видимые и не видимые . Для этого найдите глаз на палитре слои у нужного слоя и щелкните по нему, он скроется. Если глаз бледно-серый, значит сначала нужно вернуть видимость родительскому объекту. Чтобы скрыть (показать) все слои, кроме одного щелкаем по нужному слою и одновременно удерживаем ALT .

Каждый слой или группу слоев можно заблокировать , в этом случае объект, слой или группа в Иллюстраторе перестанут выделяться . Блокировка нужна если вы боитесь случайно сдвинуть, изменить или удалить объект в Иллюстраторе (Adobe Illustrator). У заблокированного объекта будет стоять замочек (см. иллюстрацию), что бы его снять, нужно в палитре Слои щелкнуть по нему, если замочек бледно-серый, то сначала нужно снять блокировку с родительского объекта, слоя. Направляющие, которые находятся в блокируемом слое, тоже перестают работать (перемещаться) и привязка к таким направляющим не может быть выполнена.

Горячие клавиши для работы со слоями, объектами на слоях в Иллюстраторе (Adobe Illustrator).

Ctrl+[ — переместить объект на 1 вверх

Ctrl+] — переместить объект на 1 вниз

Shift+ctrl+[ — переместить объект на задний план

Shift+ctrl+] — переместить объект на передний план

Ctrl+G — объединить несколько объектов в группу

Shift+Ctrl+G — отменить группировку

Shift — позволяет выделать одновременно несколько объектов или слоев

Этот урок часть моего курса