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

14.04.2019

Все программы в подборке бесплатны. С функциональностью 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.


5 мая 2011

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

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

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

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

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

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

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

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


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

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

Документ в Иллюстраторе (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 — позволяет выделать одновременно несколько объектов или слоев

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

Экспорт документа Photoshop или всех его монтажных областей

Выберите Файл > Экспорт > Быстрый экспорт в [формат изображения] . Если появится запрос, выберите целевую папку. Photoshop экспортирует текущий документ в качестве графического ресурса в формате, заданном в настройках быстрого экспорта. Если документ содержит монтажные области, то все они экспортируются по отдельности при выборе этого параметра.

Экспорт выбранных слоев, групп слоев или монтажных областей

На панели Слои выберите слои, группы слоев или монтажные области, которые необходимо экспортировать в качестве графических ресурсов. Щелкните выделенные объекты правой кнопкой мыши и выберите Быстрый экспорт в [формат изображения] в контекстном меню. Если появится запрос, выберите целевую папку.

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

Изменение настроек быстрого экспорта

По умолчанию в процессе быстрого экспорта создаются ресурсы в формате PNG с прозрачностью, и каждый раз появляется запрос на выбор места экспорта. Чтобы изменить настройки, выберите Установки > Экспорт или Файл > Экспорт > Настройки экспорта , а затем укажите следующее:

  • Выберите предпочитаемый формат быстрого экспорта : PNG, JPG, PNG-8, GIF или SVG.
  • Параметры, связанные с форматом. Например, для PNG можно указать, экспортировать ресурсы с включенным параметром Прозрачность (32 бита) или выполнять экспорт изображений меньшего размера (8 бит).
  • Местоположение для изображений, экспортируемых с помощью быстрого экспорта . Для этого выберите один из следующих вариантов.

Каждый раз спрашивать, куда экспортировать : запрос на выбор местоположения появляется каждый раз при экспорте ресурсов
Экспортировать файлы в папку ресурсов рядом с текущим документом : графический ресурс помещается в подпапку Ресурсы в папке, содержащую исходный документ Photoshop.

  • Возможность включать метаданные (информацию об авторских правах и контактные данные) в экспортируемые ресурсы.
  • Возможность преобразовать ресурсы в цветовое пространство sRGB.

Диалоговое окно «Экспортировать как»: монтажные области, слои или документы


При использовании окна Экспортировать как можно настраивать параметры каждый раз при экспорте слоев, групп слоев, монтажных областей или всего документа Photoshop в виде изображений.

  • Выберите Файл > Экспорт > Экспортировать как , чтобы экспортировать текущий документ Photoshop. Если документ содержит монтажные области, то все они экспортируются с помощью этого диалогового окна.
  • Чтобы вызвать это диалоговое окно для слоев, групп слоев или монтажных областей, выберите нужные объекты на панели Слои . Щелкните выделенные объекты правой кнопкой мыши и выберите Экспортировать как в контекстном меню.

    Каждый выбранный слой, группа слоев или монтажная панель экспортируется как отдельный графический ресурс.

Параметры в диалоговом окне «Экспортировать как»

Можно задать следующие параметры в диалоговом окне Экспортировать как :

Формат

ВыберитеPNG , JPG , GIF или SVG .

Настройка формата

Для PNG укажите, экспортировать ресурсы с включенным параметром Прозрачность (32 бита) или выполнять экспорт изображений меньшего размера (8 бит). Для JPEG укажите требуемое качество изображения (0–100 %). Изображения GIF по умолчанию прозрачны.

Примечание.

При экспорте ресурсов PNG учитывайте следующее.

  • При выборе параметра Прозрачность будут созданы 32-битные ресурсы PNG.
  • Выбор параметра Файл меньшего размера позволит создать 8-битные ресурсы PNG.
  • Если снять оба флажка, приложение будет создавать 24-битные ресурсы PNG.

Размер

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

Масштаб

Выберите, насколько большим должно быть экспортированное изображение. Этот параметр полезен для экспорта ресурсов большего или меньшего разрешения. Изменение масштаба влияет на размер изображения.

Ресамплинг Выберите метод повторной выборки. Повторной выборкой называется изменение объема данных изображения при изменении его размеров в пикселях либо разрешения, обычно при изменении размера изображения.

Билинейная : этот метод добавляет новые пиксели, рассчитывая среднее значение цвета окружающих пикселей. Он дает результат среднего качества.

Бикубическая : более медленный, но и более точный метод, основанный на анализе значений цвета окружающих пикселей. За счет использования более сложных вычислений бикубическая повторная выборка дает более плавные цветовые переходы, чем билинейная повторная выборка или выполняемая по соседним пикселям.

Бикубическая, глаже : хороший метод для увеличения изображений на основе бикубической интерполяции, разработанный специально для получения более гладких результатов.

Бикубическая, четче : удобный метод для уменьшения размера изображения на основе Бикубическая интерполяция при увеличении резкости. Этот метод позволяет сохранить детали изображения, подвергнутого повторной выборке. Если интерполяция «Бикубическая, четче» делает слишком резкими некоторые области изображения, попробуйте воспользоваться бикубической интерполяцией.

Бикубическая автоматическая : автоматически выбирает метод бикубической повторной выборки, подходящий для изображения.

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

Размер холста

Если для ресурса отводится область с определенной высотой и шириной, укажите эти значения в качестве размера холста. Область предварительного просмотра в диалоговом окне Экспортировать как... обновляется: изображение располагается по центру в этих границах.

Этот параметр полезен в некоторых ситуациях, например:

  • Выполняется экспорт значков разных размеров, которые требуется расположить по центру в окошках 50х50 пикс .
  • Выполняется экспорт баннерных изображений, размер которых больше или меньше требуемых значений.

Если изображение превышает размер холста, оно обрезается до заданных значений ширины и высоты.

Щелкните Сбросить , чтобы вернуть значения, заданные в параметре Размер изображения .

Метаданные

Укажите, следует ли включать метаданные (информацию об авторских правах и контактные данные) в экспортируемые ресурсы.

Цветовое пространство

Укажите следующее.

  • Требуется ли преобразовывать экспортируемые ресурсы в цветовое пространство sRGB. По умолчанию этот параметр выбран.
  • Требуется ли внедрять цветовые профили в экспортируемые ресурсы.
Похожие статьи