Photoshop
Sketch
Adobe XD

1. 对 Photoshop 的兼容性支持

支持 Photoshop CC 2015 及以上版本。

2. 开启插件

安装好 PxCook 3.9.x 及以上版本后。首次开启打开PxCook,即已经为您安装好全新切图插件。 打开 Photoshop (如果已开启,则需要您重启一下Photoshop,以确保插件被正确加载。) 通过 窗口 > 扩展功能 > PxCook-切图 开启插件。

3. 选择对应的设备类型及设计图尺寸

在 Photoshop 的右侧边栏,找到 PxCook-切图面板。选择好对应的设备类型设计图分辨率

4. 切图的标记与尺寸制定

  • 标记切图
  • 选中想要切图的 图层 或者 图层组 ,然后点击切图面板上的 标记为切图 按钮。

    当被标记为切图后,将在图层前面增加 p:: 作为标记。如果要取消切图,点击 取消标记 即可。

  • 自定义切图的尺寸
  • 需要确保被标记的图层为 图层组 ,如果不是图层组的话,需要将指定的图层进行打组。

    之后我们在组内创建一个名为 @bounds# 的图层,通过 矩形工具,在该图层内绘制一个矩形来描述要切出切片的范围,如下所示:

    这样,上图中的 icon1 图层组即会按照组内的 @bounds 图层的范围来进行切图了。

    5. 导入到 PxCook 或导出到本地

  • 导入到PxCook (推荐)
  • 先保存Psd,然后点击 导出到PxCook 即可将画板附带切图上传到 PxCook 中。进入画板,切换到 开发模式 ,即可在右侧边栏查看下载切图。

  • 导出到本地
  • 点击面板右下角【导出当前选中到本地】即可将当前选中的图层或组直接导出到本地文件夹中。

    点击面板右下角【导出所有切图到本地】即可将当前Psd中所有标记为切片的图层保存在本地文件夹中。

    之后在弹出的对话框中,可以选择需要导出的分辨率,默认为导出全部。

    1. 对 Sketch 的兼容性支持

    支持 Sketch 46 及以上版本。

    2. 开启插件

    安装好 PxCook 3.9.4 及以上版本后。首次开启打开PxCook,即已经为您安装好全新的 Flavor 切图插件。 打开 Sketch (如果已开启,则需要您重启一下Sketch,以确保插件被正确加载。) 插件会出现在 Sketch 的右边栏,如下图所示:

    3. 标记切图

  • 方法 1 :创建和图像尺寸一致的切图
  • 选中想要切图的 图层图层组 或者 Symbol,然后从界面右下角选择 Make Exportable

  • 方法 2 :创建自定义尺寸的切图
  • 选中想要切图的 图层图层组 或者 Symbol,然后从界面左上角选择 Slice 或按下快捷键 S 激活 Slice 功能,在想要切图的图像区域,画出想要的尺寸即可。

    如果想要切出的是背景透明的图层,请将切片和所切图像的图层分组在一个文件夹下。同选择切片并勾选 Export Group Contents Only

    4. 导出到 PxCook

    在 Sketch 的右侧边栏,找到 Flavor 插件面板。选择一个选项“导出”,在弹出的面板上,选择好对应的设备类型设计图分辨率。点击 导出到 PxCook

    1. 对 XD 的兼容性支持

    支持 Adobe XD 12.0 及以上版本。

    2. 开启插件

    安装好 PxCook 3.9.6 及以上版本后。首次开启PxCook,即以为您安装好对 Adobe XD 导出设计稿的支持。 打开 Adobe XD(如果已开启,则需要您重启一下 Adobe XD,以确保插件被正常加载。)

    3. 标记切图

    您可以在 Adobe XD 的图层中,激活“添加导出标记”图标,如下图所示:

    或在 Adobe XD 的右边栏中最后一个分栏中,将“添加导出标记”勾选上,如下图所示。

    4. 导出到 PxCook

    在 Adobe XD 中,通过菜单 文件 > 导出 > PxCook 导出当前设计稿。

    如果您的导出画板包含切图,那么在 PxCook 的导入对话框中,将会出现分辨率选择的下拉框,如下图所示:

    其分辨率默认为当前项目顶栏中选择的分辨率,但您可以继续在导入对话框中手动进行修改。切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的其他分辨率大小。