前端工具【3】—— 图片处理

在写页面之前，很重要的一个技能是切图，根据UI设计的设计图，在了解页面结构和操作后进行分割，取出自己在开发过程中是用到的图片资源。
切图主要是用的工具就是PS、XD等等，除此之外，在开发过程中我们也会用到其他工具，以下介绍一些有关于图片处理的操作。

一、分享一些在线网站

（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/

二、FastStone Capture截图工具的使用

这是一款非常实用的屏幕截图抓取软件，占用空间小，安装启动后是这样的。

（1）是打开文件
（2）捕捉活动窗口
（3）捕获窗口
（4）捕获矩形区域，可自行截图。
（5）捕获手绘区域
（6）捕获全屏
（7）捕获滚动窗口，就像手机滚动截屏
（8）捕获固定区域
（9）视频录像机
（10）输出
（11）设置实用小工具
我个人比较喜欢使用的工具就是（7）、（9）、（11）里面的小工具，想拾色器、放大镜等。

三、切图工具

1、Photoshop：切图仔必备，在慕课网上有一个详细的视频讲解：https://www.imooc.com/learn/506
切图是开发中很重要的一步，图片切好了对于后面我们写页面会是事半功倍，在切图中我们需要注意的是怎么切，是不是把每一行张图都很仔细的切下来呢，不是的，是根据页面结构，有目的的切，要想想切出来的图是否符合页面的需求。新版的CC比之前那些版本增加了一键导出功能，这个功能很大程度方便了我们拆分图片。

2、XD：Adobe公司的另一个产品，原型设计工具，现在UI同事使用的设计软件是这个，所以我就直接使用这个软件切图了，这个软件带有一件导出功能，一般直接选择我们需要的图片导出就行了，需要注意的一点就是要安装与设计图相同的网络字体，以免和设计图效果不一致。