像素妹儿发现很多同学在学完之后依然对切图不是很明白，今天UI设计培训像素妹儿就专门讲讲这个问题。
为什么要切图？
切图这一技术诞生的背景与网速有着十分密切的联系。
在遥远的上古时代，当时采用的还是拨号的上网方式，网速通常只有几十KB/S，打开一张图片等待十几分钟是常有的事，如果一个网站图片过多，那对用户而言简直是个噩梦。为了解决这个问题，当时的技术人员便发明了切图这一技术。
电影《泰囧》中徐峥在国外网速差，一张图片很长时间都无法加载完成
该技术的核心是化整为零，将一张大图切分为几个小部分，由于每部分都相对较小，在相同的带宽下网速便会有一定的提升。打个比方，我们把一辆大货车分成几辆小货车，都是拉同样多的东西，但是道路相对变得宽阔了很多，车速自然就上去了。
随着技术的发展，如今的网速与之前有着天壤之别，网速对用户体验的影响已经很小了，但是在某些特定的场景下依然会出现网速差的情况，比如在人群密集的地方或者在乘坐高铁时，所以切图这一技术一直保留到现在。
除了解决图片加载的问题，还有另一种需要切图的原因，那就是个性化设计。
造型生动、色彩丰富的图标有效提升了产品的视觉感受
现在不管是移动端设计还是网页端设计，为了更好吸引用户目光、拉开与竞品的差异，设计师往往会做一些特别的设计，页面中有大量的精致的图标和特殊造型的装饰元素，这些东西工程师无法用代码实现，便需要设计师将其切出来以图片的形式置于页面之上。
以上便是切图的两条最重要的原因，第一条主要针对网页设计，第二条则主要针对移动端设计，网页设计略有相关。
切图的方法
刚才我们讲了为什么要切图，接下来我们简单聊聊切图的一些方法。
网页设计中一般使用PS自带的切片工具进行切图，这一工具在电商设计中也经常使用。它最大的优点是简单方便，适合切比较规则且面积较大的网页。当然它的缺点也十分明显，那就是它只能切层叠起来的图层，不能切单个图层。
如果想要对单个图层进行切图，例如界面中常见的各类图标，那就只能用手动导出或者第三方切图插件。手动切图直接在图层上右键选择快速导出png就可以。切图的第三方插件有很多，比较常见的有蓝湖、摹客、measure、zeplin等等，这些插件不仅提供基础的切图功能还有页面标注、多倍图导出和团队协作等众多辅助功能，极大地减轻了设计师的工作负担，目前已经成为主流的切图解决方案。
手动导出单个图标
目前常用的几款切图类工具
工作中如何应对切图
在实际工作中，网页是不需要设计师进行切图的，因为设计师切的图与工程师想要的大多时候并不一致，由设计师切图会造成很多沟通上的麻烦，所以网页设计一般由前端工程师自己负责。以后从事网页设计的同学在做完项目后把源文件直接发给你的前端同事就可以了，从此再也不用加班了，美滋滋～～～
如果是做移动端产品的同学，那就要稍微辛苦那么一丢丢了，你需要使用插件把要切的图标标注出来，然后上传到云端，再把项目链接丢给你的前端小伙伴就ok了，是不是同样很简单呢？
由于切图需要跟工程师进行对接，大多数同学没有这方面的经验，所以总会心里发虚，害怕自己工作中做不好，其实大可不必担心。
切图主要是一个流程性的工作，本身没有什么能力要求，不会存在不会切图的情况，而且随着技术的发展，标注和切图这类繁琐的工作将会变得越来越简单，甚至完全由机器替代也是有可能的，所以同学们的重点在于做好跟程序员的对接和沟通，只要试过一两次就可以完全上手。
好了，今天的分享就是这些，如果大家还有其他问题请在下方留言告诉像素妹儿吧～