米夏小雨
每人每天仅限5票，快给你心仪的作品鼓励的一票。
投票
0.0°
在今天的分享前我说个题外话，就是咱们UI中国有个编辑推荐的作品上首页的活动，活动传规则送门，然后欢迎大家向我提交你的编辑推荐作品！案列参考。
要求1.为你要推荐的编辑作品做一个900PX-500px的banner
要求2.将banner发送至我的邮箱：mixiaxiaoyu@gmail.com
要求3.发送banner时请附带该作品的链接，回复时间周期为一个工作日。
另外大家若有想要了解的东西，需要的资源，想了解的工具技法等等都可以留言或者私信我，也可以向我推荐优秀的作品哈！
正文开始
今天的文章可能篇幅较长，但是建议大家先看文章在看我提供的视频！我们先来用一张动图简单展示一下今天要讲的小技巧到底有什么功效，至于大家是不是都知道，咋也不敢问，咋还是愿意讲给大家！希望对你有那么点帮助吧！
今天要告诉大家的就是我在官方的PS技术帮助文档中看见的关于资源生成器的使用介绍，我觉得这个对于切图来说还是很不错的一个小技巧。这个功能在PS CC以上的版本中都是有的。首先我将会告诉大家怎么使用这个打开这个东西去使用，其次我会告诉大家关于这个资源生成器的一些命名语法。
1.打开方法
首先打开设置，在“增效工具”下，勾选“启用生成器”；然后在主菜单的“文件”-“生成”，勾选“图像资源” 在图层面板选择要导出的图层，把图层文件名改为如“icon.png”带图片扩展名的图层名，然后就完成了资源生成的全部步骤，就这么简单。生成的资源在文件同目录下、以“-assets”结尾的文件夹里。而且只要你不关闭生成器，那么你只要修改文件，切图的文件也将同步修改而更新！
2.正文讲解开始
1.1从图层或者组生成图像资源
为了更好的理解资源生成器，我给大家准备了一个简单的PSD文件，大家可以在文末右下角点击下载，也可以自己创建。
此文件的图层层次结构为两个组和一个矩形。而这些图层组中都包含五个图层。
然后我们按照以下步骤从此PSD文件中生成图像资源：
1.打开PSD文件，选择“ 文件”>“生成”>“图像资源”
2 将适当的文件格式扩展名（.jpg、.png 或 .gif）添加到您要从中生成图像资源的图层或图层组的名称中。例如，将图层组 Rounded_rectangles 和 Ellipses 重命名为 Rounded_rectangles.jpg 和 Ellipses.png；将图层 Ellipse_4 重命名为 Ellipse_4.gif。
注意：图层名称不支持特殊字符 ：和*
Photoshop生成的图像资会与源PSD 文件一起保存在子文件夹中。如果源 PSD 文件尚未保存，Photoshop 会将生成的资源保存在桌面上的新文件夹中。
注意：图像资源生成功能针对当前文档启用。启用后，无论何时再次打开该文档，功能仍然可用。要禁用当前文档的图像资源生成功能，请取消选择“文件”>“生成”>“图像资源”。
1.2从一个图层或者一个图层组生成多个图形资源
若要从一个图层/图层组生成多个资源，请用半角逗号分隔资源名称。例如，以下图层名称生成三个资源：
Ellipse_4.jpg, Ellipse_4b.png, Ellipse_4c.png
1.3将资源保存到子文件夹
您可以选择将特定图层/图层组生成的图像资源直接保存在文档资产文件夹下的子文件夹中。在图层/图层组名称中包含子文件夹名称; 例如：
[我是子文件夹名称] /Ellipse_4.jpg
这句话就是说，你按照上面这样命名，那么该图像资源就会在assets文件下创建新的文件夹，并且把该图像放在里面！
3.网页设计案列
对于多设备的WEB设计来说，从PSD生成图像资源是很有用的，我们来看看下面这个案列的图层结构
我们把logo和下面的网格图像提取成图像资源，把合适的图像扩展名添加到对应的图层就好了
注意:将从图层/图层组的内容中生成一个图像资源。例如，上面截图中的 AdventureCo Logo 图层组包含一个形状图层和一个活动文本图层。当从图层组生成图像资源时，这些图层会进行拼合。
Photoshop 生成资源，并将它们保存在与源 PSD 文件相同的位置。（本案列会有具体视频操作）
3.指定质量和尺寸语法
默认情况下，JPEG 资源会以 90% 品质生成。默认情况下，PGN 资源会以 32 位图像生成。GIF 资源会以基本 Alpha 透明度生成。当然您也可以自定义品质和大小。
JPEG资源的语法
1.1.1将所需要的输出质量添加到图层名称的后缀后面,格式为.jpg（1-10）或者.jpg（1-100%）
举例：
Ellipse_4.jpg5
Ellipse_4.jpg50％
都表示输出质量为50%的图像资源
1.1.2添加所需的输出图像大小（相应支持的尺寸单位px，in，cm和mm）作为资产名称的前缀。Photoshop会相应地缩放图像。
举例：
200% Ellipse_4.jpg（表示放大该图像200%）
300 x 200 Rounded_rectangle_3.jpg（表示输出该图像为300x200像素）
10in x 200mm Rounded_rectangle_3.jpg（表示长10英寸，宽200毫米）
注意：请记得在前缀和资源名称之间添加一个空格字符。如果要指定像素大小，则可以省略单位。例如，300 x 200。
根据说明，当指定所需输出图像大小时，可以混合使用不同的单位和像素。例如，4in x 100 Rounded_rectangle_3.jpg是资源生成的有效图层名称。但是我测试在文档本身为毫米的情况下混合使用单位会错写错误，这里请大家注意一下哦！
PNG资源的语法
2.1.1添加所需的输出品质作为该资源的名称后缀：8、24或者32
举例：
Ellipse_4.png24（表示输出png24）
2.1.2添加所需的输出图像大小（相应支持的尺寸单位px，in，cm和mm）作为资产名称的前缀。Photoshop会相应地缩放图像。
举例：
42% Ellipse_4.png
300mm x 20cm Rounded_rectangle_3.png
10in x 50cm Rounded_rectangle_3.png
GIF资源的语法
3.1.1添加所需的输出图像大小作为该资源的名称前缀：
举例：
42% Ellipse_4.gif
300mm x 20cm Rounded_rectangle_3.gif
20in x 50cm Rounded_rectangle_3.gif
品质参数对 GIF 资源不可用。
构建复杂图层名称
使用关键字default作为图层的名称。现在，输入要应用于从文档生成的所有图像资源的设置，生成资源命名图层时，您可以使用参数指定一个图层多个资源名称。例如：
120% Delicious.jpg, 42% Delicious.png24, 100x100 Delicious_2.jpg90%, 250% Delicious.gif
Photoshop 从该图层生成以下资源：
Delicious.jpg（缩放 120% 的JPG 图像）
Delicious.png（缩放 42% 的 24 位 PNG 图像）
Delicious_2.jpg（100x100 像素绝对大小，90% 品质JPG 图像）
Delicious.gif（缩放 250%的GIF图像）
在为同一个图层命名是，请在每一个不同名字之间加上逗号
为资源指定路径
可以为生成的资源指定文件路径，比如：
5.1.1在名为hi-res 的子文件夹中生成所有图像资源
[asset_folder]/hi-res/Delicious.jpg。
5.1.2在名为 hi-res 的子文件夹中生成所有图像资源。此外，资源名称的后缀为@2x。
[asset_folder]/hi-res/Delicious@2x.jpg。
5.1.3将缩小 50%的图像资源保存在文档资源文件夹下的子文件夹 lo-res中
50% lo-res/Delicious.jpg。
5.1.4从图层生成两个图像资源：
一个在hi-res 子文件夹中，图像资源名称的后缀为@2x 一个在 lo-res 子文件夹中，图像资源缩小50%
hi-res/@2x + 50% lo-res/Delicious.jpg。
除了逗号 (,) 之外，您还可以使用加号 (+) 作为图像资源名称之间的分隔符。例如：
42% Rounded_rectangle_1.png24 + 100x100 Rounded_rectangle_1.jpg90%
等同于：
42% Rounded_rectangle_1.png24, 100x100 Rounded_rectangle_1.jpg90%
其实图片格式还可以是WEBP和SVG，但是最新的官方语法里面没有提及这些，在这里我先不和小伙伴说那么多了，上面的这些已经够大家日常使用了！最后要告诉大家的就是如果你对技术这个东西有兴趣的话，就少看那些胡里花哨的教程吧！没事多翻翻软件官方提供的帮助文档 技术文档吧！好了，我们下期分享见！
全部评论：37条
更多作品
发表评论