ui设计中点9切图的制作方法有哪些？

 

draw9patch.bat工具的下载地址：

win

 

 

 

mac

 

下载后解压，打开里面的draw9patch.bat

最好是添加一个快捷键在桌面

苹果直接打开就可以用了

 

 

下面我以丝带为例，讲讲具体的制作方法：

 

 

1.打开draw9patch.jar，把导出的PNG文件拉进去（图片四周要预留1px）

 

 

 

ps：在处理图片的时候，你可以先缩短想要拉伸的部分，

 

2.我们在图片边缘点击左键，绘制出黑线，即图片需要被拉伸的部分。

 

下图，先给大家上一张图让大家了解4条黑线是什么意思

点九图格式规定由左侧和上侧来控制图片的拉伸，右侧和下册控制文字的显示区域。是什么意思呢？

 

拉伸区域：当实际程序中设定了对话框的宽高时，横向拉伸区域和纵向拉伸区域就会被拉伸成所需要的高和宽，呈现出于设计稿一样的视觉效果。

 

内容区域：为了让文字被输入框完整包裹，以达到显示效果的正常，所画黑线的区域就是你文字显示的区域，这样你的文字就不会超出对话框。(如果你害怕出错也可以把整一边都画上，让研发去调试,或者事先找研发问一下)
 

 

这是文字就会被控制在这一块(棕色)以内

 

如果失误多绘的部分，可按住shift键的同时点击鼠标左键擦除。

 

   说了半天.9.png的用法，那.9.png如何输出呢？有很多种方式可以输出.9.png，比如说用draw9patch.bat这个工具，或者简单一点，用photoshop直接输出。输出的方式是先输出普通的png资源，然后扩大画布大小，上下左右各空出一个像素，再用一个像素的铅笔工具（颜色选择纯黑色），上下左右分别画点就可以了，保存的时候注意把后缀修改为.9.png。
 

有两点需要特别注意下：
 

1.最外围的一圈像素必须要么是纯黑色，要么是透明，一点点的半透明的像素都不可以有，比如说99%的黑色或者是1%的投影都不可以有;

2.文件的后缀名必须是.9.png，不能是.png或者是.9.png.png，这样的命名都会导致编译失败。