小米设计师吧 关注:373贴子:1,775

MIUI V5/V4主题制作和设计教程

只看楼主收藏回复

废话不多说,二楼才是主题


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


    2楼2014-03-08 19:31
    收起回复
      下面我会分两大模块和大家介绍:
      1.主题设计
      1.1 主题模板
      1.2 V5更强大的设计
      2.主题的上传
      3.主题制作
      3.1 主题测试机器
      3.2切图
      3.3主题制作软件的安装
      3.4主题工具使用教程视频
      3.5主题涉及的模块介绍
      3.6从V4到V5
      3.7简单的锁屏制作
      3.8theme_values.xml文件说明
      3.9关于壁纸和铃声
      3.10主题设计标准
      3.11关于完美图标模板


      3楼2014-03-08 19:32
      回复
        1.主题设计:
        1.1一个主题包含V4、V5两个版本,而设计师只要根据miuiv5template(点击下载)这套模板进行一次设计即可。此模板针对MIUI V5,稍做调整即可作为V4主题的设计稿。具体见下表
        1.2 相比V4,V5有更强大的主题框架,更灵活更有趣,例如V5加上了动态图标和动态壁纸,这些都是设计师可以去设计的


        4楼2014-03-08 19:33
        回复
          2.主题上传:
          上传步骤:
          情况1:单独上传V5主题包
          第一步:上传新主题第二步,点击立即上传V5第三步,等待上传,并填写信息

          第四步,恭喜你上传成功,等待工作人员审核后就能上线了!


          5楼2014-03-08 19:38
          回复
            情况2:在原有的v4主题的基础上更新V5版本
            第一步,点开您需要更新的主题,点击增加新版本按钮。
            第三步、第四步同情况一。


            6楼2014-03-08 19:39
            回复
              3.主题制作:
              3.1 主题测试机器:米2刷V5开发版附上刷机教程连接http://www.miui.com/download.html
              3.2 切图 制作主题之前先根据设计稿和主题制作模板里的图的尺寸进行切图,将设计稿切片,分成各个小部分,用与主题制作。模板在主题编辑器里提供,只需插上手机,同步相应模块就OK了。
              3.3 主题制作软件的安装
              官方主题工具:http://pan.baidu.com/s/1qWoBmkk
              打开MIUIThemeEditor目录(图1所示)。1.windows下运行,“run-windows.bat“
              2.linux下运行,“run-linux.sh”
              3.mac os运行,“run-mac.command”


              7楼2014-03-08 19:43
              回复
                3.4 主题工具的使用
                教程视屏;http://pan.baidu.com/s/1sjEX8PR


                8楼2014-03-08 19:46
                回复
                  3.5 主题工具中的模块介绍主题内基本模块com.android.contacts 通讯录以及拨号com.android.fileexplorer 文件管理器com.android.mms 短信com.android.providers.downloads.ui 下载管理com.android.settings 设置com.android.systemui 通知栏以及任务管理器com.android.updater 系统更新com.miui.antispam 防打扰com.miui.backup 备份com.miui.home 桌面com.wali.miui.networkassistant 流量监控framework-miui-res MIUI全局framework-res Android原生全局以上模块为主题工具内带有图解的模块MIUI全局主要存放文件是会在各种界面都会调用到的东西,比如按钮,弹窗,进度条,每个每块都会用到的小图标等等,如在当前模块没有想要修改的素材时,可以去全局找。相比V4,V5的Android原生全局 的图不建议进行修改,V5在Android原生全局 只会涉及字体颜色,涉及的字体颜色只需看我们主题编辑器的V5字样的标记,无标记V5字样的请勿修改。


                  9楼2014-03-08 19:47
                  回复
                    3.6 从V4到V5主题
                    对于已有的V4主题,制作者想迁移到V5上,可以参考下面提供的V4到V5的主题的映射表,里面会告诉大家部分V4到V5可能还可用的图,不可用的话需要自己重新调整尺寸和点9信息。这部分映射我们会逐步更新,大家可多留意!
                    这里给大家提供一个V4到V5的映射列表,仅供大家参考,具体图的尺寸还需大家根据主题来修改:http://pan.baidu.com/s/1bny5job


                    10楼2014-03-08 19:51
                    回复
                      3.7 简单锁屏的制作
                      百变锁屏在主题包里的lockscreen/advance目录下,manifest.xml文件是描述脚本。下面给大家提供两个锁屏教程贴:
                      【总教程1】百变锁屏教程 (11.06.17) http://www.miui.com/thread-133586-1-1.html
                      【总教程2】百变锁屏 2.0 http://www.miui.com/thread-335430-1-1.html
                      【百变壁纸教程】 http://www.miui.com/thread-1051825-1-1.html
                      【百变图标教程】http://www.miui.com/thread-1045828-1-1.html
                      【百变相框教程】http://www.miui.com/thread-808371-1-1.html


                      11楼2014-03-08 19:55
                      收起回复
                        3.8 theme_values.xml文件说明主题文件内除了图片以外,还有theme_values.xml,这个主要用于控制当前模块下的文字颜色,提示文字等信息。里面的颜色代码与普通的十六进制颜色代码不同,是在还在前面增加了2位用于控制文字透明度,可在主题工具中点击切换编辑模式查看当前模块的theme_values.xml文件


                        12楼2014-03-08 19:56
                        回复
                          3.9 关于壁纸和铃声
                          替换铃声
                          将准备好的铃声放在主题包的ringtones目录下,并按如下规则命名。
                          来电铃声:ringtone.mp3
                          通知铃声:notification.mp3
                          闹钟铃声 : alarm.mp3
                          替换壁纸(包括桌面壁纸和锁屏壁纸)
                          桌面壁纸和锁屏壁纸放在主题包的 wallpaper 目录下:
                          桌面壁纸: default_wallpaper.jpg
                          锁屏壁纸 : default_lock_wallpaper.jpg


                          13楼2014-03-08 19:56
                          回复
                            3.10 主题测试标准 :http://pan.baidu.com/s/1pJptmp9


                            14楼2014-03-08 19:59
                            回复
                              3.11 关于完美图标模版
                              (大家可以根据里面已经命名好的第三方图标进行修改,让第三方图标更完美适配你的主题)
                              下载模版:http://pan.baidu.com/s/1dDEGcAd


                              15楼2014-03-08 20:01
                              回复