只需一步，快速开始
扫一扫，访问微社区
查看: 44099|回复: 155
[东东掌萌组]iphone 4 主题制作教程~更新动态背景制作
本帖最后由 sxbrandt 于
11:04 编辑
本人今天班门弄斧啦，来讲解iphone 4 主题制作~~
无聊中跑去东东安卓去看了下，发现比iOS热闹多了。各种嫉妒羡慕恨。感觉iOS去做主题的人不是很多，搜了一下帖子，也没有iphone4的WinterBoard制作教程。外加上一些童鞋曾经让我帮忙做WB主题，苦于自己懒&可能对于某些动漫不太了解&技术差，就没有做。于是自己特别奉上教程，供君参考。
首先介绍下WinterBoard（以下都用WB代替）。这是一款cydia下面的软件，必须得越狱了的手机才能使用。越狱请参考其他网站，比如tgbus，weiphone，178等，这里就不复赘述了。Iphone界面的外观是由一个个PNG格式小图片构架起来的。同样的WB主题的原理也就是将显示出来的图标替换掉（基本其实就这么简单）。Iphone4开始，Apple采用的是HD图标，图片大小比iphone3GS 里的组件大了一倍，文件命名上，后面多了个@2x。
-------------------------------我是主题制作分割线------------------------------------------------------
废话不多说了，进入主题制作正题：个人建议啊，一般开始自己制作主题的朋友，最好去别的地方扒一个好的主题作为参考（我刚开始就是这么干的，那时候weiphone上没人教我怎么做@@）。制作工具呢，本人用的是Photoshop，也有人用美图秀秀的说（那个我没用过）。做完之后用ifunbox，itool导入进iphone，个人建议别用91熊猫桌面之类的（白苹果几率大哦），嘛，只是个人建议。下面以一款国外主题Hollow.theme以及本人作品Miku.theme（允许我不自量力下）作为参考介绍。
1.认识WB主题构造。
如上图所示，完整的主题根目录一般由以上3个文件夹（我没把Folders文件夹算进去。Folders文件夹可有可无，因为里面的部件都可以在Bundles文件夹里实现替换。另外这个主题里少了UISounds文件夹），一个info.plist文件，以及3个PNG格式图片（少了一个Wallpaper@2x.PNG）组成。其中Bundles是最主要的部分，基本所有主题替换部件都在这里面。UIImages文件夹里面是替换一些小部件，比如状态栏上的电池，信号，wifi信号等等图标。IUSounds替换的则是声音，比如锁频声音啊之类的（我有些话唠，其实大家看英文都能看得出来）。Info.plist修改的是图标字体的颜色，日历图标上的星期和日期的字体颜色。之后会详细讲。LockBackground@2x就是所谓的锁频图片,SMSBackground@2x即为短信界面背景图，Wallpaper@2x为主界面背景图。
2. 系统图标替换然后我们来看看Bundles文件夹。
看上去挺吓人的有142个文件夹。不过其中大半是非系统自带的程序的图标，可以不做修改。比较重要的是
I.& &com.apple.springboard和com.apple.TelephonyUI两个文件夹。II.&&com.apple.springboard文件夹内包括了解锁键盘，充电图，文件夹图标，文件夹背景，音乐播放里面的各种小图标等。III. com.apple.TelephonyUI文件夹内包括的则是数字键盘，各种滑块（解锁滑块，关机……）& && &Bottombarknobgray@2x (锁屏解锁 滑块图标)
& && && & Bottombarknobgreen@2x (锁屏状态下移动滑动来接听 滑块图标)
& && && & Bottombarknobred@2x (关机 滑块图标)
其他的文件夹主要就是桌面图标和Loading图。下面以com.apple.mobilesafari文件夹为例子。
乍一看，要替换的东西很多。其实很多人做的主题基本上只替换了Loading图和桌面图标，小的部件基本是搬来搬去使用的。Loading图即为Default@2x和Default@2x~iphone，而桌面图标则为icon@2x。其他的文件夹也类似。系统自带程序的文件夹内都有自己特定的图标，比如com.apple.calculator里面就有计算器的替换组件，com.apple.MediaPlayer里面有ipod的替换组件。关于图标的替换，普通的桌面图标大小为11 8x120（我自己做的主题为120x120，没问题）。而设置里面的图标为59x60。设置里面的图标如下：
文件夹后面带settings字样的即为设置里面的小图标，比如com.apple.mobileipod.settings
注意！！，有些文件夹内的桌面图标命名为Icon@2x，而非icon@2x。弄错会造成自己替换的图标显示不了。（出问题这些图标属于系统自带的程序，搞不懂为什么apple有些图标命名首字母要大写，有些则不用）
3.非系统的程序图
3.1 个别非系统程序图标
那么非系统的程序图标该怎么替换呢？比如QQ，Bundles里面没有QQ程序图标替换的文件夹。那么自己找出那个文件夹的命名。以PC端的ifunbox为例子。打开路径Raw File System\User\Applications
会出现N多非系统自带的图标。然后我们找到QQ文件夹，打开，里面有如下文件（可能有些童鞋打开发现没有iTunesMetadata.plist而是info.plist，没事，都一样的，只是因为PC端的iTunes版本不同造成的，里面内容一样的）
打开iTunesMetadata.plist(info.plist)，一串的文字让我们看的头晕，坚持住！开始找&string&……&/string&内的文字，找到一段&string&com.tencent.mqq&/string&，这个就是我们要找的。之后在Bundles文件夹内新建一个文件夹，命名为com.tencent.mqq，文件夹内桌面图标命名为icon@2x，loading图为Default@2x。
3.2 图标通用模板
另外一种方法就是做图标的通用模板，这类模板会应用在主题内没有手动改过的图标上，而bundles里已经自定义过的图标不会受模板限制。如图：framework一般有4个，大小和图标大小一样，一般为11 8*120。不过与这大小差别不大都OK，比如11 8*11 8AppIconMask@2x：决定图标显示的大小、形状和明亮等，如上图内黑框内的透明即为图标显示区域。。（虽然这么说，但并非中间透明就是显示区域……也可以外边是镂空而中间是黑色，关于这一点，自己琢磨了很久。）
AppIconOverlay@2x ：顾名思义，即为覆盖层，一般为无色。注意！这一层打上颜色后并不能应用在所有的图标上。（某曾经尝试过在Overlay上打logo，最后试验失败）
AppIconShadow@2x ：为图标底座……最好要比Mask图标显示区域要大。否则Shadow的效果是出不来滴。
DefaultAppIcon@2x：这个吗，一般可以不管……是应用于系统图标的。如果真心做主题的话，系统图标手动萌化也是必须的……
3.3 滑块替换
一共有三种滑块：锁屏解锁（bottombarknobgray@2x），来电（bottombarknobgreen@2x）， 关机（bottombarknobred@2x）。大小为128x94像素左右，png格式。在4S里命名多一个~iphone，比如锁屏解锁为bottombarknobgray@2x~iphone。
做好之后放入主题文件夹内的Bundles\com.apple.TelephonyUI内即可~
4.运营商图标替换：运营商图标高度是40，长度么别太长就好，100以内差不多了。iOS4下替换方法，XXX为运营商名字
Default_CARRIER_XXX@2x.png 和 FSO_CARRIER_XXX@2x.png，bundles下的文件夹命名为com.apple.XXX比如中国移动，Bundles里面的文件夹为com.apple.CMCC_cn打开会有：其中Default_CARRIER_China-Mobile@2x为子目录里显示的运营商图标（上上上图的设置图），FSO_CARRIER_China-Mobile@2x为主界面下的图标。没有带@2x的可以无视。那个是给iphone3GS及以下机子用的。
iOS5下面则是：
Default_CARRIER_XXX_1only_@2x.png 和 FSO_CARRIER_XXX_1only_@2x.png以及TS_CARRIER_XXX_1only_@2x.png。其中 FSO_CARRIER_XXX_1only_@2x.png 和 TS_CARRIER_XXX_1only_@2x.png 图片应该相同。
如何知道自己的运营商叫什么名字（即手机的命名，叫啥XXX？）
在手机端system/Library/Carrier Bundles/iPhone里面，找到自己归属的运营商，比如中国移动叫：
那么XXX就叫CMCC_cn（注意大小写）。于是在自己做的主题的bundles文件夹下新建com.apple.CMCC_cn (com.apple.XXX)
把做好的运营商图标丢进去就可以啦！
5.主题根目录下的info.plist修改建议下载一个PropertyLIstEditor（很小的）来打开info.plist。因为之前有童鞋反应过用文本文档打开来乱码（那是因为解码不对）。打开后会有如下字段：
其中：&key&CalendarIconDayStyle&/key&&string&color: ; text-shadow:&&0px 0px 0px rgba(0, 0, 0, 0.0);position:top:7font-size:11&/string&
这段改的是日历图标下的日期的颜色、大小等样式。&key&DockedIconLabelStyle&/key&&string&color: # font-size: 10margin-top: 2 font-weight: color: text-shadow: #px1px 2&/string&这段修改的是Dock里面程序图标字体的样式。
&key&TimeStyle&/key&&string&font-family: H font-size:13 color: #225f7c; text-shadow:&/string&修改的是锁频里的时间的字体颜色大小。
&key&UndockedIconLabelStyle&/key&&string&color: # font-size: 9 margin-top:-2 font-weight: color: text-shadow: #px 1px2&/string&修改的是桌面图标字体的颜色大小。
比如修改桌面图标的字体颜色，color:#ffffff为白色。改为color:#000000。那么字体就成了 黑色了。至于颜色的代号，我是在Photoshop里查的。
6.拨号键盘修改。这是额外项目了，用到的网上制作拨号键盘背景自己可以上那网站上做。做完丢主题里就可以了。有兴趣又对自己PS功底有信心的童鞋可以自己用PS做，效果么。当然是PS做的效果好。自己做完的要扔到Bundles文件夹下的com.apple.mobilephone里面。Joyphone 上还有些小工具可以用，部分免费的……
7.状态栏上图标修改替换的图片部件都直接丢在UIIamges文件夹内。首先是状态栏背景& &路径&名称& & 锁屏状态下栏背景图片
UIImages/Translucent_Base@2x.png
& & 桌面状态栏背景
UIImages/Black_Base@2x.png& &&&程序里状态栏背景
UIImages/Silver_Base@2x.png
大小都是640x40， 3gs的长宽减半&去掉@2x就不多说了。
状态栏内图标：锁屏界面、主界面
iOS4下为Black_XXXX， iOS5下则为 WhiteOnBlackEtch_XXXX
软件内界面
iOS4下为Silver_XXXX， iOS5下则为 ColorOnGrayShadow_XXXX
通知栏界面
这是iOS5下特有的，通知栏里的状态栏图标显示，图标一般和Black_XXXX是一样的（也可以不一样，自己选咯）
新建WhiteOnBlackShadow_XXXXX由于替换一般都是批量的……用MyRename、Adobe Bridge等软件批量替换吧~
8.动态背景制作：
这里介绍下用Leg1on-桌面 Zro's HorSS动态背景主题改装自己喜欢的背景的方法
首先是背景的覆盖图片(不是动态背景的图片哦)，如下图
图片大小为640x960，格式PNG，命名Wallpaper。把要显示动态背景的区域镂空了，镂空的区域才能显示动态背景。如果想要全屏显示动态背景，那么把Wallpaper.png做成无色的。
然后用编辑器打开Wallpaper.html
找到如下代码：
屏幕整体大小为320x480，左上顶点为（0.0）。slideshow_width代表动态背景图片在屏幕中占的宽度，slideshow_height则为高度。 pause就是多少秒换一张图……
然后是图片的位置：
thissimg.left 为从屏幕左端到动态背景图片的左端的距离
thissimg.top为从屏幕顶端到动态背景图片的顶端的距离
然后是要替换的图片位置和命名：
如上面代码显示，图片在SSimages文件夹内。格式为PNG，命名为1、2、3。。。。。。
其实这些位置和命名都可以改掉。如上面SSimages改成pic，那么图片就是在pic文件夹内了。图片同样道理。。。
基本上就是这样了。。
这里附上Leg1on-桌面 Zro's HorSS的动态背景主题供大家作为参考
以上为iphone主题制作的基本过程了。如果以后想到哪些地方，自己会更新上去滴。
----------------------------------------这一段无关主题制作可以不看-------------------------------------------------------
PS: 自己做主题的心得&经历：（个人苦水区）
如果力求完美，那么主题做起来很费劲。如果不是死抠细节的话，一个主题完成很快，主要时间花在图标替换和资源搜索上面。萌化主题是我们的本意，不过不要让主题太华丽而遮蔽了实用性（某科长语录）。
自己第一做的iPhone主题为InfiniteStratos.Theme当时什么都不懂，自己在那里琢磨+各种网上搜来的资料，差不多弄了一个下午左右完成了。当时那个主题没有loading图，除了图标、拨号键盘、动态背景的图片和切换时间替换了，别的什么东西都是照搬的。如果现在做那个主题，估计1个多小时就下来了（基本上是图标的替换，体力活而已）。到最近做的一个AngelBeats主题，前前后后弄了快3天。主要是PS图片和动态背景构造上想了很久。而做的Miku.theme则是因为在为图标打上初音气的logo上面死抠（网上没人教，国外国内论坛上都一样），做完做完主题用了2天，不过自己还是感觉细节上没有把握好，比如背景颜色原因造成部分图标的Label不容易看出来。
-------------------------------------------我是华丽的分割线-----------------------------------------------------至于有童鞋问的动态背景和锁屏制作，我做的动态主题里的那些CSS脚本都是从别的主题里取来自己加以修改，再配合自己PS出来的图片制作的。动态背景制作教程难度太高啦。我的Photoshop水平很差，Dreamweaver更差，所以教不了大家。不过以上的内容替换完了也能让主题焕然一新啦。
-----------------------某的部分主题作品-----------------------------------------
本帖子中包含更多资源
才可以下载或查看，没有帐号？
技术贴必须支持
有图文教程真是不错，支持一下
虽然那个，，我用不起iphpne，，但是教程什么的支持，，
木有愛瘋4，不過還是支持下
& && & 没入手iphone啊
此乃神贴～～
这个可是受教了呀！
咱正好寒假要来研究iphone的主题
教程很辛苦，支持，以后都会用到的。
虽说不是很懂~但还是支持下技术贴的说~
Powered by
& 动漫东东 Since 2007更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
使用您的微博帐号登录，即刻尊享微博用户专属服务。
使用您的QQ帐号登录，即刻尊享QQ用户专属服务。
使用您的人人帐号登录，即刻尊享人人用户专属服务。
按住视频可进行拖动
把视频贴到Blog或BBS
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
收藏成功，可进入查看所有收藏列表
方式1：用手机看
用爱奇艺APP或微信扫一扫，在手机上继续观看：
《超女掌萌人》第一期：开课啦！Bigbang鹿晗杨洋教你唱歌 - Bigbang吴亦凡杨洋教唱歌
方式2：一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/164eL4
下载安装包到本机：&&
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/164eL4
下载安装包到本机：&&
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
爸爸去哪儿2游戏 立即参与
《超女掌萌人》第一期：开课啦！Bigbang鹿晗杨洋教你唱歌 - Bigbang吴亦凡杨洋教唱歌
播放量数据：
你可能还想订阅他们：
&正在加载...
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
安装爱奇艺视频客户端，
马上开始为您下载本片
5秒后自动消失
&li data-elem="tabtitle" data-seq="{{seq}}"&
&a href="javascript:void(0);"&
&span>{{start}}-{{end}}&/span&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"&
&a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《》剧集：
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入300字
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制只需一步，快速开始
扫一扫，访问微社区
查看: 9413|回复: 406
【东东掌萌组】【狂三】【ios8通用】【深夜福利】
本帖最后由 趌厹奆 于
23:54 编辑
响应@螺丝酱的要求
做了套狂三的ios8
于是预览图
由于制作比之前的都费时所以就收点成本...
ps如果其他版本的肾机出现BUG楼下回帖哟
ps2回复可见内容是某狂三coser的绝对领域的注销界面哟
ps3食用方法见之前的帖子实在不会，我再补下...
ps4壁纸进&&里下哟
游客，如果您要查看本帖隐藏内容请
本帖子中包含更多资源
才可以下载或查看，没有帐号？
感谢您对东东的支持
好动汐来收藏喽
看看先，ISO8的主题真少
阿勒？我预览图的窍门？=V=鸡肉卷你在说什么呐
感谢大神们的努力~！
预览图好眼熟啊
总觉得这预览 末扒皮会裱人&&
支持！~~~~~~~~~~~
好好好好哈哈好哈哈哈哈哈哈哈哈
Powered by
& 动漫东东 Since 2007国内用户最多的时尚类应用
发型库内超过1万款发型
累计用户超过400万
专为爱美人士打造 ，只加爱美的人！
国内首创发型打分机制，发型美不美，大家来评分！每周的人气王更有好礼相送。
紧跟潮流，每天更新最新最时尚的发型。
详细的分类，涵盖所有类型的发型。自定义选择性别、脸型、发型长短，海量发型与您配对。
短发？长发？卷发？大家都在讨论哪些发型？发型话题告诉你！
更多功能，等待你们的发现...