关于点九图的介绍及其制作

一、点九图的介绍

PNG,是一种非失真性压缩位图图形文件格式。PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性。PNG的的英文名称为Portable Network Graphics,即便携式网络图片。另有说法是名称来源于非官方的“PNG is Not GIF”。

在这里不过多的讨论PNG格式的定义问题,但是.9.png确实是标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1px的边框就是用来定义图片中可扩展的和静态不变的区域。特别说明,left和top边框中交叉部分是可拉伸部分未选中部分是静态区域部分right和bottom边框中交叉部分则是内容部分(变相的相当于定义看一个内边距,神似padding功能,后面我会单独介绍一下),这个参数是可选的,如下图,左图是显示top和left拉伸区域,右图是显示right和bottom的内容区域:


关于点九图的介绍及其制作_第1张图片
关于点九图的介绍及其制作_第2张图片


在Android中以9.png格式的图片为背景,则能够自定义拉伸而不失真,比如系统的Button就是一个典型的例子,不过最常见的我也最喜欢还是微信的对话框,我们拿它来举例看看效果:


关于点九图的介绍及其制作_第3张图片

从上图可以看出,使用点九图的话,其细节可以尽量保留,怎么拉伸都不会变形失真,怎么样?看到这里各位看官明白了吗?

其实呢,无论是left和top,还是right和bottom都是把图片分成9块(边角四块是不能缩放的,其他的四块则是允许缩放的),看下图数一数,123456789,正好九块,所以叫做9.png。


关于点九图的介绍及其制作_第4张图片

二、如何使用NinePng九图神器(一款安卓App)制作9.png图片?

前面已经了解到9.png格式的工作方式,下面我们使用这款专门处理点九图的App(不了解的读者可以到www.ninepng.cn网站去了解一下)来制作.9.png图片。

第一步:准备要拉伸的图片,并传输图片到此App上。


非常小的一张图片,这张图片有可能是在PC电脑上,刚用Photoshop创作完成,那么我就以此图片为例来讲解。

接下来我们需要把这张图片导入到手机上。

首先,在App中的设置界面打开【Wifi共享】,会得到一个IP地址


关于点九图的介绍及其制作_第5张图片

然后,在电脑上使用浏览器(推荐使用Chrome浏览器)访问这个IP地址(注意:必须是连接同一个路由器的电脑,可以是有线的连接,也可以是无线的连接)


关于点九图的介绍及其制作_第6张图片

这时,你就可以在电脑端直接上传图片了。点击【上传】按钮,然后上传你想要上传的图片即可。


关于点九图的介绍及其制作_第7张图片

App中会同步接收并显示所上传的图片

关于点九图的介绍及其制作_第8张图片

第二步:制作.9.png图片。

在App中点击chat_bg这张图,这时底部会出现一个菜单,如下左图,然后选择第一项——编辑,会进入到一个编辑点九图的界面,如下右图所示:


关于点九图的介绍及其制作_第9张图片
关于点九图的介绍及其制作_第10张图片

看到界面的上下左右各有一个耳朵形状的按钮了没有?点开它,然后开始拖动到合适的位置,上边和下边的按钮可以同时操作,同样左右也是。


关于点九图的介绍及其制作_第11张图片
关于点九图的介绍及其制作_第12张图片

这样,我们的left和top的拉伸区域就定义好了,right和bottom的内容区域也定义好了

然后,我们还需要把制作好的点九图保存下来。点击右上角的按钮,弹出一个菜单界面,点击保存按钮,保存为chang_bg.9.png。


关于点九图的介绍及其制作_第13张图片
关于点九图的介绍及其制作_第14张图片

如果你想看看你制作的点九图是什么效果,那么就点击右上角的三角形预览按钮,将会进入预览界面,并可以点击分别设置不同的内容和效果,比如我们一开始的效果。如果想增加一种分辨率的模拟器,可以点击右上角的“+”按钮。

关于点九图的介绍及其制作_第15张图片
关于点九图的介绍及其制作_第16张图片

如果还需要调整界面,那么就回到上一个界面继续重新拖动修改即可。

第三步,传给开发人员

刚才已经打开了【wifi共享】,会得到一个IP地址,如果还没打开,可以在【设置】界面点击打开上部的【Wifi共享】。如果要传给开发人员的话,请让开发人员在电脑上用浏览器(推荐用Chrome浏览器)访问这个IP地址(注意:必须是同一个局域网下,连接相同的路由器才行哦~),然后找到该图片,并下载保存在其电脑上。

这样开发人员就可以立即使用“刚出炉”的“热腾腾”的点九图了。

三、制作.9.png的高级技巧

对于点九图了解不深的人来说,这可以算是高级技巧,那就是:拉伸区域,可以不是连续的,可以不止一块,而且是和自定义的边框线的长度成正比。

点击耳朵按钮弹出的页面上边缘有个“+”号按钮,点击即增加一个,最多可以增加三个,直接上图说明:


关于点九图的介绍及其制作_第17张图片

其实,增加黑线仅仅是为了让我们观看更容易,在程序编译的时候,会自动把这些黑线代表的信息整合进png图片中。如果不信,你可以随便找一个APK文件,把.apk改成.zip,然后解压缩,在查看res/drawable相关目录下的图片文件。不过也有的仍然保留了四周的黑线。

四、最后送上一些使用九图神器App制作的其它图例的预览效果,以飨读者:


关于点九图的介绍及其制作_第18张图片
关于点九图的介绍及其制作_第19张图片
关于点九图的介绍及其制作_第20张图片
关于点九图的介绍及其制作_第21张图片
关于点九图的介绍及其制作_第22张图片
关于点九图的介绍及其制作_第23张图片
关于点九图的介绍及其制作_第24张图片
关于点九图的介绍及其制作_第25张图片
关于点九图的介绍及其制作_第26张图片
关于点九图的介绍及其制作_第27张图片

你可能感兴趣的:(关于点九图的介绍及其制作)