适合设计师的.9切图方法

 整理下自己研究的适合设计师的.9切图方法，之前看了很多篇的教程，基本概念相同，但做出来适配总是出错并且耗时较长，所以把自己用的方法分享出来，不了解.9切图的请自行百科，不再做名词解释。

首先概述下工作中碰到的问题：

需要3中尺寸的适配，hdpi、xhdpi、xxhdpi，起初只导出一种尺寸来做适配，结果三种尺寸适配上效果都不是很理想，最终决定还是做3种尺寸的适配。

使用的工具：

Sketch、Photoshop

方法：

①.需要先准备好需要做成.9的图片（如左图），然后保证圆角等不需要被拉伸的部分不变的情况下缩小整张图（如右图），并导出所需的三种尺寸，画板命名记得添加.9，这样可以节约时间（由于sketch作图，所以这一步用sketch完成，ps亦可，工具选自己常用的就好）

②.打开ps开始制作.9图（本打算都用sketch完成，但是从sketch导出来的图程序无法编译，所以这一步还是用ps完成）

自己用ps写了两个动作，节约了大量的时间，一个是画布相对各扩大1px，然后换成铅笔工具，前景色改为纯黑#000，另外一个是psd格式导出为png。

批处理第一个动作，然后每个图自行点黑点儿（写入动作里的话有误差，手动画相对更精确），保存psd，关闭文件。

完成以上动作后，在批量执行第二个动作，就可以完成啦。

相对来说效率还是蛮快的，并且手机上预览都非常的完美。3套尺寸用时大概1小时左右（时间还是好长，两步花的时间差不多，各半小时左右）。以上就是自己做.9图的一点心得，如有不当之处还请指出。

———————— 2017-05-23 追加 ————————

有人问另外一种需要填充内容的.9图怎么做，追加一下。

被公司的工程师妹子安利了这个预览.9图的神器，一本满足，如果用这个工具就可以忽略ps那一步手动点点儿的操作了，而且还可以直接看到效果图，再也不怕做错了。

神器可以在文章末尾下载（MAC版，Windows自行搜索，有很多）。

先附上案例两枚：

01.右图紫色区域属于文字填充区域效果预览（对应左图右侧与下侧的横线交界处）

02.三角不可调节大小并且保持在中间的一种情况，保持两个点到左右两侧等距即可。

结束~有不明白的可以再留言问我~