这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。某天上了木鼠老师的图标公开课，课上有示范毛玻璃拟态效果的图标，我就跃跃欲试想做一套。有的人T w y ? q d ; D问为什么做了那么久 UI，还去听基础课呢？我觉得在不同的阶段，对于基础内容会有不一X g _ S样的理解，会碰撞出不同的火花。
木鼠老师更多教程 https://xue.uisdc.com/uidesign/
带着这个想法，我开始逛3 e ( 2“避寒寺”和“追波”，找可以参考的作品。这套作品我挺喜欢的，作者还做出了 3D 视角的。作者名字我忘存了，如果有朋友知道的话，在评论帮我补上叭。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
先分析一下图标的结构。图标有Q 5 y o # t三层：底部几何色块、毛玻璃主造型，带有含义的白色图形5 T # * K e ;。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
再分析俯视角度时图标的表现，方便用工具表现。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
最后是颜色的归纳。作者用了饱和度非常高的颜色，基本都在右上角最尖尖的位置。d T O n w ) P
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
分析完以后可以开始临摹了…因为造型比较p x M简单，我没有临摹，直接创意发散做了另一套。选主题的时候我随便开了个 APP（当时打开的是微博），觉得个人中心的快捷入口图标主题可以拿来试试。我选了深色作为背} ; a B景，所以这套图标用到界面会比较难适配，和原 APP 风格也不符合。在这里单纯[ b Q z k x 6利用主题来做练习。
做底部的几何色z D ) `块时，形状可以尽量跟主: 8 2 N l z ^图形相关性大一些，加强它们之间的关联性，如果实在没法关联的也不必勉强。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
我降低了几何色块的面– * ; C ] U U 1 I积，增O h W _ A Q & s加了多一^ s 2层毛玻璃形状层，并且让白色的图形更灵活，而不是雕刻在毛玻璃层上。这是我理解了原作者图标的结构之后，自己进行的改变3 9 _ 3 ; (，效果还行。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
做的过程中，发现草稿箱如果里面放一张白色的卡纸，视觉效果还不错，所以我又做了另一种效果。最终呈现出来的效果只有草稿箱比较出彩，其它很牵强。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
拿「照片」这个图标来进行拆分，参数分别如下：
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
这是最后呈现的效果：
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
封面图参考了小米的屏保。我用 sketch 做的，效果n + n ; x | U一般，可能用 ps 做会更逼真吧。
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
临摹一套图标的时候，要带着目的去临摹，分析原作者每一步的处理。然后把图标拆分成不同的变量，修改这些变量的时候或许会得到不错C w ` Y X W / ~ K的想法r 1 f。
欢迎, N 4 [关注作者微信公众号：「一点牙线」
实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧
