MIUI论坛

标题: 完美图标制作——MIUI V5“完美图标”浅析 [打印本页]

作者: hanyuo_o    时间: 2013-3-7 18:09
标题: 完美图标制作——MIUI V5“完美图标”浅析
本帖最后由 hanyuo_o 于 2013-5-1 13:27 编辑

  MIUI V5发布之后,启动了“完美图标”计划,就是将第三方图标重新绘制一遍,让第三方图标如同系统自带图标一般,和MIUI整体风格高度契合。工程量巨大有木有!!因此需要大家群策群力,贡献出自己的一分力量,一同完成庞大的“完美图标”计划!那么我们绘制图标应该注意哪些问题呢?下面谈谈我自己的看法~

一、图标分类

  首先我们先来对系统图标以及官方绘制的200个第三方应用图标做一个简单的分析~
根据这些图标的特点,大体将这些图标按风格分为4种类型~

1.拟物型

此类图标的特点是根据实物的形象进行艺术化的二次加工

1.png

2.抽象符号型

此类图标的特点是根据应用的特点以一种抽象符号来表示,如“音乐”用音符表示。

2.png

3.二次加工型(主要针对第三方应用)

此类图标的特点是根据第三方应用的原始图标进行适当的二次加工(颜色、阴影调整等),使其具有系统图标的一些风格。

3.png


4.本色型(主要针对第三方应用)

此类图标基本与第三方应用原始图标相同,主要是针对图标规格与系统进行匹配

4.png

二、图标效果分析

1.就形状来说,V5系统的蒙版将图标统一为圆角矩形。

2.就图标样式来说,针对第一、第二、第三类图标,主要有以下几点共同点,如下图。

5.png

一个图标主要由以上几部分构成~


具体的实现方式是:

6.png

其中,蒙版是由系统自动完成的,因此需要我们绘制的部分就是图标的底版



三、图标绘制

通过以上分析,我们对于第三方图标的处理主要有两种方式(第三类和第四类):

一种方式如第三类图标的处理,是对第三方图标进行二次调整加工,使其具有系统图标的部分风格。由于V5的图标为圆角矩形,因此图标素材可以借用iOS版软件的图标进行修改。如UC浏览器的图标,对主体图案添加阴影。

7.png

第二种方式如第四类图标,主要针对iOS版的图标进行调整使其符合规格(扩展圆角矩形使其成为直角的矩形),下图以会说话的汤姆猫2为例说明。

8.png

因此,在我们自己绘制图标时,可以根据图标特点,可以向系统图标风格靠拢的选取第一种方式,根据iOS版图标进行二次加工(如UC浏览器),无法靠拢的就选取第二种方式,对iOS版图标按系统规格进行匹配(如Talking Tom2)。

下面是我自己绘制的一些图标:

9.png
10.png
11.png
12.png


四、扩展性

完美图标的出现,一是为了统一图标的样式,是桌面更加美观。二是为了有一定的扩展性,可以设置不同的系统蒙版任意变换图标形状,为主题制作者提供便利。下面我们来看看绘制好的图标的扩展性吧~~
13.png


通过上图可以看出,类似Talking Tom2的带有明显边框的图标扩展性稍有不足,变换图标形状时出现了些许问题导致美观度下降。因此,为了扩展性更好,我们绘制图标时应首选绘制无边框图标。


五、绘制过程中可能出现的问题

首先看一下要求:

22222.png

通过上图可以看到,图标的规格要求为
136px*136px
全填充(对于米1/1s来说是90px*90px),不允许有透明像素,并且虚线框区域为裁切区域,图标主体部分不可太大,否则会被裁掉。

14.png



以上就是我对“完美图标”的一些简单分析,不妥之处请大家多多包涵~~欢迎互相多多交流~~大家快去绘制图标吧~~!!!^_^


作者: 雄狮    时间: 2013-3-7 18:10
呵呵~~顶一下
作者: 7he_devil    时间: 2013-3-7 18:14
顶一个~不错
作者: 米柚丶无缺    时间: 2013-3-7 18:15
果断必须顶~~~加油
作者: ymsy2011    时间: 2013-3-7 18:15
支持一下
作者: hanyuo_o    时间: 2013-3-7 18:22
@米二姐  
作者: 、Stamina    时间: 2013-3-7 18:25
学习了,会PS的童鞋加油
作者: 2192463    时间: 2013-3-7 18:26
支持
作者: hanyuo_o    时间: 2013-3-7 18:27
@米派瑞  
作者: 勿忘青春    时间: 2013-3-7 18:43
支持
作者: yangshuaioo    时间: 2013-3-7 18:44
工程师们没有发现UC浏览器的图标还是UC7.**时代的吗?现在是8.**的啦,更新一下
作者: hanyuo_o    时间: 2013-3-7 18:45
回复 yangshuaioo 的帖子

这个问题已经反馈给开发组^_^
作者: yangshuaioo    时间: 2013-3-7 18:48
回复 hanyuo_o 的帖子

谢谢,我的内测申请能通过么?
作者: 纸飞机66    时间: 2013-3-7 18:58
漂亮的说!!
作者: hanyuo_o    时间: 2013-3-7 19:23
回复 yangshuaioo 的帖子

这个我就不知道了。。。
作者: yangshuaioo    时间: 2013-3-7 21:28
回复 hanyuo_o 的帖子

电子邮件的突变也很烂,与V5风格格格不入
作者: Kurtis614    时间: 2013-3-7 21:42
楼主有心了。
作者: hanyuo_o    时间: 2013-3-7 21:43
回复 yangshuaioo 的帖子

还好吧。。图标风格在统一的大前提下保持一定的自由度与多元化是有好处的~风格太一致第三方图标就会格格不入。。
作者: 优雅GG    时间: 2013-3-7 21:45
楼主真相帝~
作者: 米派瑞    时间: 2013-3-8 10:55
赞!!!很到位!!!
作者: hanyuo_o    时间: 2013-3-8 17:37
回复 米派瑞 的帖子

谢谢派瑞夸奖~~
作者: 小Millet米    时间: 2013-3-8 17:42
我来过了~~!
作者: 秋阳西艾    时间: 2013-3-8 19:01
前排没有了,只有后面支持
作者: yyqmgy    时间: 2013-3-8 19:20
MIUI 因你更精彩
作者: hanyuo_o    时间: 2013-3-9 11:28
求支持~
作者: 浮雕    时间: 2013-3-9 11:31
相信这样一来,用户能在MIUI上看到美观而又风格统一的图标了
作者: hanyuo_o    时间: 2013-3-9 22:08
求支持!!!
作者: hanyuo_o    时间: 2013-3-18 21:42
自己顶一个^_^
作者: 幸福婴儿    时间: 2013-3-21 22:12
支持一下,这贴子不错呀!
作者: d李海洋    时间: 2013-3-22 08:27
不是一般人 支持你  荣组在召唤你呢  加油
作者: 不想再拉扯    时间: 2013-3-22 08:31
顶一个~不错
作者: Jenson_Kam    时间: 2013-4-25 23:35
把微信的图标改的太丑了!
作者: xeond    时间: 2013-4-28 08:45
做成小米桌面吧。
作者: Fiery_doom    时间: 2013-4-28 19:04
分析得很好!赞一个!
作者: 小l星星    时间: 2013-4-28 22:20
回复 hanyuo_o 的帖子

还可以
作者: vol0231    时间: 2013-4-29 09:42
怎么投稿
作者: over2s    时间: 2013-4-30 10:01
完美图标在哪里下载咧
作者: 李称    时间: 2013-5-2 11:31
不错
作者: 244071590    时间: 2013-5-2 12:12

下来看看
作者: 看淡就淡了    时间: 2013-5-3 16:00
支持下   说的很详细  很不错
作者: mxlwt    时间: 2013-5-7 17:22
楼主威武
作者: 030124    时间: 2013-5-9 08:36
如果全部变成抽象型就完美啦~风格要统一才行
作者: lijing0409    时间: 2013-5-9 09:15

作者: 喜欢单身    时间: 2013-5-14 08:13
很好哦…
作者: 喜欢单身    时间: 2013-5-14 08:22
楼主,能否教教我如何制作图标,可以的话请回复…
作者: 卓头lite    时间: 2013-5-19 23:58
看得似懂非懂的
作者: ~爱米~    时间: 2013-5-24 16:32
原来是这样子。。。。。。。
作者: zimu1990    时间: 2013-5-27 16:45
学习了
作者: 没表现的水瓶座    时间: 2013-5-30 22:24
啊好像很高端的样子。好厉害呀。哈哈哈
作者: 晴空小猪    时间: 2013-5-31 11:52
不错哦,说的很详细~
作者: 大漠の孤烟    时间: 2013-6-7 09:16
MIUI 因你更精彩!
作者: 斯蒂芬J    时间: 2013-7-6 02:59
我也觉得原装图标挺好看的,干净利落,简约而不简单。
不需要太过华丽,只需要足够的耐看!
我表示挺喜欢的!
作者: 善痞darren    时间: 2013-7-26 12:01
http://www.miui.com/thread-1315903-1-1.html
作者: mzsywz    时间: 2013-7-27 10:48
谢谢分享。
作者: 冰心如水    时间: 2013-7-27 11:17
来看看,学习了!
作者: 找女朋友5    时间: 2013-7-27 16:59
支持
作者: 半世癫丶    时间: 2013-8-1 16:47
感谢分享!!!
作者: xiaomimimimi    时间: 2013-8-2 15:01
技术贴啊
作者: y124920039    时间: 2013-8-20 18:35
图标问题
按照你的方法自己试了试,可是系统没有自动添加蒙版,这是什么情况?

操作步骤:
1 用方形图标替换

2 点 应用最近改动

是不是缺少什么步骤?求解释
作者: leizhouye    时间: 2013-8-29 19:27
帅气,浩大的工程
作者: feiage    时间: 2013-11-3 12:05
请教一下楼主,为啥不能有透明像素?如果透明会怎么样呢?谢谢!
作者: 147190426    时间: 2013-11-3 13:03
回复 hanyuo_o 的帖子

不错
作者: ZHENGWAN    时间: 2013-11-8 10:13
有道理
作者: e族汉编    时间: 2013-11-13 22:50
很不错的文章,大赞
作者: Youzitu    时间: 2013-11-17 10:42
赞!!!很到位!!!

作者: kaluoter    时间: 2013-11-18 06:19
学习来了
作者: 扬輑甚    时间: 2013-12-23 11:16
图标更新频率太慢,很多图标没有及时更改
作者: 聆听雨声chen    时间: 2013-12-23 11:24
感谢分享
作者: 山野村夫丶Wzy    时间: 2013-12-25 14:31
赞赞赞赞赞赞!
作者: 安乐仔    时间: 2014-7-2 09:24
谢谢分享
作者: 浅蓝麦加    时间: 2016-7-4 19:05
本帖最后由 浅蓝麦加 于 2016-7-4 19:07 编辑

小米完美图示主体内容被蒙版裁切
,上传总是遇到这个问题,不知道怎么搞得谁能帮忙指点一二





欢迎光临 MIUI论坛 (http://www.miui.com/) Powered by Discuz! X3