您的当前位置:首页正文

PNG图片处理方法

2022-09-09 来源:易榕旅网
非原创,原作者见谅

介绍一下这次教程的情况:

1.要会反编译。【反编译用的工具是apktool,大家可以论坛搜索一下,到处都是教程的】 2.电脑上得装有android SDK。【其实只要SDK目录下tools中的draw9patch工具,处理nine-patch图片的时候必须的。不想装SDK的同学百度一下draw9patch应该有的下载的。】 3.还需要足够的耐心。【机械般的重复动作比较多】

大家可以先把framework-res.apk反编译过来,然后定位到res\\drawable-mdpi这个文件夹看看。打开之后你是不是发现里面的图片和以往图片有所不同呢?

没错,反编译之后的图片也和xml一样现出原形了,一些需要拉伸的图片四周都多了一个像素的边框,带了一条黑线。这就是android UI 独特的图片格式*.9.png。它独特在哪呢?就是因为他有拉伸的特性。

比如普通的一个短信输入框,你发现他横屏和竖屏的情况下分辨率绝对是不同的,但是我可以很负责任的告诉你,两个框的图片却是同一张。但它却没有出现拉伸错误的现象,这就是*.9.png的威力了。

具体理解可以看看下面

图一为nine-patch图片拉伸的原理图,原始的nine-patch图片是在四个方向都有黑条的,黑条的宽度为一个像素,颜色为纯黑(RGB=000000)。编译后,黑条自动消失。上方和左方的黑条分别是横向和纵向的拉伸区域(用灰色强调了),如要横向拉升图片,将只会拉伸灰色区域。反之,如果只是普通图片,拉伸将会出现严重的失真(如图二)。

而下方和右方则分别表示内容的显示区域(也可以没有这两个内容区域横条,不影响一

般使用效果)。

图一

图二

下图就是android的SDK里面的nine-patch处理工具示意。

看了图片相信你就明白了,为什么自己用普通图形处理软件处理的图片放到手机上面的时候会拉伸不正常,导致修改失败。那是因为你没有经过特殊处理,直接用*.png格式的图片,当然会拉伸不正常。

好了,情况描述完毕了,我们进入教程。

如何将普通的*.png格式图片改成*.9.png格式?

步骤一:

提取样本和素材

先将一个有着官方UI的framework-res.apk反编译,得到反编译的文件。

将res/drawable-mdpi提取出来。将这个文件夹改成【样本】当然你也可以改成自己的,我选择改成样本是因为自己看着方便,下面的文件夹也一样,随便改,自己看着方便就行。

接着将你要处理的有定制UI的framework-res.apk也反编译,同样,将res/drawable-mdpi(不一定是这个文件夹,也有可能是其他文件夹,都在隔壁,打开看看就知道了)复制出来,将这个文件夹改成【素材】。

这个我建议,大家把普通的png图片和9.png图片分开放。这样方便修改些。这是我连续处理了将近4000个图标出来的经验„„全是自己手动一个个修改【含泪当中】 我就是将这些文件分别放入了【png素材】【9.png素材】【png样本】【9.png样本】这些文件再你处理好了之后就无用了。咱们只要成品。 文件准备好,打开图像处理软件。

这里我推荐使用【Paint.NET】。为什么?因为PS有些图片处理不了。看看下面的图大家就知道了。

相同图片打开之后却是两个结果,要问我是什么原因,我也不知道,我也给这个问题困扰过好久,后来还是在黑人的推荐下用了Paint.NET,才解决了这个问题。

好了,咱们接着讲„„

这里我以一个下拉的nine-patch格式的图标为例,给大家讲解。普通的png就不详细讲了。这都不会就不要往下看了哈。

首先打开要处理的图片。

打开之后需要修改分辨率。

按Ctrl+R弹出对话框。

这个时候就可以修改分辨率了。

现在就用的到刚刚提取出来的官方UI的样本文件夹了。

打开【样本】。找到这个相应的图片。选中它,在屏幕的左下角你能看到这张图片的一些信息,我们要的分辨率就在下面。

看图:

接着我们就可以将样本中的图片的分辨率输入到NET上面,将大分辨率的图片修改成一样的了。

虽然通过修改分辨率之后的图片的格式还是*.9.png,而且缩略图上面也显示还有四周的黑线在。不要以为那张图片还是原来的,实际上里面的黑框已经不在了,需要重新给它弄上去。可以用SDK里面处理图形的工具打开看一看,你会发现里面的拉伸效果实际上已经没有了,我们要自己重新处理过。

上面教大家将分辨率修改好了,下面咱们说说如何处理*.9.png。

这才是重头戏。

首先,打开android SDK下的tools中的draw9patch.bat。【关于SDK的安装百度一下,很多教程的。论坛也有,搜索一下即可】

这个就是*.9.png要用到的处理工具。

现在样本又派上用场了,修改*.9.png同样需要一个样本来和素材对照。除非你对这个图片已经了然于胸了,不然我劝你还是用我这个笨办法,虽然办法笨,但胜在稳。这个工具需要打开两个,一个是放样本的,一个是处理图片用的。

具体方法:

打开两个Draw 9-patch

你可以将样本放入第一个Draw 9-patch当中,直接拖动到软件里面即可。 然后将素材放入第二个Draw 9-patch中。

这个我建议是将两个窗口都最大化方便等会修改。

这个时候如果你切换一下两个窗口,你就明白我的意思了。

两个窗口互相切换你会发现有一个图片四周有黑条,一个没有。我们要做的就是将素材按照样本那样涂上一样的黑条。 看图:

大家看到了,这两个图片一个周围有黑条,一个没有,我们要做的就是把没有的那个也画上去。

提供一个简单的方法,让你方便修改。

按Ait+Tab键可以互相切换,你先把鼠标固定在样本的黑条上面不动,然后切换到素材上面,这个时候素材的这个位置就是你要涂黑的地方。

比如我要涂黑一个长条,我先切换到样本,将鼠标放到样本黑条的首位,定住不动,然后切换到素材上面,点下鼠标,黑条的首位就确定好了。然后用相同的方法把尾位也确定下来,两点确定一条直线嘛。中间连续一拉,一条黑线就解决了。这绝对是一个笨办法。但同样也绝对是一个有效的办法。

其他普通的*.png格式的图标不需要这样处理,直接修改好分辨率就能用了。

所有9.png的图片处理好后咱们需要另外一个工具将它打包,新发现了一个工具【Ultimate-d9pc】。此乃大神器也。移植皮肤必备的。

下面我们来看看他的使用方法

先下载附件

解压,如果杀软弹出提示,关了杀软。不放心的下载个沙盘,放里面运行。我以我的人格保证,这绝对是个安全软件。我自己就用两台电脑都试过。没问题。

会出现以下文件

解释一下,文件夹里面都是放9.png的图片的。后面那个exe是处理图片用的。

将刚刚咱们修改好的9.png图片全部选中,放到录里面。

这个目

然后双击xUltimate-d9pc.exe。接着就会弹出一个命令运行窗口。然后出来几行提示就会消失。电脑主机会“滴”的响一声蜂鸣。正常现象。

接着就会生成一个文件夹,

里面就是已经打包好的9.png图片。黑框已经没了。这些图片就可以直接用了,如果不经过这一步的处理。图片是无法直接使用的。放到apktool里面打包也不行。我原来就是想用apktool打包回去,后来发现很多错误。无奈只能放弃,后来发现了这个神器才有了解决

之法。

好了,重中之重的图片处理完了,接着将普通png和打包好的9.png放在一起。这就是整个框架里面的UI了。

将这些文件直接替换到你的framework-res.apk里面【具体方法参照我教程前三集】现在这些图片才可以直接用,如果不经过上面的处理,只是修改分辨率的话肯定会挂的。

这样咱们的UI移植就完成了。

Apktool反编译出来的文件也可删除掉了。那些文件只是起一个参照样本的作用。其他没什么用的。

童鞋们,上面的教程你们看懂了嘛。如果懂了,恭喜你„„你已经学会如何自己定制UI了,这就是UI的定制过程了。

不懂的话再潜水充电吧。

因篇幅问题不能全部显示,请点此查看更多更全内容