在写页面之前，一个很重要的技巧就是裁图。根据UI设计的设计图，了解页面结构和操作后进行划分，取出开发过程中使用的图片资源。图片裁剪主要使用的工具有PS、XD等，此外，我们在开发过程中还会用到其他工具。下面介绍一些与图像处理相关的操作。1、分享一些网上的网站（1）图片转Base64：https://tool.css-js.com/base6...（2）图片格式转换：https://jinaconvert.com/cn/（3）少量图像压缩不失真：https://tinypng.com/（4）免费图标素材：http://669pic.com/（5）图形设计工具：https://www.chuangkit.com/二、FastStoneCapturescreenshot工具使用这是一款非常实用的截图软件，占用空间小，安装启动后是这个样子的。(1)打开文件(2)截取活动窗口(3)截取窗口(4)截取矩形区域，可以自己截图。（5）抓取手绘区域（6）抓取全屏（7）抓取滚动窗口，就像手机滚动截屏（8）抓取固定区域（9）录像机（10）输出（11)设置实用小工具我个人比较喜欢使用最常用的工具就是（7）、（9）、（11）中的小工具，比如拾色器、放大镜等。三、图片裁剪工具1、Photoshop：图像切割的必备工具。MOOC网站上有详细的视频讲解：https://www.imooc.com/learn/506图像切割是开发中非常重要的一步。裁剪之后，我们以后写页面的时候会事半功倍。我们在裁图时需要注意的是如何仔细裁剪图片的每一行。不，它是根据页面结构而有目的的。切，想想切出来的图片是否符合页面的需要。相比之前的版本，新版CC增加了一键导出功能，极大方便了我们拆分图片。2.XD：Adobe的另一款产品，原型制作工具。现在UI同事用的设计软件就是这个，所以直接用这个软件切图。本软件具有导出功能。一般我们直接选择我们需要的图片导出即可。需要注意的一点是要安装与设计图相同的网页字体，以免与设计图效果不一致。
