准备活动

都说我解说技术比较银荡，那就更银荡一些 ^_^ 要大干一场，那是需要一系列性情道具的····
M8的系统是 基于wince 封装出来的，这个大家应该都知道。所以咱们需要的东西 如下：

• 1. Visual Studio 2008 下载地址 点进去 捡专业版 下载
• 2. M8SDK 下载地址 是魅族的开发社区的下载地址
• 3. M8SDK中文版文档 同楼上
• 4. M8 一只 （选填） 如果你真的想开发M8应用，去整一个，因为同步调试比模拟器调试要真实多了。
• 5. 同步驱动 下载地址 官网有的下
• 6. 电脑一只 不要告诉我你想在M8上开发 =，= 我用的win7 64位，很销魂
• 7. .NET Framework 3.5 下载地址 win7 就不用装了。

前戏

前戏一定要有不然怎么OOXX，是安装软件，且顺序如下：
.NET Framework 3.5 (win7)可以忽略
Visual Studio 2008 选择自定义安装，除了C++意外的都不要勾选(除非你还要开发其他东西)，我就是这么干的，当然MSDN也不要装了，有问题google 吧，然后是耐心等待，看看X片吧。

然后装 M8SDK(SDK要在vs之后装，不然是装不上的)，这里要注意一下，论坛里有老多人卡在这里，多少也要先看看SDK文档再下手么，文档里写得还是蛮清楚的，虽然有些地方要误导人。如下图，装的时候，不要勾选 文档部分。

接着是装驱动，叉p 跟win7 要装的东东不一样，去文档里看吧。这里就不说了。确保同步成功就ok。

前戏结束， 应该湿了~~~~~ 哼哼~~~

剥橘子，带TT

论坛里好多初学者碰到了N多关于怎样开始这个hello M8 的项目。这个灰常蛋疼，虽然SDK文档里 有步骤但是却很蛋疼的漏掉点什么，总是调试不成功，同步不成功。就像 正要OOXX 的时候同事来电话一样，立马倒塌~~~~

那么开始我们的hello M8 的项目，
1. 新建项目，智能设备 – win32智能设备项目 见文档 – 创建基本MZFC程序
按照文档里说的 复制 hello M8的程序到cpp里。

2. 项目建好后， 选择 项目 – XX属性 配置(重要) ，这里文档虽然有步骤，但是似乎漏了点，
首先是 添加依赖项 选择[链接器]-[输入]-[附加依赖项] 写入： mzfcs.lib platformApi.lib (文档里有说明) 如下图：

3. 接下来是设置预处理器，[项目]-[属性]-[C/C++]-[预处理器]-[预处理定义]，添加 MZFC_STATIC，这里文档的图片容易误导人，因为文档中图片中只有一个MZFC_STATIC，很多人以为是吧其他都删掉，其实不是，是在前面追加一个。不然后面编译的时候会出现如下图的错误。

4. 然后是设置 不使用预编译头，这一步文档里没说，但是论坛里好多帖子都在问这个问题，不下十个，觉得官方有必要改改文档了，
[项目]-[属性]-[C/C++]-[预编译头] 设置成 不使用预编译头，顺便贴一个没设置这一项编译不成功的截图。

5. 使用模拟器调试，如下图 M8SDK Emulator 代表模拟器 模式(默认就是这个)。 选择[生成] – [编译] Ctrl+F7，看到下方成功了之后，再按(F5)[调试] 应该就跳出个 恶心的模拟器，为什么恶心呢？因为一开始是黑屏的以为模拟失败，等了10秒，丫才开机·· 囧rz 还要开机啊······，并且效果不好，感觉怪怪的速度也不很慢。有大虾知道如何优化，请留言告诉我下，我补上。

6. 同步调试。这一步留给有小八的童鞋们。连上小8后，(确保同步驱动装好，同步模式可以跑)，然后将 M8SDK Emulator 下拉 选为 M8SDK ARMV4I Device，然后点击右侧的小手机按钮进行手机同步测试。看看是否同步，

7. 配置远程目录，这个文档里也有说明，选择 [项目]-[属性]-[部署] 设置远程目录，建议： 将目录设置成Disk目录下的某文件夹，如\Disk\MM ， 文档里的说明是Windows 生成之后找都找不到，

同样，设置远程调试文件 [项目]-[属性]-[调试] ，远程文件，如下：

8. 编译生成文件 这个是关键的一步，因为之前刚开始整的时候一直连接不到手机，都是直接弹出个调试器，或者提示找不到远程文件。

9. 屡试不爽，久久不放，然后按下F5 应该就能在你的小八上看到运行的软件了。

好吧，开始你的M8之旅吧。

有问题可以留言欢迎讨论。

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

• 不走寻常路–Win7下vs2008搭建M8开发平台
• 整得连妈都不认识了 – M8 新固件9.6.X 试用体验
• M8 到手 内牛满面
• 乱翻乱教 – 时尚导航设计 – 傻瓜版教程
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版

时尚导航设计 – 傻瓜版教程

作者：飞鱼
制作工具：Photoshop cs3
最近给一个朋友的一个教育类的网站 做了个设计稿，后来因为公司开始忙了，就只弄了个设计稿，就这么停掉了，说来也惭愧，人懒啊~，不过也不吝啬，整理了一下这个头部的制作过程放出来分享给大家。希望有所收获
最近yupoo，发神经了，然后又被花花教导了一下，把图片放在MT上了。 = =

最终效果

步骤1 准备工作

首先当然是新建文件啦，尺寸为 1150*1000，

按ctrl+R调出标尺。设置标尺的单位为“像素”(在标尺上右键)，然后在左边的标尺上拖动，拉出参考线
分别拉一条参考线在100px，和1050px
飞鱼：我比较喜欢950px的布局，两边各留100px的留白。

拉好参考线的效果图 如下：

步骤2 制作顶部导航

通常一个网站的头部包括一个 顶部的导航，显示欢迎， 登录，帮助等信息。
新建一个图层(topline)，使用矩形工具，在顶部，画一个颜色为#e9e9e9 的矩形，高度为25像素左右。(可以根据自己喜好调整)

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

• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 发现一个jQuery初学者的天堂
• 飞鱼的乱翻乱教-编号002-美味青苹果
• 飞鱼的乱翻乱教-编号001-水晶质感icon

jQuery图片轮播插件

作者：飞鱼
制作工具：notpad++
使用语言：javascript
最近写的这个图片轮播插件，于是乎拿出来晒晒，分享点菜鸟心得。大虾可以旁观^_^

功能描述

就是一个简单的js轮播，第一张图变白，然后切换成第二张图。鼠标放上去后图片不切换，移开又开始了。 可以给组图片加效果，并且不冲突。
有空补一下 代码注释，以及 setInterval 的应用

演示效果图

演示地址： 跳转地址

js 代码

(function($) {
  $.fn.fadPicture = function(d) {
    var df = 3000;
    delay = d ? (d < df ? df : d) : df;
    $(this).each(function(i){
      var t = $(this),
        mc = function(){
          var  ul = t,
            first = ul.find('li:first');
          ul.fadeOut('show',
            function(){
              first.appendTo(ul);
            }
          );
          ul.fadeIn();
        };
      var interval = setInterval(function(){
        mc();
      }, delay);
      t.hover(
        function(){
          clearInterval(interval);
          t.data('start',false);
        },
        function(){
          interval = setInterval(function(){
            mc();
          }, delay);
        }
      );
    });
  };
})(jQuery);

使用方法

$(document).ready(function(){
  $('.fadPicture').fadPicture();
  // $('.fadPicture').fadPicture(5000);  //时间5秒
});

html写法

<ul class="fadPicture">
      <li><img src="http://001.jpg" alt="001" /></li>
      <li><img src="http://002.jpg" alt="001" /></li>
      <li><img src="http://003.jpg" alt="001" /></li>
    </ul>

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

• 发现一个jQuery初学者的天堂
• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]

最近开始频繁接触jQuery，这个东东的确是个好东西，能让一个js菜鸟也能装回大虾(
我的blog文章标题右侧的折叠功能就是用了几条jQuery代码实现滴)，
今天偶然发现这么个jQuery教程站[网址在此]，把现今网上流行的一些js效果解剖地苗条苗条，然后用可爱的几条代码实现。
灰常感谢，要经常去光顾哦，可以学到好多东西呢。^_^
PS：我找了几个常用的.
循环滚动新闻列表
仿淘宝的一个图片切换效果.(改进版)

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

• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 闭包式 js架构 前端书写心得(上)
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]

如何制作美味的青苹果插图

作者：Eren Göksel
制作工具：Adobe Photoshop
原文地址：猛击此链接 (英文强悍的可以参考原文)
在此教程中，我们将使用Photoshop来制作一个苹果图案。
飞鱼沮丧地说：令人遗憾的是，该文章开头就注明了，如果想要psd文件，以及教程文件，请付多少多少钱(9美刀/每月.好高消费)。 所以不知道会不会涉及到版权问题，所以这次我就用自己边翻边截的图吧^_^

最终效果图

步骤1

新建一个如下图尺寸的psd文件。800×800 300dpi。

步骤2

新建一层“苹果”，使用椭圆选框工具(M)绘制一个正圆选区(如下图)。并使用渐变填充工具(G)填充渐变色，其中前景色为:#88cc33 背景色为:#005522。效果如下：

步骤3

然后 打开图层的混合选项，添加内阴影。参数如下：

步骤4

新建一个图层“纹理” ，按住ctrl 点击 “苹果”层 建立选区，分别选择 滤镜(Filter)>渲染(Render)>云彩(Clouds)，如下图：

然后选择 滤镜(Filter)>扭曲(Distort)>球面化(Spherize) 注意：做球面化的时候要保持选区,不然会出现错误. 球面化的参数: 数量:100% 模式:正常。 然后修改图层模式为：柔光 。效果如下：此时该圆变得富有质感。

步骤5

在顶部新建一层“斑点”,给苹果添加一些小瑕疵。选择笔刷工具(B), 修改前景色为#ccdd99。调整笔刷尺寸为5 硬度100 。同样按住ctrl 点击 “苹果”层 建立选区，在苹果上点出一些小斑点。然后将尺寸缩小到3，再点一些小斑点，增加层次感
。分别选择 滤镜> 模糊>动感模糊 参数分别为：角度90 距离3px;
飞鱼小声地说：那个斑点就少点一些, 适量即可,不然也太坑洼了点 haha

然后做一个 球面化(上面有说)。就产生下图。

步骤6

新建一图层“凹槽”，制作苹果顶部凹槽部分。使用椭圆工具(U)绘制,如下图的白色椭圆。在“凹槽”上方新建一层“凹槽阴影”，同样，绘制一个黑色的圆。如下图。
提示：原文意思是使用选区工具(M)来制作这两个圆，意思一个样，只不过使用椭圆工具时你可以调整圆，然后将其栅格化。

然后选择 “凹槽阴影”层，点击右键 创建剪贴蒙版。然后选择 滤镜> 模糊>高斯模糊 参数 为 17px ； 将图层 透明度 改为50%；选择 “凹槽”层，将图层模式改为 正片叠底。效果如下.
要点：就想原文所说的，可以微移黑色层，调到适当位置即可，以体现真实感。

步骤7

这一步我们制作一些高光效果。新建图层 “高光1″。绘制如下白色形状。方法可以有很多，原文的方法就是利用选区工具(M) 先画个圆，填充白色，然后再用选区工具画另外一个圆。删除掉。效果图见原文。
另外一种方法，应该更准确，就是利用椭圆工具。绘制一个圆(形状)，然后在同一个形状层内再绘制一个形状减去重叠部分即可。调整到适当位置后 将图层栅格化就能达到原先的效果。 如下图

然后将图层 进行一次 高斯模糊(如上) 参数：10px 。

步骤8

用同样的方法 新建图层 “高光2″。绘制如下白色形状，然后 进行高斯模糊，参数8px

步骤9

在”高光1″层下方 新建一图层”黑色”，使用油漆桶(G)填充黑色。然后使用按住shift 选择中 “黑色,” “高光1,” 和 “高光2″ 等三个图层，将三个图层合并，命名为“高光”。分别 选择 滤镜>画笔描边>喷溅 参数：喷色半径(6)平滑度 (14)。按住ctrl 点击 “苹果”层 建立选区，反向，删除其余部分。将图层模式改为：滤色

步骤10

在”斑点” 层上方新建 一层 “红色” ，在如下图位置出绘制一圆,填充：#ffbe00。
按住ctrl 点击 “苹果”层 建立选区。 进行一次高斯模糊：50px。然后修改图层模式为：色相

步骤11

同样在， “红色” 下方新建一层 “黄色” ，绘制一圆，填充#fff444，使用步骤10相同的方法。高斯模糊：50px。图层模式为：高光。透明度为：75%。

步骤12

在图层顶部新建一图层“倒影”。使用选区工具制作如下图。方法：用选区工具(M)绘制一个大矩形，然后用选区工具(M)删去中间部分即可。

步骤13

选择图层“倒影”，添加图层蒙版(图层>图层蒙版>显示全部，或者点击图层面板下方第三个图标)，在蒙版里填充如下图中的渐变。
飞鱼小声地说：借用一下原图，这图做起来麻烦，我懒
对“倒影” 做一次高斯模糊：4px(适当增减)；然后再分别选择 编辑>变换>变形。在上方属性栏里的下拉框选择：扇形。参数：弯度：-20%。然后 再调整一下位置，以及角度。效果图如下

步骤14

在顶部新建一层“背光” ，按住ctrl 点击 “苹果”层 建立选区，填充白色。保持选区，使用向左键盘将选区向左移动10px，然后删除选区部分。再一次按住ctrl 点击 “苹果”层 建立选区，使用一次高斯模糊：7px。选择橡皮工具(E),将尺寸调到270左右，硬度为0%；在如下图所示位置，擦除白色背光。
飞鱼小声地说：再次借用，偷笑ing

当然也不忘我做的东东啦··

步骤15

现在是不是看着还不太像苹果啊··囧~~~ 当然啦 没有柄当然不像啦··
这一部开始制作叶柄，离成功不远了。
新建一层“叶柄”，使用钢笔工具(P)绘制如下图 的叶柄路径(路径按钮 在钢笔属性面板上的第二个图标)。然后选择笔刷工具(B)，然后打开画笔面板(F5)，在 形状动态中 设置：控制为：渐隐 20；最小直径：20%。 设置笔尖形状： 直径14px 硬度100%。 然后设置前景色为 #884411。
飞鱼提示：有些人的画笔面板没有打开扩展模式，就是面板上没有下图中的那些按钮。打开扩展模式很简单，在右侧的弹出下拉按钮里找到勾上就可以
然后点开路径面板。双击路径，弹出储存路径(后面有用)，选择路径，右键 > 描边路径。就可以画出叶柄。
按住ctrl 点击 “凹槽”层 建立选区，使用矩形选区工具(M)按住shift 绘制如下选区。反向，删除多余的叶柄。

步骤16

新建一图层“叶柄高光”，使用画笔工具，将尺寸设置为：5px；将前景设置为白色，和画叶柄同样的方法。画出叶柄高光部分。
按住ctrl 点击 “叶柄”层 建立选区，高斯模糊：1px。图层透明度改为40%；
选择“叶柄”层，分别点： 滤镜>杂色>添加杂色。 参数：数量(3%) 单色, 高斯分布。
使用 加深工具(O)，使用一个较大且平滑的尺寸(65px,硬度0%)，在叶柄上涂抹，使其产生阴影效果。如下图

步骤17

在“叶柄”层下方新建一层“叶柄阴影” 。绘制一个黑色矩形，如下图，自由变换ctrl+T，然后进行高斯模糊(7px)，然后使用一个柔和的大尺寸橡皮擦(E)工具，擦去
上方部分阴影。像去除“叶柄”下方 部分的方法一样，去除阴影的下方部分。修改图层透明度为：60%。

步骤18

到此为止，苹果部分制作完毕，可以将苹果的图层编个组命名“大苹果”以便以后使用。给背景上色：#004400。
飞鱼得意地笑：这样是不是已经出来苹果的样子啦··，别激动，后面还有
下面做一点微调。将“高光”层，“红色”层，“黄色”层的透明度(85%)，“凹槽阴影“透明度(95%),“背光”(60%),“倒影”层(55%)。(可以根据自己感觉调整)
为了使苹果更有质感，我再给“苹果”层 添加内发光效果。参数如下：混合模式(叠加)，透明度(30%)，大小(20px)，颜色(#003300)，然后我把内阴影的 透明度改为45%。
最后我给“斑点”层增加了一个外发光 效果。参数如下：混合模式(叠加)，透明度(60%)，大小(8px)，颜色(#2b2b2b)。

步骤19

在“大苹果”组下方，新建一个图层“阴影”，制作苹果的阴影。方法很简单，绘制一个黑色椭圆，然后进行高斯模糊(40px) 就可以了。

步骤20

在背景上方新建一层“反光” ，绘制场景。同样，绘制一个大的椭圆填充：#338833
然后高斯模糊(75px)。

步骤21

飞鱼邪恶地笑：终于到最后一步了，这一部堪称 该教程 最神奇的一步

因为目前 该苹果看起来还太圆，那么就对“大苹果”组，进行一次整形。合并“大苹果”组(建议复制一份备用)分别选择 编辑>变换>变形，使用你神奇的鼠标对各个节点进行微调，调成如下图形式，让苹果的形状更像苹果。

打完收工

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

• 乱翻乱教 – 制作可爱的小鸟勃起图标
• 飞鱼的乱翻乱教-编号001-水晶质感icon
• 乱翻乱教 – iOS5 通知栏背景制作
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡

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

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

作者：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图片轮播插件 – 菜鸟版