UI设计教程-透明质感手机电池电量显示图标

1、创建一个illustrator新文档，并把背景弄成黑色的，大小随意。首先我们来制作电池后憧钏荭拜部的金属盖，就像下面那样画一个形状并填充渐变，渐变从左至右依次是90%的灰、白以及全黑。另个还要将它羽化一下，羽化半径1px，随手降低它的透明度为75%。

4、到目前为此，效果看起来还不是很明显，接下来要给这个金属环加上高光，用钢笔工具如下图所示画一个形状，旁边所示渐变的左边是白色，右边是90%的灰，最还给它加上1px的羽化效果。下面部分的反射亮光使用渐变白到黑，赋予它们1px的羽化，透明度降到50%

5、现在我们开始电池透明部分的制作，用钢笔工具画一个如下图所示的形状，填充白色，并把透明度降到50%。

7、选中主体的两个形状，单击透明度面板的扩展菜单按钮，选择“建立不透明蒙版”，此时你也许看不出有什么变化，但在后面我们可以非常的改变背景颜色。

9、来点更细的东西——为顶部的高光添加透明蒙版，凸鹣沮北把高光复制一份粘贴到自己的前方(Ctrl+C,Ctrl+F)，并把它的透明度调回到100%，在外观面板里把跹哄署缴羽化拖到小垃圾筒里，并用75%灰到黑的渐变填充它，然后“建立不透明蒙版”。

10、如下画另一块高光，透明度50%，2px的羽化。

12、这步建立不透明蒙版后，要多一个动作——把图层的混合模式改为“滤色”，效果如下：

14、现在来绘制我们的最后一块高光…透明度50%，2px渐变…制作不透明蒙版…白到黑渐变…建立不透明蒙版…

16、为了有更丰富的视觉效果，我们再画两个狭长的圆弧片，左边的透明度了25%，模式为“叠加”，右边的透明度为50%，两个图形同时羽化2px。

18、接下来，调整这个渐变层的位置，让它处于所有高光和反射的下面而在背景层的上面，效果如下：

20、来点炫光…