在 Photoshop 中通过图层创建图像资源

JPEG、PNG 或 GIF 图像资源可以从 PSD 文件图层或图层组中的内容生成。将受支持的图像格式扩展添加到图层名称或图层组名称时，会自动生成资源。（可选）您也可以指定所生成图像资源的品质和大小参数。

从 PSD 文件生成图像资源对于多设备 Web 设计来说尤其有用。

视频：在 Photoshop 中生成 Web 资源

视频：在 Photoshop 中生成 Web 资源这段视频会向您介绍如何通过各种方式，使用 Photoshop 中的资源生成器输出可用于其他项目的具备不同大小和不同分辨率的图像。Chris Conversehttp://codifydesign.com

有关如何使用 Adobe Generator 创建和生成 Web 图形，请参阅将资源提取为 Web 所用格式。

从图层或图层组生成图像资源

要更好地了解图像资源生成器，请考虑具有以下图层层次结构的简单 PSD 文件（从此链接下载）：

示例 PSD 文件及其图层层次结构

此文件的图层层次结构具有两个图层组：Rounded_rectangles 和 Ellipses。每个图层组均包含 5 个图层。

按照以下步骤从此 PSD 文件生成图像资源：

1. 打开 PSD 文件后，选择“文件”>“生成”>“图像资源”。
2. 将适当的文件格式扩展名（.jpg、.png 或 .gif）添加到您要从中生成图像资源的图层或图层组的名称中。例如，将图层组 Rounded_rectangles 和 Ellipses 重命名为 Rounded_rectangles.jpg 和 Ellipses.png；将图层 Ellipse_4 重命名为 Ellipse_4.gif。

注意:图层名称不支持特殊字符 : 和 *。

Photoshop 生成图像资源并将它们与源 PSD 文件一起保存在子文件夹中。如果源 PSD 文件尚未保存，Photoshop 会将生成的资源保存在
桌面上的新文件夹中。

图像资源名称从图层名称/图层组名称中生成。

注意:图像资源生成功能针对当前文档启用。启用后，无论何时再次打开该文档，功能仍然可用。要禁用当前文档的图像资源生成功能，请取消选择“文件”>“生成”>“图像资源”。

从一个图层或图层组生成多个资源

若要从一个图层/图层组生成多个资源，请用半角逗号分隔资源名称。例如，以下图层名称生成三个资源：

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

将资产保存在子文件夹中

您可以选择将特定图层/图层组生成的图像资源直接保存在资源文件夹下的子文件夹中。包括图层/图层组名称下的子文件夹名称；例如：

[子文件夹]/Ellipse_4.jpg 

Web 设计使用案例

从 PSD 文件生成图像资源对于多设备 Web 设计来说尤其有用。考虑以下 Web 设计及其图层结构：

Web 设计及其图层层次结构

将顶部的图标和“全球热点”图像网格的顶行提取为图像资源：

• 将图像格式扩展名添加到适当的图层名称中。

为适当的图层/图层组重命名

注意:将从图层/图层组的内容中生成一个图像资源。例如，上面屏幕抓图中的 AdventureCo Logo 图层组包含一个形状图层和一个活动文本图层。当从图层组生成图像资源时，这些图层会进行拼合。

Photoshop 生成资源，并将它们保存在与源 PSD 文件相同的位置。

生成的图像资源

指定品质和大小参数

默认情况下，JPEG 资源会以 90% 品质生成。默认情况下，PGN 资源会以 32 位图像生成。GIF 资源会以基本 Alpha 透明度生成。

当重命名图层或图层组以便为资源生成做准备时，您可以自定品质和大小。

JPEG 资源的参数

• 添加所需的输出品质作为该资源名称后缀：jpg(1-10) 或 jpg(1-100%)。例如：
  • Ellipse_4.jpg5
  • Ellipse_4.jpg50%
• 添加所需的输出图像大小（相对大小或以支持的格式：px、in、cm 和 mm）作为该资源名称前缀。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
• 添加所需的输出图像大小（相对大小或以支持的格式：px、in、cm 和 mm）作为该资源名称前缀。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 资源的参数

• 添加所需的输出图像大小（相对大小或以支持的格式：px、in、cm 和 mm）作为该资源名称前缀。例如：
  • 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（缩放 120% 的 8 品质 JPG 图像）
• Delicious.png（缩放 42% 的 24 位 PNG 图像）
• Delicious_2.jpg（100x100 像素绝对大小的 90% 品质 JPG 图像）
• Delicious.gif（缩放 250% 的 GIF 图像）

为资源指定默认设置

可以为生成的资源指定文件默认设置。请按以下步骤进行操作：

1. 创建空图层。
2. 图层的名称以默认的关键字开始。现在，输入您将应用于从文档生成的所有图像资源的设置。例如：
   

默认 hi-res/

在名为 hi-res 的子文件夹中生成所有图像资源。例如，[asset_folder]/hi-res/Delicious.jpg。

默认 hi-res/@2x

在名为 hi-res 的子文件夹中生成所有图像资源。此外，资源名称在后缀为 @2x。例如，[asset_folder]/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% 品质生成。默认情况下，PGN 资源会以 32 位图像生成。GIF 资源会以基本 Alpha 透明度生成。

Photoshop 是否从具有透明度和其他效果的图层生成图像资源？

是。应用到图层的透明度和其他效果会反映在从该图层生成的资源中。但是，这些效果可能在生成的资源中拼合。

如何从画布上的出血图层生成图像资源？

资源会被剪辑至文档边界。如果图像位于文档边界之外，则生成器不会创建与之相关的图像资源。

逗号是否是唯一允许的图像资源名称分隔符？

除了逗号 (,) 之外，您还可以使用加号 (+) 作为图像资源名称之间的分隔符。例如：

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

等同于：

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

视频：通过 Photoshop Generator 创建 Edge Reflow 项目

视频：通过 Photoshop Generator 创建 Edge Reflow 项目这段视频会向您介绍如何创建一种 Web 版面，并使它能够响应从 320 像素到 1000 像素以上的屏幕尺寸。Chris Conversehttp://codifydesign.com

更多此类内容

• 视频 | 将资源提取为 Web 所用格式
• 详细了解 Photoshop 生成器语法
• 抽出资源