可通过插件在Sketch、PS、XD及Figma中进行切图,在PS中，用切片工具切图，然后切换到Dreamweaver（中文是梦想编织者，网页设计软件）里用的。

切图是将 设计稿还原成 Web 页面的过程，这个过程包括「切出素材」和「编写代码实现」；切图的主要目的就是给前端同学提供图片素材，可以让你从 html 或者 css 里引入图片。

推荐使用「摹客」

摹客切图功能：支持一键上传Sketch、PS、XD及Figma的设计稿，自动获取不同平台尺寸的切图，可以快速切换平台和选择倍率，也可以自定义设备尺寸，还支持切图压缩。

摹客标注功能：标注是摹客的特殊功能，除了自动生成的标注信息，还可以手动快速补充文字、间距、区域、颜色等信息，非常全面。

切图指的是将设计师的设计转化为网页，是一种将设计师的“理想”转化为“现实”的工作，将psd进行切片重组，利用div+css  js等等前端开发代码来生成网页的一种技术。

1、传统工具

用 PS 的切片工具把图标分割出来（通常先用辅助线把元素围起来，方便准确切割），然后存为 Web 所用格式，通常是存为透明底的 PNG 图，这样一个切图就做好了。当然，正常情况下是把一个页面上的图都切好，全部选中，批量导出。

2、设计软件+第三方插件

在 Sketch 或 PS 里把设计稿做好，再上传到第三方插件里去切，这样的好处是效率提高很多，缺点就是如果要修改设计稿或者有漏标的内容，要重新上传。

UI 设计师需要在正确的设计稿尺寸下进行切图，切图素材才能正常供给开发人员使用。否则产品开发落地后会出现图标变形，像素低等情况。
　　手机端常用的设计尺寸与它们对应的切图倍数
　　iOS：采用 750×1334 来设计，@2x 切图直接适配 750×1334 分辨率的机型，并向上向下适配主流分辨率(@2x/@3x)。
　　
　　设计稿750x1334px——切图倍数iOS@2x，iOS@3x
　　
　　Android：采用 720×1280 来设计，XHDPI 切图直接适配 720×1280 分辨率的机型，并向上向下适配主流分辨率(XHDPI/XXHDPI)
　　
　　设计稿720x1280px——切图倍数XHDPI，XXHDPI
　　
　　微信小程序(它的单位都是以i6的750px为划分点)
　　
　　设计稿750x1334px——切图倍数png24
　　
　　手机端网页、公众号链接等(与微信小程序统一使用i6，方便做单位转化)
　　
　　设计稿750x1334px——切图倍数

切图严格来说并不是Ui设计师的工作，而是前端工程师的工作，指的是将设计师的设计转化为网页，是一种将设计师的“理想”转化为“现实”的工作，将psd进行切片重组，利用div+css js等等前端开发代码来生成网页的一种技术。

在设计软件里手动切图用 PS 的切片工具把图标分割出来（通常先用辅助线把元素围起来，方便准确切割），然后存为 Web 所用格式，通常是存为透明底的 PNG 图，这样一个切图就做好了。当然，正常情况下是把一个页面上的图都切好，全部选中，批量导出。不过，现在这种方式，已经很少有人用了，效率太低了。设计软件+第三方插件在 Sketch 或 PS

摹客切图功能：支持一键上传Sketch、PS、XD及Figma的设计稿，自动获取不同平台尺寸的切图，可以快速切换平台和选择倍率，也可以自定义设备尺寸，还支持切图压缩。

摹客标注功能：标注是摹客的特殊功能，除了自动生成的标注信息，还可以手动快速补充文字、间距、区域、颜色等信息，非常全面

Photoshop,Adobe Illustrator等都是UI设计切图过程中必不可少的好工具。