前言：最近飞鱼迷上了PSDTUTS 上的 那些华丽的设计教程，一路狂吸，带着对设计最高境界的狂野，吸得满屏是英文，很是享受。享受之余，突然冒出个想法，就是想翻译一些自认为有强烈的利用价值的教程share一下。也不妄广大劳动人民(网友)不远千里来小站一瞅。
PS：翻译的不对不要打我哈。

—————————————-华丽的分割线————————————–

如何制作透明质感的电池图标

作者：Bill Labus
制作工具：Adobe Illustrator
原文地址：猛击此链接 (我发誓绝对没有病毒)
在此教程中，我们将详细地介绍如何制作一个类似 iPhone touch 上的电池图标。该图标的制作要点是：电池的容量是可以根据不同情况(电量)改的。目的是为了便于开发应用，更容易生成每个电量时期的图片。

最终效果图

下图就是我们朝思暮想的最终效果图。

步骤 1

首先我们打开 Illustrator，新建一个文件，并填充黑色背景，至于尺寸嘛，随便，我的尺寸是600*400。
飞鱼大声吼：当然有人会问AI(Adobe Illustrator)里我不知道怎么弄背景，比如作为菜鸟的我。解决方法很简单，画一个尺寸600*400的黑色矩形，然后锁定该矩形当背景就ok，我就是这么做。^_^
建立好文档后，我们从电池图标的尾部开始制作，画一个如下图的形状，并给该形状填充渐变色，参数如下：渐变角度(Angle): -90。渐变色从左到右分别为:90%的灰，白的，黑色。位置请参考下图。然后，将该形状羽化1像素(1px)，并且将透明度调整为75%。
飞鱼提示：如果找不到渐变框，请猛击 窗口(Window)-渐变(Gradient)；
透明度：窗口(Window)-透明度(Transparency)；(在渐变边上，囧~~~)
羽化：效果(Effect)-风格化(Stylize)-羽化(Feather)。
可能会有人迷茫在AI里该形状要画多大，我告诉你，把外框黑色部分想象成600*400，按比例估计吧，对之后的步骤有帮助。

步骤 2

复制一份该形状(ctrl+C)到该形状的上面相同位置(ctrl+F)，将复制出来的形状向右轻移一个像素(1px)。填充渐变：80灰，黑色，80%灰(如下图)。将透明度调回100%，打开外观(Appearance)面板去掉羽化效果(丢到垃圾桶里即可)。
飞鱼提示：可能有人用AI的时候会对1px像素没概念，因为是矢量的。方法也是有的：视图(View)-像素预览(alt+ctrl+Y)，就可以呈现出类似像素的显示方式。

步骤 3

增加一点光泽效果，用钢笔工具画两个如下图的形状，填充白色，分别将上下两个形状的透明度设置为：75%和25%。同样，将两个形状都羽化2px；

步骤 4

可能还不明白上面的效果怎么回事，这一步我们要添加一些金属光泽。用钢笔工具绘制如下图所示的形状，添加渐变效果：白色，90%灰，并且羽化1px；
同样，底部的光泽形状如图，渐变效果以及羽化同上，再调整透明度到50%。
到此为止我们的底部部分制作好了。

步骤 5

接下来，我们开始制作电池图标的中间的透明部分。用钢笔工具绘制如下图的形状，
填充白色，透明度50%。
提示：一个简单的方法来画这个形状就是先画左半部，记住，不要将右边的路径闭合，然后复制路径，用钢笔工具将锚点连接即可。这样就可以保证左右对称。
飞鱼提示：绘制该形状时，可以先绘制一个矩形，然后用钢笔工具在左右添加锚点(钢笔工具上出现+)，然后拖动锚点(ctrl)，平滑(alt)。看不懂？ 过些天研究一下钢笔的用法，写个小教程。

步骤 6

这一部是该教程的精髓部分，请仔细阅读。在这一步里，我们将介绍一下透明蒙版的制作。至于为什么要做透明蒙版呢？为了便于修改 电池容量 的颜色以及 其他值。
为了建立透明蒙版，我们先复制一下图中的形状，恢复透明度为100%，填充渐变：50%灰，黑。如下图

步骤 7

然后选中在图层面板中(F7)上下两个形状，在下图所示的透明面板右侧的弹出下拉菜单中 选择 建立不透明蒙版(Make Opacity Mask)。这样就建好了透明蒙版(很简单吧)，可能你看不到有什么差别，只要你改变背景色你就可以体会到透明蒙版的透明效果。
飞鱼解说：上图透明蒙版跟photoshop里的蒙版一个概念，就是白色通过，黑色的意思。如上面说的：两个形状中，上面的渐变图层为蒙版，下面的白色是显示部分，当然也可以是其他颜色，甚至是图片。
透明蒙版让我们实现了渐变透明效果，该蒙版效果非常实用，

步骤 8

我们再增加一点光泽，使中间部分看上去像玻璃一样的透明光泽效果。绘制两个如下图的形状，填充白色，设置透明75%，分别将上下形状羽化2px 和3.5px。

步骤 9

同样我们给上图两个光泽效果添加蒙版效果。复制形状，透明度100%，去掉羽化效果。填充渐变：75%灰，黑。制作蒙版效果(方法同上)。效果图如下：

步骤 10

然后给在正面再加个光泽效果。绘制一个白色的形状如下图，设置透明度50%，羽化2px。

步骤 11

复制形状，填充渐变：15%灰，85%灰。(不要忘了去掉羽化效果)。

步骤 12

继续制作透明蒙版，建立好透明蒙版后，将透明面板(Transparency palette)上的图层混合模式变为滤色(Screen)。

步骤 13

现在的图应该有点光泽效果了吧？你也差不多掌握了如何制作光泽效果了吧。为了让其更具光泽，我们再绘制一个如下图的形状，透明度40%,羽化2px。

步骤 14

复制形状，填充渐变：50%灰，黑。(不要忘了去掉羽化效果)。方法同上。

步骤 15

然后呢？你猜。 当然是添加蒙版效果。

步骤 16

好吧，我们继续添加最后一个光泽。再一次用钢笔工具绘制如下图的形状。白色，透明度50%，羽化2px。

步骤 17

复制形状，添加渐变：白色，黑色。如下图

步骤 18

添加蒙版效果。到此位置中间部分的透明玻璃效果制作完毕
飞鱼的感叹：总的来说，精髓就在于蒙版的运用，以及渐变的调试

步骤 19

这一部我们制作另一边的电池盖。该步制作非常简单，因为两边都是一样的。选中左边电池盖的所有形状，分别选择 对象(Object)-变换(Transform)-对称(Reflect)，在弹出的面板中，选择垂直(Vertical)，点击复制(copy)按钮即可。然后你会发现新复制了一个电池盖，拖动到电池右侧即可。如下图。
飞鱼的提示：建议将不同不分的形状分别放到不同的图层，如，电池盖，电池玻璃部分。便于管理以及选择

步骤 20

接下来制作电池顶端的头。方法也是很简单的。同上复制电池盖，然后按住alt，拖动顶部 或者底部 中间的 变换点，进行垂直缩放。使它看起来更像电池顶端的头。当然水平部分也适当地缩放。
调整好大小后，把该电池头放到电池盖下方。首先用快捷键(ctrl+shift+[)将该图弄到最底层，然后上调一层(ctrl+])。效果如下图。
飞鱼的提示：此时上一步所说的分层建议就起到效果了，只要在图层面板中，拖动电池头层到电池盖下方即可。

步骤 21

最后我们要制作的是 电池中间透明部分两端的切面效果。绘制两个如下图的形状(可以画一个然后复制)。左侧的形状填充黑色，25%的透明度。右侧的填充，白色50%的透明度。将左侧的黑色形状的 图层混合模式改为 叠加(Overlay)。最后将两个形状羽化3.5px。

步骤 22

从这一步开始，我们制作电池的容量效果。用钢笔工具画一个如下图的形状，当然电池量(多少宽度)随你喜欢。颜色也随你喜欢。我选择2/3电量，用绿色渐变效果。如图。

步骤 23

只要将电池量层拖动到中间透明层下方就可以把电量装入电池里。效果如下：

步骤 24

最后，复制一份 透明部分的 右侧切面效果的形状，到电量层上，制作电量的切面效果。适当调整其透明度，以达到最佳效果。

步骤 25

在最后的最后，让我们添加一些金属高光效果。制作一些白色圆，如下图。适当羽化，并减小透明度即可。

步骤 26

给电量增加一个外发光效果。效果(Effect)-风格化(Stylize)-外发光(Outer Glow)。在弹出面板中，将图层模式改为 滤色。颜色用绿色。透明度75%，模糊11px。
飞鱼的疑问：这一步飞鱼做不出效果，不知道是软件问题，还是人品问题。

结论

懒得翻译了。大同小异嘿嘿。打完收工。再次展现最终效果图

飞鱼的结论

第一次花了2个小时时间翻译外文。还是蛮有成就感滴。顺便也贴上我边翻译边做的图图。^_^

为了提高翻译效率，飞鱼我就直接copy了原址的图片，虽说是英文的，但是可读性还是挺强的。也为了提高浏览速度，我就将图片上传到了yupoo上了。

您可能还对这些日志感兴趣

• 飞鱼的乱翻乱教-编号002-美味青苹果
• 乱翻乱教 – 制作可爱的小鸟勃起图标
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 乱翻乱教 – 时尚导航设计 – 傻瓜版教程
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版