《如何创造Iphone透明电池图标.》.doc

如何创造Iphone透明电池图标 blog, 视觉设计GUI, by 张雅秋. 　　在这个教程中，我会详细地介绍如何创造一个和iphone touch上相似的电池图标。电池“电量”的颜色可以改变，包括它的剩余能量。图标可以用在电池或能量计量应用程序上，或者仅作为一个图形设计。我制作使用的软件为Illustrator cs4。 　　最终预览 　　下面的图就是我们即将要完成的电池图像的最终效果。 　　第1步 　　新建一个文件，画一个纯黑色背景。你可以自己定义大小，我的是600px*400px。之后锁定这个背景层。新建一个图层就开始制作吧。先从电池底部的金属盖开始。如下，画出它的形状： 　　这里有个小技巧，一种画形状的简单方法：先用钢笔画出一半边线，让路径开放着，然后复制，粘贴，复制出形状的另一半平行移动一定位置，最后用钢笔把点连接起来封口即可。这种方法还有一个好处就是保证形状的对称性。 　　从左到右的渐变依次为90%灰，纯白，纯黑。除此之外，给物体1px的羽化（效果——风格化——）羽化）并把透明度调为75%。 　　第2步 　　复制（Ctrl+C）这个物体并直接粘贴到前面(Ctrl+F)。之后，使用箭头向右轻移1px。渐变填充色从左到右依次调整为80%灰，纯黑和80%灰。除此之外，透明度调回100%，去掉羽化（在 外观 面板中把羽化效果拉到回收站即可）。 　　第3步 　　现在我们在边缘处加入一些高光。使用钢笔工具如图所示画出相似的两个形状，并将其都填充为白色。把顶部的形状不透明度变为75%，底部的为25%，两个都加入2px的羽化效果。 　　再画一个底部的反射图形。从纯白到纯黑的渐变，1px的羽化，不透明度为50%。 　　第5步 　　现在我们开始画电池的透明部分。使用钢笔工具画出如下图形状，这里也可以使用建议的小方法先画出1/4。填充为白色并把不透明度降低到50%。 　　第6步 　　现在，我们也可以简单使用黑色到灰的的渐变完成如下图所示的效果，但是我想要在一个不透明遮罩层中做。可能小费些力气，但是这样做好以后修改会很方便。先复制并粘贴该形状到正前方（Ctrl+F）。把它的不透明度改回100%，如下进行填充，左侧是50%的灰，右侧是黑色。 　　第7步 　　现在，选中两个形状，之后拉开透明度调色板的菜单，选择制作不透明遮罩。虽然加了遮罩层，你可能没有看到有任何改变，但是改变文档的背景色你就会看到透明遮罩的优势了。 　　第8步 　　我们现在开始加上发光和倒影，使得玻璃质感看起来透明。先画两个形状，如下图所示。都填充为白色，不透明度改为75%。添加羽化——顶部的形状羽化值为2px，底部为3.5px。 　　第9步 　　现在为顶部高光加上不透明遮罩。在高光层上复制一层，把他的不透明度调回100%，去除羽化。如下添加渐变，从75%的灰到黑色。和之前一样，最终建立一个不透明遮罩。  　　第10步 　　我们要给玻璃加一个和金属相匹配的反射。画如下图一样的形状，填充白色，并添加2px的羽化效果，不透明度为50%。 　　第11步 　　例行惯例添加不透明遮罩。复制粘贴到所画形状的正前方（Ctrl+F），填充渐变色从15%的灰到85%的灰（不要忘记去掉羽化，外观面板-羽化拉到回收站） 　　第12步 　　再次创造不透明遮罩。同样，一旦创建遮罩，在透明度调色板中改变形状的混合模式为“滤色（screen）” 　　第13步 　　现在你可能知道如何制作反射了吧。所以如下图再画一个形状，填充为白色，降低不透明度到40%，羽化值为2px。 　　第14步 　　如图所示，同样复制它制作不透明遮罩，使用50%的灰到纯黑的渐变。 　　第15步 　　你在猜，现在呢？——创建不透明遮罩。 　　第16步 　　好了，我们做最后一个反射了。再一次，画出如下形状，填充白色，降低不透明度到50%，羽化值为2。 　　第17步 　　复制并粘贴形状来制作不透明遮罩。使用白色到黑色的渐变。 　　第18步 　　最后一次，创建不透明遮罩。 　　第19步 　　我们现在把电池剩余的金属盖加上。非常简单，都是一样的。选择金属盖所有形状，然后到“对象”——“变形”——“对称” 。这时window对话框会出现，选择轴心为“垂直”单选按钮点击复制。拉动复制后的形状到电池的另一端。 　　第20步 　　创作电池的阳极接头很快捷也很简便。选择金属端盖，之后复制黏贴到前面。全选好后按住Alt点击并拖动组上方或下方中心拉点，垂直收缩。你可能也要水平收缩一点。 　　一旦你调整好尺寸，把它们置于底层（Ctrl+Shift+[），然后向上一层（Ctrl+]）。如果操作正确，接头 应该正好在金属端盖的下面。 　　第21步 　　最后一件要为电池做的事情就是加 一些匀称长条来表现内部玻璃末端透视。如下图，画两个形状（画一个，复制出另一