本文以微信社交對(duì)話框?yàn)槔M(jìn)行說(shuō)明如何切點(diǎn)九圖，其原則如下：
1.保留對(duì)話框周邊四個(gè)圓角；
2.保留對(duì)話框右邊的指向“三角”；
3.指定橫向（水平）、縱向（垂直）內(nèi)容范圍區(qū)域；
整個(gè)圖片在拉伸過(guò)程中，四個(gè)圓角和指向“三角”保持不變，這樣才能保證對(duì)話框不變形、不模糊。指定內(nèi)容區(qū)域范圍，是為了避免內(nèi)容溢出在對(duì)話框圓角和指向三角區(qū)域內(nèi)。
具體步驟如下所示：
第一步：畫(huà)好我們需要的對(duì)話框樣式；
第二步：將對(duì)話橫向距離減小到兩圓角之間為10PX（可以更?。╅g距，并用鉛筆工具在對(duì)話框上部中間（水平）標(biāo)注1*1PX矩形黑點(diǎn)（#000000，100%）；該黑點(diǎn)表示，該對(duì)話框可以橫向拉伸該區(qū)域致想要尺寸大小。
上圖最終切圖為放大圖，方便說(shuō)明（黑點(diǎn)、黑線、間距）更清晰。
注意，黑點(diǎn)與對(duì)話框之間保留1PX空白間距。
第三步：同樣的道理，用鉛筆工具在對(duì)話框的左側(cè)標(biāo)注1*1PX矩形黑點(diǎn)（#000000，100%）；該黑點(diǎn)表示，該對(duì)話框可以縱向拉伸該區(qū)域致想要尺寸大小。如下圖所示。
注意，黑點(diǎn)位置縱向高度低于右邊指向“三角”下部，說(shuō)明該對(duì)話框縱向向下拉伸（單方向）。
如果想要對(duì)話框縱向雙向?qū)ΨQ拉伸，指向“三角”保持在中間位置。則，需要左側(cè)縱向標(biāo)注兩個(gè)黑點(diǎn)，且距離三角距離相同。如下圖所示。
第四步：指定對(duì)話框內(nèi)文本縱向占位范圍。用鉛筆工具在對(duì)話框的右側(cè)標(biāo)注寬為1PX矩形黑線（#000000，100%）；該黑線表示對(duì)話框內(nèi)文本垂直范圍。如下圖所示。
第五步：指定對(duì)話框內(nèi)文本水平占位范圍。用鉛筆工具在對(duì)話框的下側(cè)標(biāo)注寬為1PX矩形黑線（#000000，100%）；該黑線表示對(duì)話框內(nèi)文本水平范圍。如下圖所示。
總結(jié)：通過(guò)以上五步，該對(duì)話框的點(diǎn)九切圖完畢。
如果沒(méi)有指定文本范圍區(qū)域，就會(huì)出現(xiàn)以下情況。如下圖所示。
切記，黑點(diǎn)、黑線一定要與對(duì)話框之間保留1PX間距。切出來(lái)的圖片命名為：“*.9.png”
