Наверх

Экспортируем из Photoshop

Поздравляю. Вы только что закончили совершенный до пикселя макет приложения и получили одобрение от каждого члена команды, и все, что теперь осталось, это сохранить десятки, сотни и даже тысячи отдельных элементов вашей разработки. Это, наверное, наименее интересная часть дизайнерского быта, которая обычно подразумевает повторение одних и тех же действий на протяжении долгих часов (бррр). Сохранение изображений в разных масштабах так, как того требует Apple SDK, добавляет некоторые «нудности» в процесс. Однако есть способы, чтобы упростить-автоматизировать процесс экспорта.

Копируем объединённые объекты

copymerged

Скопировать нужный элемент дизайна с помощью команды «Copy Merged» — довольно легко: удостоверьтесь, что показаны только нужный для данного элемента слои, инструментом «Прямоугольная область» обведите нужный элемент, выберите Edit → Copy Merged, File → New, снова Редактировать и Вставить. В результате вы получили новый документ с вашим элементом, у которого удален прозрачный слой вокруг до максимально возможной степени (максимально близко к краю изображения). Теперь все, что вам нужно – это сохранить изображение, используя «Сохранить как» или «Сохранить для Web».

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

Экспортировать слои в файлы

exportlayerstofiles

Если вам повезло и ваша цель – экспортировать много похожих изображений (с идентичными размерами), вы можете использовать сценариями Фотошопа «Экспортировать слои в файлы».
Выбрав Файл → Сценарии → Экспортировать слои в файлы (File → Scripts → Export Layers to Files) каждый слой вашего документа будет сохранен как отдельный файл с названием, которое совпадает с названием слоя. Это значит, что вам, возможно, придется предварительно подготовить ваш документ, сведя все до растрированных слоев для элементов, которые вы хотите экспортировать – процесс, занимающий время, но чаще это гораздо быстрее, чем использование «Copy Merged». Также дополнительно можно подрезать прозрачные края вокруг изображения, если вы хотите, чтобы прозрачные зоны были полностью удалены.

Фрагменты (Слайсы)

Инструмент «Раскройка» (Slice tool) позволяет вам «раскроить» документ на фрагменты, чтобы экспортировать их как отдельные изображения с некоторыми ограничениями: в одном документе может быть только один набор фрагментов, и фрагменты не могут пересекаться (если они будут пересекаться, они будут «раскроены» на более мелкие фрагменты). В 90-е Slice tool был хорошим способом для создания шаблонов таблиц, заполненных картинками. В наше время этот инструмент больше используется для лучшего контроля над раскройкой изображений, особенно когда надо создать эффектный, динамичный дизайн с изображениями, в которых есть прозрачность.

Спрайт-листы с фрагментами

spritesheet

Sprite sheets (спрайт-листы) обычно используются в CSS и в OpenGL играх, где создание текстурного атласа (texture atlasing) имеет важное значение. Похожий способ может быть использован для построения элементов пользовательского интерфейса в Фотошопе, даже если конечным результатом является набор картинок, а не одна большая картинка.
Рассредоточивая элементы, которые вы хотите экспортировать как спрайт-лист, вы исключаете необходимость пересечения фрагментов. Если вам нужно уместить в один документ слишком много элементов, вы можете создать сложный (составной) документ, исключая потребность в более чем одном наборе фрагментов на один документ.
Есть дополнительное преимущество в работе таким образом – ваши главные элементы дизайна больше не нужно прорисовывать с большой точностью. Ничего страшного, если вы случайно будете использовать растрированный слой или забудете его назвать, потому что у вас будет возможность все исправить, когда вы будете готовить ваш спрайт-лист для экспорта. Однако, это не значит, что ваш оригинальный макет может нарушить синхронизацию ваших последних изменений с экспортируемыми документами (если вы изменяете цвет или эффект слоя или вводите другие коррекции, например).

Так как мы заинтересованы только в разработанных пользователем фрагментах, будет хорошей идеей кликнуть «Hide Auto Slices» (в параметрах при использовании инструмента «Выделение фрагмента» и выключить «Показывать номера фрагментов» (искать в меню в «Направляющие, сетка и фрагменты» в «Установках»). Таким образом, вы уберете ненужную неразбериху из пользовательского интерфейса фрагментов Фотошопа.

spritesheet-groupmask

После того, как вы создали спрайт-лист со всеми правильно установленными фрагментами, вы сможете экспортировать все изображения одним махом, используя «Сохранить для Веб».

Фрагмент из слоя

Если ваш элемент пользовательского интерфейса состоит из оного слоя и вы хотите, чтобы экспортируемое изображение было как можно меньшего размера, вы можете использовать «Фрагмент из слоя». Чтобы создать его для выделенного слоя, выберете «New Layer Based Slice» из меню «Слои». Фрагмент из слоя будет двигаться, увеличиваться и уменьшаться вместе со слоем, с которым он связан. Это также затрагивает эффекты слоя: обводка и тени увеличивают размер фрагмента из слоя, поэтому эффекты включены. Меньше контроля, но более автоматизировано.

Резюмируем

На протяжении нескольких лет, я использовал «Copy Merged» в качестве моего основного способа и «Экспорт слоев в файлы», когда это имело смысл. Да и выбора особо не было. Спрайт-листы имеют много преимуществ, особенно для средних и больших проектов. Универсально при экспортировании Retina и обычных изображений – каждый из наборов может быть экспортирован несколькими кликами, и вряд ли у вас будут проблемы с названием файла или его размером, так как здесь все делается автоматически.

Хорошего экспорта!

Оставить комментарий