【老妖怪课堂开课啦！】第二弹、不只是一键清理图标分析

好看的人才会注意到的申明：

1、帖子很长很无聊，而且不配图，属于“做学问”的帖子，类似论文。我估计你们看不下去。在乎的真的不在乎，不在乎的往死在乎。想学习、讨论或指教的接着往下看，打酱油的就关了吧，这帖子对你们来说无异于催眠曲，你们坚持不到看完。关之前打赏个几十百把的人气威望，我不介意。本帖暂不配图，因为我懒我骄傲。天天做图做得想吐，哪天闲了再来配。
2、本帖仅针对EMUI 10，其他版本可能有细微差别。其他版本我没研究过，别问我。
3、做图需要Photoshop基础，不会的请自学，别问我。自学入门并不难，技术提高全靠练。
4、如有错误遗漏，欢迎指正。

关于PS，讲个有(bēi)趣(cǎn)的经历，这段很长长长长长长长且没什么营养，嫌我啰嗦的请跳过这一大大大段精华。妖哥初一开始玩PS至今快20年了，后来大学也学的设计专业，虽说日常生活和工作中没有哥P不出来的图，但感觉自己还是刚入门，瀑布汗。实在没办法就手绘，完了再PS处理。大三那年，一个广告专业专科的朋友找我P图。我心想你丫广告专业的，PS不是该很熟么？PS不行，手绘不也是你们的必修课么？干嘛找我？直到一张发黄的，两寸的，黑白的，照片的照片，出现在我的邮箱我才恍然大悟...没错，照片的照片...这张照片，是手拿着纸质照片，用诺基亚坨坨机又拍了一遍...叫我给P成巨幅彩色海报，我曰了个鬼！！！P成彩色不难，但泥马几百分辨率的模糊原图，就是世界第一的PS大神来了都没办法P成巨幅海报好吧啦我的亲娘哎...无奈朋友是个S级女神，我那时候又单身，作为男人这种时候肿么能说“我不行”？？？只好硬着头皮翻出我几百年不用的画笔画板，对照照片画了一张二开的写实素描。然后裁成8张A4大小，扫描进电脑PS拼合。没办法，我穷，只有A4大小的扫描仪。然后又翻出几千年没用的电脑手绘板，又是各种画画画...然后各种PPP...忙活了整整整整整整一个周末，光是香烟就烧了差不多一条。我P图打游戏的时候，烟不离手，这是个坏习惯，但改不了了，奉劝各位千万不要在自己认真做事的时候抽烟，奉劝小盆友们不要学我高中就偷偷抽烟(我是我们重点中学8个火箭班里仅有的三个烟鬼之一)...后来才知道这是她实习那家大广告公司的老板布置给她们那批实习生的考核...变态老板！出这么难的题考验我的萌妹子！然后这个S级女神朋友就顺利转正了，鼓掌！！！然后没几天就跟她老板谈恋爱了，我去！！！最后只能敲了丫的一顿高价火锅外加两瓶好酒，变态老板买的单，但还是感觉好亏，内心邪恶的小目标没有达成...色字头上一把刀啊...后来过了两年两口子结婚的时候把我当媒人，发了一万的媒人红包...接过红包的时候双手发抖，周遭都以为我是因为红包很厚而激动的，踏马只有我自己知道我心里在呐喊“仙人板板，劳资想要的不是红包，而是，发红包的是劳资啊！”......开心时刻到此结束，你们开心了，我要泪目了...下面进入正题。


下一弹预告：实操教你做一键清理图标，外带图标福利
广告来得就是这么突然，往往都在你全神贯注关注剧情的时候。广告结束还有4秒，3秒，2秒，1秒，叮！你微波炉里的隔夜饭热好了！


做一个一键清理图标，首先要搞清楚几个问题：
1、图标路径
2、图标尺寸
3、图标构成
4、其他参数


下面我们挨个分析。

一、图标路径（EMUI 10）

主题包内的com.huawei.android.launcher/res/drawable-xxhdpi/

有的机型可能是com.huawei.android.launcher/res/drawable

如果主题包内两个路径都有，优先显示drawable内的图标。但！但！但！EMUI 10有的图标放在drawable内不显示。


比如，音量条的背景图片volume_popup.9.png，放在com.android.systemui/res/drawable-xxhdpi路径下才可以，放在com.android.systemui/res/drawable就不行。所以我觉得华为的主题制作真的很乱，让人头疼。

顺便吐槽一下图标的命名规则，也是乱得一P，我就不举例了，如果你们深入地完整地去制作一个主题，自然就会深有体会了。



二、图标尺寸（EMUI 10）

老版EMUI的尺寸是176*176甚至更小，各版本尺寸不尽相同，请自测。这里我只针对EMUI 10进行讲解。测量方法参考本人上一篇帖子↓
【老妖怪课堂开课啦！】第一弹、教你精确测量图标的标准尺寸

EMUI 10的APP图标标准尺寸是192*192。

三、图标构成（EMUI 10）

EMUI 10一键清理图标分七个部分：背景图、循环背景、安全状态、风险状态、危险状态、百分比数字、预览图。

背景图：文件名ic_widget_bg.png，顾名思义，是图标的背景，位于底层，通常采用与通用图标相同或同类风格的背景图片←这句有点难断句难理解但没语病，你们自己慢慢品，细品。

循环背景：文件名ic_widget_circle.png，官方主题编辑器中，此图标对应中文名称为“循环背景”。既然是“循环”，是不是可以动呢？老妖实测后发现，然并卵。结论是它与背景图的作用差不多，可以算是第二层背景图。通常做成透明，因为没什么意义，背景图只需要一层就好了。至于老版本这个图层是不是有别的用处，这里不讨论。

安全状态：文件名ic_widget_glowline_safe.png，这个图层会动！这个图层会动！这个图层会动！点击一键清理后，转圈的就是它！点击一键清理时，此图层围绕中心点顺时针转动。位于第三层。

做这个图标的时候是最费劲的，因为你需要在P图的时候找到它的中心点，在某些情况下还要保证你P出的图是旋转对称的。啥？不懂旋转对称？建议你关上本帖，关上花粉俱乐部APP，关上手机，关上房门，把初二几何好好复习一下。否则，就别心心念念地想做一键清理图标的事儿了。

风险状态：文件名ic_widget_glowline_risk.png，类似于安全状态图标，手机内存使用很多很多变得很卡时，一键清理图标上，安全状态图标会变成这个，点击清理后，如果内存使用降低到安全范围，则变回安全状态图标。与安全状态同层。

这个图标一般P成跟安全状态相同，但颜色为黄色，官方主题貌似就是这样。当然，如果你有好的创意，也可以不遵循这个设计。比如我正在做的一个纯黑白主题，不可能让它变黄破坏整体效果，那就把形状微微变一下喽。

危险状态：文件名ic_widget_glowline_danger.png，基本手机快被你用爆了才会出现，官方为红色。其他，参考风险状态。

百分比数字：不是图标，而是文字。位于最上层。详见“四、其他参数”。

预览图：文件名ic_widget_preview.png，显示于“窗口小工具”添加界面。展示一键清理图标的样式。


四、其他参数（EMUI 10）


一键清理图标涉及参数不多，就一个：com.huawei.android.launcher内的theme.xml文件里面，<color name="widget_text_color">#00FFFFFF</color>这条语句。

这是控制一键清理图标上的百分比数字的颜色和透明度的。
#号代表十六进制，后面的8位数字，每两位分别代表透明度、红色显示强度、绿色显示强度、蓝色显示强度。
简单来说就是前两位是透明度，后六位是颜色代码。

比如#50985b20，这个代码，就是十六进制的红色98强度，绿色5b，蓝色20。换算成十进制，写为152，91，32。50是透明度为十六进制的50，换算成十进制，是80。

注意这里50、80不等于50%、80%透明度，具体请参考帖子最后隐藏的“选修课”。

至于#50985b20这个颜色代码到底是什么颜色，你们可以自己去验证一下。友情提示，这颜色很黄很重口！不信的同学，验证完之后，吐完之后，请把截图发在回帖里。




下一弹预告：实操教你做一键清理图标，外带图标福利

——————选修课——————

游客，如果您要查看本帖隐藏内容请回复

谨以此帖，纪念本人于2020年520节—2020.5.22凌晨不眠不休60个小时的加班...磕傲靠！

占楼备用。

还是那个有(bēi)趣(cǎn)的故事，辛辛苦苦花了一整天的巨幅画像，要导进电脑。也想过拍照，在那个手机像素只有几百的年代，拥有一台单反是一件多么幸福的事情。不巧，我刚好有。借来了影楼的专业补光灯，把画像拍了照，导进电脑去P，发现不管怎么拍，还是有轻微的镜头模糊和畸变。最后决定裁了扫描，裁的时候心里在滴血，就像自己的孩子被自己活活分尸一样的心情...然后笑点来了，合租的室友买了一只手扒鸡回来，整只那种！我在分尸，哦不是，我在裁画，他在撕鸡，还啃得津津有味...然后我吐了...然后他也吐了...

再占楼

学习

沙发

666

牛

谢谢分享！

学习吧。

赞