本文以微信社交对话框为例进行说明如何切点九图，其原则如下：
1.保留对话框周边四个圆角；
2.保留对话框右边的指向“三角”；
3.指定横向（水平）、纵向（垂直）内容范围区域；
整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。
具体步骤如下所示：
第一步：画好我们需要的对话框样式；
第二步：将对话横向距离减小到两圆角之间为10PX（可以更小）间距，并用铅笔工具在对话框上部中间（水平）标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。
上图最终切图为放大图，方便说明（黑点、黑线、间距）更清晰。
注意，黑点与对话框之间保留1PX空白间距。
第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。
注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸（单方向）。
如果想要对话框纵向双向对称拉伸，指向“三角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。如下图所示。
第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本垂直范围。如下图所示。
第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本水平范围。如下图所示。
总结：通过以上五步，该对话框的点九切图完毕。
如果没有指定文本范围区域，就会出现以下情况。如下图所示。
切记，黑点、黑线一定要与对话框之间保留1PX间距。切出来的图片命名为：“*.9.png”
