王尘宇

点九图切图规范

本文以微信社交对话框为例进行说明如何切点九图，其原则如下： 1.保留对话框周边四个圆角； 2.保留对话框右边的指向“三角”； 3.指定横向（水平）、纵向（垂直）内容范围区域； 整个图片在拉伸过程中，四个圆角和指向“三角”保持不变，这样才能保证对话框不变形、不模糊。指定内容区域范围，是为了避免内容溢出在对话框圆角和指向三角区域内。

具体步骤如下所示：第一步：画好我们需要的对话框样式； 第二步：将对话横向距离减小到两圆角之间为10PX（可以更小）间距，并用铅笔工具在对话框上部中间（水平）标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以横向拉伸该区域致想要尺寸大小。

上图最终切图为放大图，方便说明（黑点、黑线、间距）更清晰。 注意，黑点与对话框之间保留1PX空白间距。 第三步：同样的道理，用铅笔工具在对话框的左侧标注1*1PX矩形黑点（#000000，100%）；该黑点表示，该对话框可以纵向拉伸该区域致想要尺寸大小。如下图所示。

注意，黑点位置纵向高度低于右边指向“三角”下部，说明该对话框纵向向下拉伸（单方向）。 如果想要对话框纵向双向对称拉伸，指向“三角”保持在中间位置。则，需要左侧纵向标注两个黑点，且距离三角距离相同。

如下图所示。 第四步：指定对话框内文本纵向占位范围。用铅笔工具在对话框的右侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本垂直范围。

如下图所示。第五步：指定对话框内文本水平占位范围。用铅笔工具在对话框的下侧标注宽为1PX矩形黑线（#000000，100%）；该黑线表示对话框内文本水平范围。

如下图所示。总结：通过以上五步，该对话框的点九切图完毕。 如果没有指定文本范围区域，就会出现以下情况。如下图所示。

切记，黑点、黑线一定要与对话框之间保留 1PX 间距。

把一张照片分成怎么九张

这里用PS CS6演示把照片九等分的操作流程： 一、打开PS软件，把照片拖入软件窗口内打开。 二、右键点击裁剪工具，右键菜单点击切片工具。

三、右键点击图层，右键菜单中点击划分切片。

四、在水平和垂直内分别输入3，点击确定，这时就可以把照片九等分。 五、接着Ctrl+Alt+Shift+S打开存储为Web格式窗口，点击存储。 六、选择保存目录，点击保存。 七、九等分后的效果如下图。

photoshop里怎么切割图片，把图片等分成9个单独的文件？

利用photoshop的切片工具可以切割图片，把图片等分成9个单独的文件。具体操作请参照以下步骤。

1、首先在电脑上用PS软件打开目标图片，然后点击软件界面左边的工具栏的“切片工具”。

2、然后用鼠标右键点击一下图片，在出现的菜单中点击“划分切片”选项。 3、然后在出现的窗口中，将横向切成3份，纵向也是切成3份，点击确定。 4、然后就可以发现素材被平均地分为9等份了。 5、然后点击文件下拉菜单中的“存储为Web所用格式”，在出现的窗口中将素材存为需要的图片格式，保存至电脑上即可。

完成以上设置后，即可在photoshop里切割图片，把图片等分成9个单独的文件。

利用Photoshop制作点9图

点9图（.9.png）是Android开发中一个特殊的图片格式，它能很好的解决我们的屏幕适配问题，项目中经常用到的地方就是聊天气泡，以及某些特殊形状的背景、边框等； 先来认识下.9图 这个就是我之前做的一个.9图，可以看到，这是一个带阴影，又带突出三角的气泡，在我的项目中，它是一个界面一些信息的背景 它有4条黑边 下面用两张图分别介绍一下“可拉伸区域”和“可填充区域” （绿色部分）左边上边两条黑线分别无限加宽，所占用的空间，就是.9图可拉伸的区域，四个灰色区域放大不受影响； 同样是想象两条黑线无限加宽，但这次取相交的区域，就是可填充区域 认识了.9图，具体怎么做呢？ 宽高各加两像素 将画笔设置为纯黑，大小1像素，硬度100 根据需求画完黑线之后，导出-存储为web所有格式，选择 PNG-24 最后一步，非常重要，这步不做，前面都白扯 重要的事情说三遍！！！ 到此 .9图就生成完毕了 一定要把它放在 res - drawable 文件夹下(根据切图大小，选择对应尺寸的drawable文件)，然后将.9图作为背景设置在指定View上