×

何制作

如何制作魅族主题?

admin admin 发表于2022-06-19 08:45:05 浏览112 评论0

抢沙发发表评论

在学如何制作魅族主题之前,首先建议配备一台刷有最新稳定版Flyme 5系统以上的机器,如MX5、Note3等。(注:图文比较长,建议在wifi下浏览)

接下来我们需要八步骤:

第一步:魅族开发者帐号申请示意图

搜索“魅族开发者中心”或者登录网站“”

注册流程,傻瓜式的,按着步骤来就好!

当跳转至该页面时,选择“个人开发者”(本教程主要面向个人)。

跳转至该页面,完善个人真实信息,才能通过审核!

最后“保存”,即为提交审核。

可在右上角“我的”点击一下,查看审核进度!一般3~7天即可通过审核。

第二步:开发者身份审核通过后的主题制作准备工作

在右上角“我的”-“我的主题”点击,则跳转到该页面。再选择“账户管理”,编辑开发者身份的信息,包括收款方式及帐号等信息,不可填错,关呼到你个人设计制作的作品所获得的经济收益。

点击“主题工具”,这是每个主题诞生的必经之路。你可以在这里上传发布你已经设计好的主题,也可以在这里下载最原始的魅族主题模板。

图中:“主题素材包下载”、“主题在线制作”、“主题预览工具”三个模块中,只需在“主题素材包下载”中下载我们需要的“主题模板”即可,后两个“主题在线制作”、“主题预览工具”因其功能非常欠缺且死板,无需使用,看都不用去看他。后期的制作我们大可用PhotoShop对元素进行编辑制作,调试也直接在魅族手机上调试(无需在线制作、在线主题预览,因为后期的主题制作会有一些个人的新颖想法。用手机直接调试可百分百保留你这些大胆的设计元素,而在线制作调试的话大胆的设计元素将会被屏蔽掉),这样效率高且能达你要的效果!-何制作

“主题素材包下载”点击下载主题模板。

OK!我们的准备工作已经做完了,下一回,我们将进行重点部分,主题的开始制作!

第三步.魅族手机主题设计与制作

这个为“主题模板”解压出来的文件(建议解压到一个新建文件夹里,这样不会与其他文件相互紊乱),其中包含一些简单的官方小教程和小工具,但是显然远远不够(包里内容速览一下就好,不用细究,嘻嘻!跟着我的步骤走,后面需要看哪些文件哪些内容,我会指出的!)-何制作

好了!单刀直入,直奔主题!打开蓝色框标出的文件。

依次打开蓝色框标出的文件。

如图为整个魅族主题包的所有板块!没错,你在魅族主题商域看到的那些大神的作品,他们也是在这些板块的基础上运用他们平面设计的功底对其中的板块中的元素进行的修改,以至于你所看的是一副全新的不同于以往的UI界面。-何制作

那么,这些板块所对应的是我们的魅族手机UI 中的哪些界面呢?(英语水平不错的此时应当豁然开朗!)

这些板块的都是对应APP的桌面界面(或部分UI界面),但是…一个APP它的整个框架结构绝不只是一个板块这么简单!在此我要说明一下!现在做的只是魅族手机主题(桌面UI主题)。魅族开放给我们的权限只有这么多,我们发挥的空间也就这些。当然,你的创作能力是无限的,你可以发挥你的潜质去探索一些其他未知的领域也是OK的!嘻嘻!-何制作

植入一段官方原述:“对于不修改的图片素材,务必在打包上传前删除,但thumbnail.jpg / icon.png / preview文件夹/icons文件夹/ wallpaper文件夹,必须修改且保留。”(意思就是,不能原封不动的套用魅族主题模板原本的元素不做修改,它有指定以上几个板块必须得做出修改而且还不能删了它们,不然不让你审核通过。其他一些非指定的板块,你若没有对其进行修改,则要将其删除掉。如下是我制作的主题包,请看!)-何制作

你看!是不是很精简,有没有发现少了好几个板块!是的!我修改且保留了指定板块的内容,非指定板块的内容我没做过修改,故被我删了!(嘻嘻!这款主题适配了1000+个图标哦!)

好了!整个魅族的主题包结构我们是不是已经有了一个相对清晰的概念。下面,介绍工具。

一.绘图工具:PhotoShop(我用的是CS5版本,好吧!我承认我落后了!不过能用就行,什么版本对我来说其实都是一样的)

Adobe PhotoShop CS5下载链接

Adobe PhotoShop CS5破解补丁

像Illustrator和CorelDRAW这等设计软件,在针对手机主题UI这类位图(非矢量)较多的设计上我觉得运用起来反而不够便捷。什么样的设计方向找准什么的工具非常重要,所以强烈推荐全程PhotoShop来设计完成!-何制作

CorelDRAW X5 下载链接

CorelDRAW X5破解补丁

Adobe Illustrator CS6下载链接

Adobe Illustrator CS6破解补丁

友情链接!献给有需求的筒鞋!

二.板块介绍,按照我设计的主题包《商务简约》中的板块顺序(先从左到右,再从上往下)

1.依次打开com.android.dialer文件夹:res、drawable-xxhdpi-v4,里面的内容便是电话UI界面的部分可供开发者开发的元素

现在,我找其中一个元素,设计一个新的元素,对其进行覆盖

如图蓝色的元素是新设计的(理论上要求尺寸大小与原元素一致),将其放到文件夹中覆盖掉原元素,如图

OK,我们已经设计好这一板块中的其中一个元素了。当然,对于内容多大程度的改动也完全取决与个人的审美判断,有些内容适当保持与原版一致也是没问题的!

如图所示!

第四步.魅族手机主题设计与制作

打开:com.android.dialer,找到theme_values.xml

如图,前面已经对板块中的素材部分做了一个讲解,接下来便对图中选中的XML文档做个讲解!

如图,用“写字板”的打开方式对它进行编辑,如图:

到这里,你可能会晕头转向!哈哈!请打开这个Excel文档(Flyme 6资源总对照表)

打开如下图:

如图,选中最下方“XML说明”工作表。“红色标记”区域为电话板块的XML文档的主要内容。

右上角红色标出的电话拨号UI界面中“i2”,其对应的主题审核元素为左边红色标出的“”。其中“FF62BE66”是以16进制表示的RGB颜色值!(通俗表示:颜色的值)

解析一下!通常我们通过显示器(屏幕)看到的颜色,都是由三原色组成,即R(红)、G(绿)、B(蓝),学过油画的童鞋应该都知道,红色和绿色混合在一起会变成黄色;红色和蓝色混合在一起会变成紫色;绿色和蓝色混合在一起会变成青色;红色、绿色、蓝色三者混合在一起会变成白色。当然,像红、橙、黄、绿、青、蓝、紫等颜色,只需按照比例将颜色之间进行调配即可生成!在电脑的数字海洋中,也是相同的道理,只是一切都数字化了而已。-何制作

在电脑中,(此处按照16进制(16*16=256)讲解可能不够通俗)可理解为,单一个颜色被划分为256等份:0~255代表颜色深度由浅到深的一个渐变。

如红色(值为0时表示没有颜色,值为122时为浅红色,值为255时为深红色)。

如绿色(值为0时表示没有颜色,值为122时为浅绿色,值为255时为深绿色)。

如蓝色(值为0时表示没有颜色,值为122时为浅蓝色,值为255时为深蓝色)。

注:当R、G、B值均为0时,这时组合成为黑色(理解为,他们本身都没有颜色,混在一起黑压压的)

当R、G、B值均为255时,这时组合成为白色。

OK!点到为止!多说无益!附图

拾色器为PhotoShop的一个颜色工具,如图,每个颜色都有其16进制值(如#ff0000)。调出自己喜欢的颜色后将其16进制值拷贝并覆盖到“theme_values.xml”相应位置就能达到你想要的效果!-何制作

第五步.魅族手机主题设计与制作

一.前面针对com.android.dialer这一板块内的图标元素以及XML文档已经做了一个讲解。当然,也没办法针对所有细节一一详述,过程还需自己能够举一反三。

com.android.mms、com.android.settings、com.android.systemui、com.meizu.flyme.launcher…等板块与com.android.dialer操作相同,不做复述(注:板块内图标元素可参照“Flyme6资源对照表”中对应的“工作表”摸清图标元素的属性)-何制作

现在,我们从另一主要板块icons开始讲述。

其分为5个部分,即红、蓝、绿、黄、青5种颜色框选部分。

红色部分对应的是桌面日历图标的日期显示元素(会随着日期动态变换数字);

蓝色部分是系统自带APP图标元素,为必须重新设计的元素(每个图标都必须重新设计才能通过审核);

绿色部分为第三方图标元素,官方要求必须适配10个以上第三方图标元素才能通过审核(本人设计的一款Flyme6主题《商务简约》第三方图标元素适配量达到1000+个);

青色部分为主题审核元素,用于定义桌面日历图标日期数字元素的颜色();

黄色部分:3个

1.icon_background.png(图标底板):就像一块黑板,你在上面画画,你眼睛能看到的是:黑板+画(如果画得整块板都是画,即画盖住了黑板,就只能看到画)

2.icon_border.png(高光/效果):在你的画上面做一点修饰,比如在上面喷一点美国斯顿高温胶啊什么的!哈哈!开玩笑的!

3.icon_mask.png(显示区域):就像PS中的图层蒙板,这个得附张图,不知道该怎么讲述!!!

是不是很明白了!我已经尽力了!!!

(补充:细心的童鞋可能会发现,为什么主题模板包里的图片元素格式都是PNG格式的?是的,因为PNG格式的图片能够包含透明像素点,这正是UI界面细节所需。安卓系统的UI图片元素主要有“PNG”和“点九PNG”两大格式。下一回,将讲解“点九PNG”(***.9.PNG)的运用)-何制作

第六步.魅族手机主题设计与制作

现在,我们来讲解剩下的几个板块:preview、wallpaper、icon.png、thumbnail.jpg

1.preview:预览(前面有提及到,为主题商域场景时的多页面展示图,具体展示哪些界面以官方最新要求为准!如图为我设计的主题《商务简约》第1.1.0版本的展示图,格式为jpg)

2.wallpaper:壁纸(一张锁屏壁纸和一张桌面壁纸,格式为jpg)

3. icon.png:(主题主旨图标,像素大小:512*512)

4.thumbnail.jpg:缩略图(前面有提及到,在主题商域场景用于展示的缩略图,往后官方可能会取消缩略图!如图为我设计的主题《商务简约》第1.1.0版本的缩略图,格式为jpg)

OK!我们来讲一下上一回提及到的点九图!

如图,找到“点9教程与工具”并将其解压出来,依次打开

静静的等待安装完成!这个工具呢!它是用来制作点九图的。其实用 PhotoShop也是可以制作点九图的。后面再为大家讲解一下如何用PhotoShop制作点九图!

OK了!点击一下关闭!

打开这个软件需在这里双击这个!(draw9patch.bat)

下面,我举个例子讲一下什么是点九图!

如图,是一个短信信息框,左图是没有做过点九处理的,右图是有做过点九处理的。

信息框的原始图标元素(我设计的,非官方)是这样的,如下图

做了点九处理之后呢,信息框的周边会有一个拉边处理,从而保证文本能够集中在信息框内以达到美观的效果。

OK!双击“draw9patch.bat”打开“点9简易制作工具”

会出现这个界面,不要关闭,稍等一下

这个就是了!点击file(文件)

打开需要点九处理的图片元素

初始界面较大,调整一下就好

看到没有!百分比调小之后整体显现了出来,Show lock取消打勾,勾选了Show content,更加直观!

操作指导:在最边缘处以一个像素为单位,鼠标左键点击一下,即创建了一个黑点,按住不放拖一下便是连续的黑点。按住键盘“shift”+鼠标左键,点击黑点,即为取消已画的黑点!OK!讲解一下来龙去脉!

看到没有!图中有两个黑点被红色圈圈做了标注!

表示水平方向以上边黑点所处部位为拉伸点,拉伸后左右两边的头和尾依然保持原状不变形,见图右边部分!

垂直方向以左边黑点所处部位为拉伸点,拉伸后上下两边的头和尾依然保持原状不变形,见图右边部分!

给你一分钟领悟一下,很好理解的!

看到没有!图中有两条黑线被蓝色圈圈做了标注!

如图,两条黑线之间映射出来的区间范围发生交集!交集部位便是文本在信息框中显示的区域范围!其也会随着文本内容的增加减少而产生相应的线性变形,从而达到美观的效果!

OK! 保存!我们去看看它现在变成什么样子了!

What?好难看有没有!是的!点九处理已经完成!但现在它还是个半成品,为了终极美观!我们现在还要对它进行“去黑边处理”。

打开这个东西!

然后依次打开这个文件!

把我们刚才的“半成品”放进去!然后…

然后回到这里,双击打开“xUltimate-d9pc.exe”

会弹出这个东西,并伴随一声“滴”!OK!黑边处理完成!现在我们去看看我们的战利品!

“战利品”就在这个文件夹最里层!我们依次找到它并把它捉拿归案!

好了!拿好你的的战利品,放到你想要的地方!

OK!PhotoShop版本的点九处理!附图!

OK!把它放大到能看到一个单位的像素点!

用铅笔工具,用纯黑色(R、G、B值都为0),如上图,做好了就再用去黑边工具搞一下就OK了!

第七步.魅族手机主题设计与制作

好啦!到这里,大家对于魅族手机主题的制作其实已经有了一个非常深刻的了解了!开头时我曾说过,主题模板包里面的一些小教程、说明以及注意事项速览一下就可以!现在,你可以稍微仔细的去看看,肯定是豁然开朗的!我们前面讲解的内容主要是从整体上切入讲解的,细节上的东西,还得自己去揣摩!比方说哪些图片元素是要求什么样的规格尺寸、什么样的格式等等!OK!言归正传!-何制作

1.打包:就是压缩。附图

其实就是压缩一下而已是嘛!为了顾全大局!!!上演一遍。

2.上传!附图。

搜索“魅族开发者中心”或者登录网站“”

进入开放平台后,点击“我的”、“我的主题”、“主题工具”!

点击“发布主题”!

选择系统版本、创建主题名称、点击“选择文件”上传我们刚才打包好的主题包!

等待上传OK!

点击“完成”!

稍等片刻!

点击“确定”!

好的!我门的主题现在已经上传确认完毕,我们可以开始做调试了!用魅族真机哦!点击“证书下载”!

跳出这样的窗口,点击“管理”!

IMEI和SN,打开魅族手机的设置、关于手机

就是这两个!别搞错哦!

OK!点击“提交”!

这个就是证书!下载到你方便找到的地方!

现在!回到这里,点击一下“名称”!

点击一下安装包的链接,下载主题安装包!

注:图中选中区域数码一定要删除掉(_1.1.0_6_1508930295),呆会才能调试成功!

OK!一个主题安装包(mtpk后缀)和证书(license)已经搞好!现在!我们赶紧用手机调试一下!看看效果!

首先呢!手机连接电脑端,在电脑上打开手机文件管理!

如图,找到Customize这个文件夹,打它!!!

看到没有!将我们刚才的“安装包”(mtpk后缀)放到Themes文件里面;“证书”(license)放到TestLicense文件里面!接着…

第八步.魅族手机主题设计与制作

打开手机!如图操作!傻瓜式了!!!

Jionuri开发设计制作的魅族主题

Flyme5收费版:《简约清新》。

Flyme5收费版:《商务扁平》。

Flyme5收费版:《她喜欢粉红色》。

Flyme6收费版:《商务简约》。

Flyme6免费版:《简约扁平》。

Flyme6免费版:《扁平清新》。

主题《商务简约》界面展示如下!

主题《简约扁平》界面展示如下!

主题《扁平清新》界面展示如下!

主题《简约清新》界面展示如下!

主题《商务扁平》界面展示如下!

主题《她喜欢粉红色》界面展示如下!

以上答案来源于Miui社区大基基,更多魅族主题制作心得分享、讨论请关注【科技周】,或请留下你的神评,让大家看到你!