文 | 豆豆
来源公众号 | 写给设计 （ruodesign）
Hi,亲爱的设计师：
今天，是你2018年上班的第二天，怎么样？是不是精神饱满，干劲十足呢？我们总会是在新一年的开始，给上一年画上一个句号，不管是不是圆满。生活嘛，总是要从新开始的。
今天，有朋友问了一个问题：点九切图要怎么切呢？我明白原理，可是怎么切法确实有些不明白。
点九（.9.PNG），对UI设计师来说，不常用到，但用到的时候却是很重要。
刚入行时，开发那边就告诉我：这个图，你要用点九来切。嗯，点九，啥是点九？我在开发那边不好意思问，点点头：“没问题”。
然后赶紧回来X度，介绍的不少，可是还是看的稀里糊涂的。按照网上说的方法切、切、切，完了自信的交给开发。开发用怀疑的口吻问我：不行啊，你是不是切的不对啊，你看，这、这，还有这都变形了。
额，.9.png,你真的好烦人啊！
点九，具体是个什么东西呢？咳咳，这个嘛，这个......它是Android系统特有的一种图片格式，文件扩展名为.9.PNG。废话，要是IOS有，负责IOS的开发不早告诉我了！（一脸的不屑！）
1.什么情况下可以用到点九图呢？
我们先来看一个例子，这里是一个圆角矩形：
因为Android有太多的分辨率了，当圆角矩形控件在被拉伸放大的时候，圆角的部分就会出现模糊的情况。而点九切图就不同，它可以保证不管你上下还是左右拉伸，放大都可以保持原有的清晰度。
而且，你仔细比较一下，会发现：普通的拉伸效果，圆角部分也跟着变大了；点九下的效果圆角部分，原来是多大就还是原来的样子。
（呼，解释还真累人~）
2.点九切图的原理是什么？
点九，就是将图片横向和纵向随意进行拉伸，却可以保留像素的精细度、渐变质感和圆角的大小不发生变化，以实现多分辨率下的完美显示效果。
九宫格，你肯定知道，就是把一张图片，分成九个部分：4个角落、4个边和1个中心部分。
我们在微博当中发的图片，就是九宫格样式的。
同样的道理，点九切图法，就是相当于把一张png图分成了9个部分（九宫格）。这样就可以保证在不同的分辨率下，以及在界面改变方向后,界面上的图形不会因为长宽的变化而产生拉伸,造成图形的失真变形。
（还是不明白！）
盖房子的你知道吧？你要盖一座房子，不对，是已经盖好了。但是现在你觉得小了点，想再宽一点，再长一点，你怎么办？
A.全部拆了重新盖；
B.我只拆四个角，然后延长，再把四个角按照原来的样子重新垒好。
你选哪个？当然是B了。
现在，你盖的房子更宽了，也更长了，四个角的大小变了吗？除了位置，大小还是原来的样子。你只不过是把中间的部分增加了而已。
（这样好理解了吗？）
那么，通过上面的例子，我们大体知道了：哪里是可以拉伸的，哪里是不需要拉伸的？
你可以把这个当做一个俯瞰下的房子。
（1）1.3.7.9这四个部分，是屋角，要保持原来的样子，所以是不拉伸的；
（2）5，这一部分是房子的里面，放东西和住人的，要随着长宽的变化而变化的，身不由己，没办法；
（3）2.4.6.8这四个部分，是四面墙，是可以拉伸的。前面说的就是这部分的变化。（它们的拉伸，就相当于是5这块被拉伸了。）
那具体我们可以总结为：圆角（不需要拉伸）、除了圆角之外的边（需要拉伸）。
（噗~~~我有点缺氧！）
3.怎样操作？
我们以对话框举例说明：
首先，我们简化一下切图文件，“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。
在这里，我标注了每一部分是什么：
（1）1和2是横向和纵向拉伸的区域；
（2）3和4是内容在横向和纵向要显示的区域。
你可以看到，上下左右都有一个黑色的线段。
你要问了，那个对话框凸出来的那个角怎么办的呢？
首先，它跟圆角一样，是不能被拉伸的（要不就变形了）！这点你要记住了。你看到我画的线段2了吗？标线2的上端的开始，正好是那个角的下端。也就是说，我纵向拉伸的区域，是不包括那个角的。
你在看右边的4，为什么涵盖了三角呢？4是什么？是纵向显示的内容区域，也就是说，如果你在里面写一段话，纵向上扩展，向上我可以扩到三角的那个位置（当然，你也可以选择不可以，看你的排版，如果觉得好看的话！）。
你还需要注意：
（1）你的.9.png必须绘有拉伸区域的黑线；
（2）黑线1和3的高度必须是1px,2和4的宽度必须是1px.
（2）手绘的黑线拉伸区必须是#000000，透明度100%，并且图像四边不能出现半透明像素；
4.显示内容区域的标注有什么意义呢？
你可能会问：我拉伸四个边，只需要标注两个边就可以了呀，就是1和2，也就是上和左的位置，下和右不就同时拉伸了吗？我再标下和右（3和4）没有什么意义了呀？
上面我们也提到了这个，那再我给你举个例子：
在这里，你会看到，当你标注了内容显示的区域（下和右位置）的时候，即便做了拉伸，文字也会保持在这个区域内。而如果你没有标注内容显示区域的时候，就会使这样子：
错误的标注方式会让排版看起来很混乱。所以我们需要修正内容区域的线段位置和长度。
把横向的内容区域缩短到圆角以内，纵向的内容区域控制在输入框的高度以内，这样文字就可以正常显示了。
5.我可以使用什么工具切出来呢？
嗯，有很多种方式可以输出.9.png。
（1）使用draw9patch.bat这个点九切图工具；
（2）使用cutterman插件
（3）自己动手，丰衣足食：用photoshop直接输出。
在这里要提醒一下：如果你用插件来切图，有的时候开发那边是用不了。最好还是，你自己动手，在PS里切出来。
对于使用draw9patch.bat和插件来切图，我在这里不做过多的介绍，如果你想了解，可以X度。
我们主要讲一下自己动手，丰衣足食(在PS里怎样操作)？
（1）你先输出普通的png文件，用选区工具选取尽可能多的拉升部分加以删除，也就是说，可有可无的部分，就是无。(节省资源吗~浪费是可耻的，也是毫无意义的呀！)
（2）然后，把剩下的这些可有的内容拼成一个整体。
（3）把画布上下左右各扩大1各像素。
（4）用一个像素的铅笔工具（颜色选择纯黑色），上下左右分别画黑色线段就可以了。（你要注意圆角部分，你的文字内容区域部分......）
(5)最后，保存为.9.PNG格式的文件就可以了。注意别保存错了格式。
最后，还是要提醒一下你：1px线段必须是纯黑色（#000000），一点点的半透明都不可以有(你所标注的黑色线段，在程序最终输出的效果中不会被显示，请放心)。
（是不是很容易呢？哎呀，我有点小得意，哈哈~）
6.最后一个问题：有阴影怎么办？
对于有阴影的的控件，如果你不考虑阴影，往往会造成一些错误，比如文字的排版和预想的不一致。
你会看到（什么？你看不到？拜托，可以放大下吗？），原本居中的文字，在实际开发过程中向下移动了。这是因为我们画点九的时候，把投影的高度也画进去了，所以视觉上文字就偏下了。
所以：切图时，内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。
写在最后：
合理的运用“点九”切图，会给你和安卓开发人员带来很多的方便，而且还可以大幅的减少资源的大小。
对于点九切图，不要觉得它很麻烦，其实当你真的上手一遍的时候，会发现它很简单！不管你怎样去做，都可以去尝试，探求更省时省力的办法。
好了，不多说了。希望写给设计的这篇文章对你有一点点的帮助。
在公众号后台留言回复：“点9”（不是在文章留言哦，当然，欢迎留言~），就可以获取“点九”切图工具Draw9patch（Win和Mac都有）。