1. 插件对 Photoshop 的兼容性支持
支持 Photoshop CC 2015 及以上版本。
2. 开启插件
安装好 PxCook 3.9.x 及以上版本后。首次开启打开PxCook,即已经为您安装好全新切图插件。 打开 Photoshop (如果已开启,则需要您重启一下Photoshop,以确保插件被正确加载。) 通过 窗口 > 扩展功能 > PxCook-切图 开启插件。
3. 切图的标记与尺寸制定
在 Photoshop 的右侧边栏,找到PxCook-切图面板。
标记切图
选中想要切图的 图层 或者 图层组 ,然后点击切图面板上的 标记为切图 按钮。
当被标记为切图后,将在图层前面增加 p:: 作为标记。如果要取消切图,点击 取消标记 即可。
自定义切图的尺寸
需要确保被标记的图层为 图层组 ,如果不是图层组的话,需要将指定的图层进行打组。
之后我们在组内创建一个名为 @bounds 或 # 的图层,通过 矩形工具,在该图层内绘制一个矩形来描述要切出切片的范围,如下所示:
这样,上图中的 heart_icon 图层组即会按照组内的 @bounds 图层的范围来进行切图了。
4. 导出画板与切图到 PxCook 或 导出切图到本地
设备和分辨率的选择
该设备和分辨率选项,需要您根据当前设计稿的尺寸来进行选择(例如:您的设计稿是 iOS 设备且宽度为 375,那需要您将设备选择为iOS,分辨率选择为1x)。
设备类型和设计稿分辨率的选项,只会决定标记的切图的生成尺寸,标记的切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的各个尺寸。
例如:您在 Photoshop 某个画板中,有个尺寸为 20×20 px 的标记切图,如果您将导出面板的当前设计稿分辨率设置为 iOS 1x,那么该标记切图会被同时输出为 20×20 px 的1倍切图,40×40 px 的2倍切图,和 60×60 px 的3倍切图。
又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px 的1倍切图,20×20 px 的2倍切图,和 30×30 px 的3倍切图。
设备类型和设计稿分辨率的选项,并不会影响您导出的图的尺寸。
例如:您在 Photoshop 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px。
Android 设计稿同理,需要您根据当前在 Photoshop 中的设计稿的尺寸,选择对应的正确的分辨率。
导出画板与切图到 PxCook (推荐)
先保存 Psd,然后点击导出到 PxCook即可将画板附带切图导出到PxCook中,将如下的 Photoshop 画板,按照如图所示的设置导出到 PxCook:
在 PxCook 中,进入画板,切换到 开发模式 ,即可在右侧边栏查看到如下的画板及切图数据:
导出切图到本地
点击面板右下角【导出当前选中到本地】即可将当前选中的图层或组直接导出到本地文件夹中。
点击面板右下角【导出所有切图到本地】即可将当前Psd中所有标记为切片的图层保存在本地文件夹中。
之后在弹出的对话框中,可以选择需要导出的分辨率,默认为导出全部。