RSS
热门关键字:  open canvas 教程  风景插画  教程  painter  photoshop

[教程] MIUI主题制作教程

来源: 作者: 时间:2014-05-19 点击:
前言:前段时间有人问过我关于miui主题制作的问题,于是我就把miui论坛上的教程整理搬运过来了,加了一点自己的东西,想做miui主题的可以学习下1L的简单教程,看完之后差不多就可以自己制作miui主题了。
以下教程和工具整理自:

http://www.miui.com/thread-336945-1-1.html
http://www.miui.com/thread-133586-1-1.html
http://www.miui.com/thread-335430-1-1.html
http://www.miui.com/thread-83505-1-1.html

同时引用了miui主题在线文档:
http://www.miui.com/themeguider.html

主题制作看似高深莫测,其实说穿道破,也不过是将你将设计好的素材替换掉官方默认主题包的图片素材,然后打包成mtz格式的主题包就ok了!接下来,让我们一起来学习一下吧!

一、MIUI主题定义


    首先,我们手机的UI是由很多部分组成的,如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子,上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房,MIUI是在这之上的一个简装,自定义主题就是你自己给房子做的装修。
    MIUI提供主题自定义功能,其实就相当于帮你请了一个工程队,你可以用从众多装修方案(主题包)中选择自己喜欢的效果,最后交给工程队实施。而装修方案可大可小,大至全屋翻新,小到只换一盏灯。目前MIUI会自带两个主题包,达人们也可以设计自己的主题包,大家就可以借用达人们共享出来的设计。(引用foxtail,很经典的说明)

二、MIUI主题模板内文件说明

首先,咱们要需要一个模板来对应说明,下载模板:

解压后你会发现它并不是我们熟悉的后缀,而是一个MTZ后缀的文件,不用急咱们把它重命名为XX.zip即:将原来的.mtz后缀改为.zip,然后解压即可显现原型如下图:

具备以上几个文件就可以做一个简单的MIUI主题了,下面我们对以上目录做一个中文说明:

description.xml(主题配置文件包括:主题作者、版本号信息)
icons (桌面图标,所有被改动的桌面图标都会放在这个文件夹内)
lockscreen (锁屏样式)
preview (应用主题时预览图)

wallpaper(存放锁屏、桌面壁纸)
com.android.launcher(启动器)

本图中并未标出的项目请参见:
http://www.miui.com/themeguider.html

注:如果您在在线主题内下载主题,重命名为.zip解压后您会发现很多目录都成了无法识别的文件?例如文件夹icons变成了icons文件无法打开,简单处理方法:重命名为XX.zip解压后就能看到里面文件了。

三、MIUI主题包具体制作说明

1.描述文件---description.xml制作说明

step1.下载此文件:
(下载后需解压),并右键单击--编辑,打开后出现以下内容:

<?xml version="1.0" encoding="UTF-8"?>
<MIUI-Theme>
< title>蓝调透明</title>
< author>hfy166</author>
< version>V3.0</version>
< uiVersion>1</uiVersion>

</MIUI-Theme>

step2.将以上内容中绿色文字修改为自己想要填写的文字。
<title>主题名字(你可以取一个符合合适的主题名填写在此处)</title>
<designer>设计者名字(如果你是设计者可以填写你的名字)</designer>
< author>制作者名字(即为mtz主题包打包作者名)</author>

<version>此主题的版本号</version>
< uiVersion>1(此项默认填为1即可)</uiVersion>


step3.修改完后,将文本保存并关闭然后双击打开description.xml测试是否成功,如成功会出现如下显示:

至此咱们的配置文件就完成了。

注:以上关于 <uiVersion>位置 使用方法详见:这里(简单制作主题时候可以直接填写1即可)

2.wallpaper文件夹使用说明

wallpaper文件夹用于存放锁屏状态下壁纸和桌面壁纸,通常包含以下三个命名的图片:

default_wallpaper.jpg : 桌面壁纸,较佳图片尺寸:960X854(可其他尺寸)
default_lock_wallpaper.jpg : 锁屏壁纸,图片尺寸要求:480X854
default_lock_wallpaper_800.jpg : 高度为800像素的锁屏壁纸,图片尺寸要求:480X800

注意:
1.所要使用的桌面壁纸和锁屏壁纸的名称必须严格重命名为以上对应的文件名。
2.default_lock_wallpaper_800.jpg 仅在主题包包含default_lock_wallpaper.jpg 且 手机屏幕高度为800像素时自动使用。

3.icons文件夹使用说明

icons用于存放系统图标或第三方图标,图标为90X90尺寸的PNG图片。
我们需要将您制作的图标名称按照下面名称重命名并放入icons文件夹内,如果以下图标名称有多个就说明该图标需要多个相同图标不同名称图标,例如:电话图标对应了三个名称,我们就需要先将电话图标复制三份,并将三份图标名称分别命名为这三个名称。(主要为了简化操作)

电话图标使用名称:
com.android.providers.telephony
com.android.phone
com.android.contacts.TwelveKeyDialer

通讯录图标使用名称:
com.android.contacts
alias.ContactsShortcut
com.android.contacts.ContactShortcut
com.android.contacts.DialtactsContactsEntryActivity
com.android.providers.contacts

短信图标使用名称:
com.android.mms

浏览器图标使用名称:
com.android.browser

日历图标使用名称:
com.android.calendar

相机图标使用名称:
com.android.camera(安卓原生相机图标)
com.miui.camera(MIUI相机图标)

设置图标使用名称
com.android.providers.settings
com.android.settings

时钟图标使用名称:
com.android.deskclock
com.android.deskclock.DeskClock

email图标使用名称:
com.android.email

文件管理器图标使用名称:
com.android.fileexplorer

电子市场图标使用名称:
com.android.vending

主题风格图标使用名称:
com.android.thememanager

图库图标使用名称:
com.android.gallery

录音图标使用名称:
com.android.soundrecorder

计算器图标使用的名称:
com.android.calculator2

地图图标使用的名称:
com.google.android.apps.maps

天气图标使用的名称:
com.miui.weather

音乐图标使用的名称:
com.miui.player

备份图标使用的名称:
com.miui.backup

便签图标使用的名称:
com.miui.notes

其他未提及图标名称可以参见这个文档内的命名规则:

注:如有压缩包内未出现的图标想要修改,请用re文件管理器进入data/system/customized_icons_1查看图标的命名

    除了以上常规图标,我们还能够看到以上文档内出现icon_background、icon_border等名字的图标,下面我们来具体介绍下这类图标的作用和用法。MIUI为了统一第三方图标和系统自带图标风格的匹配给第三方图标定义了一个框架,分为三层上层、中间层、下层来约束第三方图标的风格。
第三方图标约束图标:
下层(背景层)图标命名:icon_background,第三方图标会自动匹配在这个背景层之上。如下图:
第三方图标背景图。

中间层图标命名:icon_mask,主要约束第三方图标显示范围,超过这个范围的将会被自动切掉。例如下图:
黑色框框为第三方图标限定范围,超出黑色框框将会被切掉。

上层图标命名:icon_border,用于覆盖在第三方图标之上。如下图:
:由于图标上半部分透明故此图标只有下半部分将会遮挡住第三方图标。

综合以上图标结合就会出现如下效果:
中间小鱼、微信、超级兔子、微博小图标是第三方图标自带图标系统会自动提取。

快捷方式约束图标(效果如第三方图标约束图标一样):
背景层图标命名:icon_shortcut,第三方程序快捷方式图标会自动匹配在这个背景层之上,此图标可与第三方图标约束图标的下层图标相同。
上层命名图标:icon_shortcut_arrow,用于覆盖在第三方程序快捷方式图标之上,此图标可与第三方图标约束图标的上层图标相同。


注:1.其中还有一个命名为icon_pattern图标,此图标是纹理图标,可以和icon_background图标相同。
2.以上第三方图标约束图标和快捷方式约束图标是根据自己设计图标的整体风格自主定义的图形规则,如果你不想约束第三方图标此处的图标可忽略。

4.lockscreen文件夹使用说明

lockscreen文件夹用于存放锁屏所需的图片文件,基本包括如下图片所示的文件:
(点击可放大图片)

以上图片显示的每一个文件分别对应锁屏状态下不同位置的显示,具体对应关系可参见:http://www.miui.com/themeguider.html  --锁屏
打开网页后具体操作方法如图所示:


以上主题格式较老,只需要查看以上主题格式对应关系即可,这里下载最新的锁屏原始对应包:
以便于查看具体文件尺寸和选择需要修改的文件。

如果想要制作更漂亮的百变锁屏可以去官方论坛找找相关教程,因为涉及较多代码不太适合新手就不在这里叙述了。


5.9.png图片的简单制作

1.什么是9.png
    拥有了制作好的图片文件和对应关系其实只是第一步,细心的人会发现锁屏文件内出现了很多.9.png格式的图片,它并不是png文件,而是安卓系统特有的文件类型。      
    9.png格式的图片是安卓平台上新创的一种被拉伸却不失真的玩意(挺高级的吧),也许有的同学在做美化的时候很喜欢一个图片素材,重命名替换了drawable-hdpi下的素材,但是运行系统后发现,怎么被拉伸得不像样子了,这就是9.png图片不能轻易碰的神奇所在,不过不要紧,下面看完你就会了。
    首先我们还是得介绍一下,9.png图片他的具体不同之处,它的四周与普通的png图片相比多了一个像素位的白色区域,该区域只有在图片被还原和制造的时候才能看到,当打包后无法看见,并且图片的总像素会缩小2个像素,比如23x23像素的9.png图片被打包后会变成21x21像素。所以我们在制作的时候要注意掌握尺寸。
    当我们制作出9.png图片的时候你还有惊奇的发现一个几KB或者几十KB的图片,变得非常的小,一般只有几百个字节那么大,系统加载起来当然会更加的流畅咯。

2.工具安装与使用
1.工具的安装:
    这里介绍一个自制简单好用的9.png处理工具:Nine-Patch Editor,具体下载安装详见2L
,再次感谢作者。

2.工具的使用:
●打开9-patch.exe程序出现下图:



●将要修改的图片拖入灰色背景框内出现下图:



注:左边部分图片是处理后的效果图,右边中间天蓝色部分为要处理的图片,我们主要处理的是图片边缘一圈绿色边框。

●将鼠标放在绿色边框处,点住左键不放拖动,会出现黑色线条如图:



说明:
1号黑色条位置向下覆盖的区域表示图片横向拉伸时,只拉伸该区域。
2号黑色条位置向右覆盖的区域表示图片纵向拉伸时,只拉伸该区域。   
3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域(在手机上主要是文字区域)。
4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域(在手机上主要是文字区域)。
没有黑色条的位置覆盖的区域是图片拉伸时保持不变(比如,如果图片的四角为弧形的时候,当图片被任意拉伸时,四角的弧形都不会发生改变)。
5、如果失误多选了部分,点击鼠标右键去掉黑色条,也可按住右键不放拖动。
6、左边区域为显示当前拉伸效果。
7、选择好区域后,点击右上保存-来保持处理好的图片,后缀名为xxx.9.png。


3.简单的使用方法
Nine-Patch Editor工具支持Ctrl+C复制、Ctrl+V黏贴功能,我们只需要分别将原始包内自带9.png图片和要处理的图片拖入工具,点击原始包内图片(此图片已经处理过)复制,然后点击待处理的图片后黏贴就可以轻松处理图片。

6.com.android.launcher文件夹的使用说明
这里简单介绍几个重要部分的制作替换。原始包下载:


folder_background:文件夹样式,具体位置如下图:




hotseat_background:桌面底部图标托盘样式,具体位置如下图:



我们只需将图片制作好后按照对应名称放入com.android.launcher/res文件夹内即可。

7.preview文件夹的使用说明

    预览图都放在主题包的preview目录下,在预览时最大支持10张预览图。为了便于真实体现主题包效果,所有被官方收录的主题包,都有我们统一制作预览图;同时,为了充分表达主题包的蕴含,需要制作者提供一张预览图作为该主题的封面;该封面会在主题管理器程序缩略图列表中展示。
主题包各模块预览图命名规则如下:
自定义封面预览图为preview_cover_0.jpg, 仅支持一张;

系统风格的预览图为preview_0.jpg, preview_1.jpg,...以此类推开始;
桌       面的预览图为preview_launcher_0.jpg, preview_launcher_1.jpg, ...以此类推开始;
图标风格的预览图为preview_icons_0.jpg,preview_icons_1.jpg,...以此类推开始;
锁屏样式的预览图为preview_lockscreen_0.jpg, preview_lockscreen_1.jpg, ...以此类推开始;


四、打包MTZ主题包
1.简单实用的打包方法:
以上全部工作做完后,我们需要对其进行打包处理,以便于系统识别使用,下面来介绍下具体打包步骤:

step1.将所有文件框选后右键--添加到压缩文件--选择zip压缩格式--进行压缩。
step2.将压缩包文件名重命名,将其后缀.zip更改为.mtz,至此打包就完成了。
step3.将制作好的.mtz包放入手机SD卡根目录打开系统文件管理器--SD卡--选择.mtz主题包--应用进行测试。

2.专业新版格式打包方法:
主题包的新格式约定如下:
    主题包根目录下,仅允许 文件 或 以wallpaper、fonts、boots、ringtones、audioeffect 和 preview命名的子目录,存在举例:

旧格式主题包中,图标都放在icons目录下,现在不允许主题包中存在icons目录,因此,只需将进入icons目录,将所有资源打包成一个压缩文件并命名为icons即可。
为方便打包, 附件提供了自动打包程序,该程序运行需要java运行时环境;



关于java运行环境安装,请进这里以上两种打包方法任意一种均可,随自己喜好进行选择!


最后,要向大家说明的是:以上教程均在win7系统下进行,并且需要安装rar压缩工具。
最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
栏目列表