Photoshop
Sketch
Adobe XD

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 px1倍切图,40×40 px2倍切图,和 60×60 px3倍切图。
  • 又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px1倍切图,20×20 px2倍切图,和 30×30 px3倍切图。

  • 设备类型设计稿分辨率的选项,并不会影响您导出的图的尺寸。

  • 例如:您在 Photoshop 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px

  • Android 设计稿同理,需要您根据当前在 Photoshop 中的设计稿的尺寸,选择对应的正确的分辨率。

  • 导出画板与切图到 PxCook (推荐)
  • 先保存 Psd,然后点击导出到 PxCook即可将画板附带切图导出到PxCook中,将如下的 Photoshop 画板,按照如图所示的设置导出到 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 插件工具栏,激活第一个导出工具,弹出如下面板:

    设备分辨率选项,需要您根据当前设计稿的尺寸来进行选择(例如:您的设计稿是 iOS 设备且宽度为 375,那需要您将设备选择为iOS分辨率选择为1x)。


    设备类型设计稿分辨率的选项,只会决定标记的切图的生成尺寸,标记的切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的各个尺寸。

  • 例如:您在 Sketch 某个画板中,有个尺寸为 20×20 px 的标记切图,如果您将导出面板的当前设计稿分辨率设置为 iOS 1x,那么该标记切图会被同时输出为 20×20 px1倍切图,40×40 px2倍切图,和 60×60 px3倍切图。
  • 又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px1倍切图,20×20 px2倍切图,和 30×30 px3倍切图。

  • 设备类型设计稿分辨率的选项,并不会影响您导出的图的尺寸。

  • 例如:您在 Sketch 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px

  • Android 设计稿同理,需要您根据当前在 Sketch 中的设计稿的尺寸,选择对应的正确的分辨率。

  • 导出画板和切图到 PxCook
  • 将如下的 Sketch 画板,按照如图所示的设置导出到 PxCook:

    在 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 的导入对话框中,将会出现分辨率选择的下拉框,如下图所示:

    设计稿分辨率选项,需要您根据当前设计稿的尺寸来进行选择(例如:您的设计稿是 iOS 设备且宽度为 375,那需要您将设计稿分辨率选择为1x)。


    设计稿分辨率只会决定标记的切图的生成尺寸,标记的切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的各个尺寸。

  • 例如:您在 Adobe XD 某个画板中,有个尺寸为 20×20 px 的标记切图,如果您将导出面板的当前设计稿分辨率设置为 iOS 1x,那么该标记切图会被同时输出为 20×20 px1倍切图,40×40 px2倍切图,和 60×60 px3倍切图。
  • 又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px1倍切图,20×20 px2倍切图,和 30×30 px3倍切图。

  • 设计稿分辨率的选项,并不会影响您导出的图的尺寸。

  • 例如:您在 Adobe XD 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px

  • Android 设计稿同理,需要您根据当前在 Adobe XD 中的设计稿的尺寸,选择对应的正确的分辨率。

  • 导出画板和切图到 PxCook
  • 将如下的 Adobe XD 画板,按照设计稿分辨率 1x的设置导出到 PxCook 的一个iOS项目中:

    在 PxCook 中,进入画板,切换到 开发模式 ,即可在右侧边栏查看到如下的画板及切图数据: