Можно создавать графические ресурсы JPEG, PNG или GIF из содержимого слоя или группы слоев в PSD-файле. Ресурсы автоматически формируются при добавлении поддерживаемого расширения формата изображения к имени слоя или группы слоев. При желании можно также указать качество и размер для формируемых графических ресурсов.

Формирование графических ресурсов из PSD-файла особенно полезно в сфере веб-дизайна для нескольких устройств.

Видео. Формирование веб-ресурсов в Photoshop

Видео. Формирование веб-ресурсов в Photoshop
В этом видеопособии рассматриваются различные способы использования генератора ресурсов в Photoshop для вывода изображений разных размеров и с разным разрешением для использования в других проектах.
Chris Converse

Инструкции по созданию и формированию веб-графики с помощью Adobe Generator см. в разделе Извлечение ресурсов для Интернета.

Формирование графических ресурсов из слоев или групп слоев

Чтобы лучше понять принцип работы генератора графических ресурсов, рассмотрим простой PSD-файл; загрузите его по этой ссылке со следующей иерархией слоев:

Создание графических ресурсов в Photoshop
Образец PSD-файла и его иерархии слоев

Иерархия слоев для этого файла имеет две группы слоев: Rounded_rectangles (Прямоугольники со скругленными углами) и Ellipses (Эллипсы). Каждая из этих групп слоев содержит пять слоев.

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

  1. Откройте PSD-файл и выберите Файл > Сформировать > Графические ресурсы.
  2. Добавьте соответствующие расширения форматов файлов (.jpg, .png или .gif) к названиям слоев или групп слоев, из которых требуется сформировать графические объекты. Например, переименуйте группы слоев, Rounded_rectangles и Ellipses в Rounded_rectangles.jpg и Ellipses.png; а слой Ellipse_4 в Ellipse_4.gif.

Примечание.

В именах слоев нельзя использовать специальные символы : и *.

Photoshop формирует графические ресурсы и сохраняет их в подпапке вместе с исходным PSD-файлом. Если исходный PSD-файл еще не сохранен, Photoshop сохраняет сформированные ресурсы в
новую папку на рабочем столе.

Имена графических ресурсов в Photoshop
Имена графических ресурсов формируются из имен слоев или группы слоев

Примечание.

Формирование графических ресурсов включено для текущего документа. После включения эта функция остается доступной при каждом последующем открытии документа. Чтобы отключить формирование графических ресурсов для текущего документа, снимите флажок Файл > Сформировать > Графические ресурсы.

Формирование нескольких ресурсов из слоя или группы слоев

Чтобы сформировать несколько ресурсов из слоя или группы слоев, разделяйте имена ресурсов запятыми. Например, следующее имя слоя формирует три ресурса:

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

Сохранение ресурсов к подпапке

Можно сохранить графические ресурсы, созданные из определенных слоев или групп слоев, во вложенную папку непосредственно в папке ресурсов документа. Включите имя вложенной папки в имя слое/группу слоев, например:

[вложенная папка]/Ellipse_4.jpg 

Пример использования для веб-дизайна

Формирование графических ресурсов из PSD-файла особенно полезно в сфере веб-дизайна для нескольких устройств. Рассмотрим следующий пример веб-дизайна и его структуру слоев:

Веб-дизайн и его иерархия слоев
Веб-дизайн и его иерархия слоев

Давайте извлечем значок сверху и верхнюю строку таблицы изображений Global Hotspots (Глобальные точки доступа) в качестве графических ресурсов изображения:

  • Добавьте расширения графических форматов к соответствующим именам слоев.
Переименование соответствующих слоев или групп слоев в Photoshop
Переименование соответствующих слоев или групп слоев в Photoshop

Переименуйте соответствующие слои/группы слоев

Примечание.

Из содержимого слоя/группы слоев формируется один графический ресурс. Например, группа слоев AdventureCo Logo на приведенном выше снимке экрана содержит слой-фигуру и интерактивный текстовый слой. Эти слои сводятся при извлечении графического ресурса из группы слоев.

Photoshop формирует ресурсы и сохраняет их в том же местоположении, что исходный PSD-файл.

Созданные графические ресурсы в Photoshop
Сформированные графические ресурсы

Указание параметров качества и размера

Ресурсы JPEG по умолчанию формируются с качеством 90 %. Ресурсы PNG по умолчанию формируются как 32-битные изображения. Ресурсы GIF формируются с базовой прозрачностью альфа-канала.

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

Параметры для ресурсов JPEG

  • Добавьте нужное качество вывода в качестве суффикса к имени ресурса: .jpg(1–10) или .jpg(1–100 %). Например:
    • Ellipse_4.jpg5
    • Ellipse_4.jpg50%
  • Добавьте желаемый размер выходного изображения (относительный или в поддерживаемых форматах: пиксели, дюймы, см и мм) в качестве префикса к имени ресурса. Photoshop масштабирует изображение соответствующим образом. Например:
    • 200% Ellipse_4.jpg
    • 300 x 200 Rounded_rectangle_3.jpg
    • 10in x 200mm Rounded_rectangle_3.jpg

Примечание. Обязательно добавьте пробел между префиксом и именем ресурса. Если размер указывается в пикселах, можно пропустить единицу измерения. Например, 300 x 200.

Примечание.

Как показано, можно смешивать различные единицы измерения и пикселы при указании требуемого размера изображения вывода. Например, 4in x 100 Rounded_rectangle_3.jpg представляет собой допустимое имя слоя для формирования ресурса.

Параметры для ресурсов PNG

  • Добавьте нужное качество вывода в качестве суффикса к имени ресурса: 8, 24 или 32. Например:
    • Ellipse_4.png24
  • Добавьте желаемый размер выходного изображения (относительный или в поддерживаемых форматах: пиксели, дюймы, см и мм) в качестве префикса к имени ресурса. Photoshop масштабирует изображение соответствующим образом. Например:
    • 42% Ellipse_4.png
    • 300mm x 20cm Rounded_rectangle_3.png
    • 10in x 50cm Rounded_rectangle_3.png

Примечание. Обязательно добавьте пробел между префиксом и именем ресурса. Если размер указывается в пикселах, можно пропустить единицу измерения. Например, 300 x 200.

Примечание.

Как показано, можно смешивать различные единицы измерения и пикселы при указании требуемого размера изображения вывода. Например, 4in x 100 Rounded_rectangle_3.png представляет собой допустимое имя слоя для формирования ресурса.

Параметры для ресурсов GIF

  • Добавьте желаемый размер выходного изображения (относительный или в поддерживаемых форматах: пиксели, дюймы, см и мм) в качестве префикса к имени ресурса. Например:
    • 42% Ellipse_4.gif
    • 300mm x 20cm Rounded_rectangle_3.gif
    • 20in x 50cm Rounded_rectangle_3.gif

Примечание. Обязательно добавьте пробел между префиксом и именем ресурса. Если размер указывается в пикселах, можно пропустить единицу измерения. Например, 300 x 200.

Примечание.

Как показано, можно смешивать различные единицы измерения и пикселы при указании требуемого размера изображения вывода. Например, 4in x 100 Rounded_rectangle_3.gif представляет собой допустимое имя слоя для формирования ресурса.

Параметры качества недоступны для ресурсов GIF.

Создание сложных имен слоев

Присваивая имя слою для формирования ресурсов, можно указать несколько имен ресурсов с параметрами. Например:

120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif

Photoshop формирует следующие ресурсы из этого слоя:

  • Delicious.jpg (изображение JPG с качеством 8 и масштабом 120 %)
  • Delicious.png (24-битное изображение PNG с масштабом 42 %)
  • Delicious_2.jpg (изображение JPG с качеством 90 %, которое имеет абсолютный размер 100x100 пикс.)
  • Delicious.gif (изображение GIF с масштабом 250 %)

Настройка параметров по умолчанию для ресурсов

Для создаваемых ресурсов можно задать настройки по умолчанию в рамках документа. Выполните следующие действия.

  1. Создайте пустой слой в документе.
  2. Начните имя слоя с ключевого слова по умолчанию. Теперь введите параметры, которые требуется применить ко всем графическим ресурсам, созданным из документа. Например:

по умолчанию hi-res/

Создает все графические ресурсы во вложенной папке hi-res. Например, [папка_ресурсов]/hi-res//Delicious.jpg.

по умолчанию hi-res//@2x

Создает все графические ресурсы во вложенной папке hi-res. Кроме того, к именам ресурсов добавляется суффикс @2x. Например, [папка_ресурсов]/hi-res//Delicious@2x.jpg.

по умолчанию 50 % lo-res/

Сохраняет графические ресурсы, уменьшенные на 50 % во вложенной папке lo-res в папке ресурсов документа 

по умолчанию hi-res//@2x + 50 % lo-res/

Создает два графических ресурсов изображений из слоя:

  • Во вложенной папке hi-res сохраняется графический ресурс, к имени которого добавляется суффикс @2x
  • Во вложенной папке lo-res сохраняется графический ресурс, уменьшенный на 50 %

Примечание.

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

Отключение формирования графических ресурсов изображений для всех документов

Можно отключить формирование графических ресурсов глобально для всех документов Photoshop в окне Установки.

  1. Выберите Редактирование > Установки > Внешние модули.
  2. Снимите флажок Включить Генератор.
  3. Нажмите кнопку ОК.

Примечание.

Команда меню Файл > Сформировать недоступна, когда формирование графических ресурсов отключено в окне Установки. Эту функцию можно включить повторно только в диалоговом окне Установки.

Часто задаваемые вопросы

Нужно ли указывать уникальные имена ресурсов?

Имена ресурсов должны быть уникальными на уровне документа.

Какой уровень качества используется по умолчанию при создании графических ресурсов?

Ресурсы JPG по умолчанию формируются с качеством 90 %. Ресурсы PNG по умолчанию формируются как 32-битные изображения. Ресурсы GIF формируются с базовой прозрачностью альфа-канала.

Формирует ли Photoshop графические ресурсы из слоев с прозрачными областями и другими эффектами?

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

Как обрабатываются графические ресурсы, сформированные из слоев, изображение которых выходит за края холста?

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

Имена графических ресурсов можно разделять только запятой?

Кроме запятой (,), в качестве разделителя имен графических ресурсов можно использовать знак «плюс» (+). Например:

42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%

соответствует:

42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%

Видео: Создание проекта Edge Reflow из Photoshop Generator

Видео: Создание проекта Edge Reflow из Photoshop Generator
В этом видеопособии рассматривается создание веб-макета для размеров экрана от 320 до 1 000 пикселей по горизонтали.
Chris Converse

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет