用户指南 取消(C)

从图层生成图像资源

注意:

图像资源现在位于文件 > 自动 > 生成器插件
下。

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

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

有关如何创建和导出 Web 图形,请参阅如何从 Photoshop 导出各种格式的文件。

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

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

Photoshop 生成图像资源
示例 PSD 文件及其图层层次结构

此文件的图层层次结构具有两个图层组:Rounded_rectanglesEllipses。每个图层组均包含 5 个图层。

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

  1. 打开 PSD 文件后,选择文件 > 自动 > 生成器插件 > 图像资源
  2. 将适当的文件格式扩展名(.jpg.png.gif .svg)添加到您要从中生成图像资源的图层或图层组的名称中。例如,将图层组 Rounded_rectanglesEllipses 重命名为 Rounded_rectangles.jpgEllipses.png;将图层 Ellipse_4 重命名为 Ellipse_4.gif
注意:

图层名称不支持特殊字符 :*

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

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

注意:

图像资源生成功能针对当前文档启用。启用后,无论何时再次打开该文档,功能仍然可用。要禁用当前文档的图像资源生成功能,请取消选择文件 > 自动 > 生成器插件 > 图像资源

为云文档生成资源

如果您使用的是云文档,则资源将保存在“Photoshop Cloud Associates”目录中:

  • Windows:C:\Users\yourname\Documents\Adobe\Photoshop Cloud Associates
  • macOS:/Users/yourname/Documents/Adobe/Photoshop Cloud Associates

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

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

Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png

将资产保存在子文件夹中

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

[子文件夹]/Ellipse_4.jpg 

Web 设计使用案例

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

Web 设计及其图层层次结构

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

  • 将图像格式扩展名添加到适当的图层名称中。
Photoshop 为适当的图层/图层组重命名

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

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

注意:

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

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

Photoshop 生成的图像资源
生成的图像资源

指定品质和大小参数

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

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

JPEG 资源的参数

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

  • 添加所需的输出品质作为该资源名称后缀:82432。例如:
    • Ellipse_4.png24
  • 添加所需的输出图像大小(相对大小或以支持的格式:pxincmmm)作为该资源名称前缀。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 资源的参数

  • 添加所需的输出图像大小(相对大小或以支持的格式:pxincmmm)作为该资源名称前缀。例如:
    • 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 图像)

绝对缩放示例

绝对缩放的正确示例

  • 100x80 foo.png(简单绝对缩放)
  • 80 x 100px foo.png(长度之间的空格)
  • 4in x100 foo.png(单位和无单位的混合)
  • 90mm x120cm foo.png(不同单位混合)
  • 100x? Foo.png(通配符)
  • ?x60in foo.png(开头为通配符)

绝对缩放的错误示例

  • 100x100foo.png(文件名前没有空格)
  • 80x100 60% foo.png(绝对缩放和相对缩放混合)
  • 50% 80x100 foo.png(绝对缩放和相对缩放混合)
  • 20in cm x50cm foo.png(多个单位)
  • 30nm x20 nano.png(无效单位)

格式化并分隔多个文件

正确示例

  • Layer 1.png(允许在文件名中使用空格 -- 生成名为“Layer 1.png”的单个文件)
  • Layer 1.png,Layer 2.jpg(逗号作为分隔符)
  • Layer 1.png, Layer 2.jpg(逗号后跟空格作为分隔符)
  • Layer 1.png+Layer 2.jpg(加号作为分隔符)
  • Layer 1.png + Layer 2.jpg(加号后跟空格作为分隔符)

整合在一起

100% Delicious, 42% Layer 1.png24 + 100x100 Layer.jpg-90% , 250% Quux/Foo Bar Baz.gif 生成三个文件(忽略“100% Delicious”字符串,因为它不是文件名):

  • Layer 1.png,缩放率 42%,24 位 png 图像
  • Layer.jpg,100x100 像素绝对大小,90% 品质 jpg 图像
  • Quux 子文件夹中的 Foo Bar Baz.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. 单击确定
注意:

当您在首选项中禁用图像资源生成时,文件 > 自动 > 生成器插件菜单命令不可用。该功能仅能在“首选项”对话框中再次启用。

生成器插件菜单

在 Photoshop 桌面版本 25.11 的 2024 年 7 月版之前,生成器插件可以在文件 > 生成菜单下找到。

现在,所有生成器插件(包括默认的图像资源插件)都会出现在文件 > 自动 > 生成器插件菜单下。  此更改的目的在于增加子菜单名称的清晰度,并将子菜单与新的生成式功能(如生成图像)进行区分。

常见问题解答

更多此类内容

更快、更轻松地获得帮助

新用户?