$$ 案例欣赏
GameBoy家族最新成员GameBoy Micro自公布以来就备受关注和喜爱，一方面得益于其强大的游戏软件阵营，另一方面则是其主要的买点——精细！
GBM具备轻薄短小、金属机身、背光液晶萤幕与可替换面板等 4 大特色的 GBA 系列新机种 GBM，于2005年 E3 展首度发表。不同于任天堂以往产品的玩具风格与塑胶机身设计，GBM 主机以造型简洁的金属机身，搭配可自行替换的个人化面板设计，打造出高阶时尚的新风格。
GBM 采用尺寸 101.0mm x 50.0mm x 17.2mm，重量 80 公克的轻薄短小机身，2 吋的高精细度 TFT 背光萤幕，内建的锂离子充电电池，充电时间约 2.5 小时，可维持约 6～10 小时的持续游玩时间。在这里，我来教大家如何使用Fireowrks 8来绘制一个GameBoy Micro（简称GBM）如图1.1所示。
图 1.1 GBM完成效果
源文件下载$$ 思路分析
设计来源于生活，其实只要能够细心观察，身边的任何事物都可以在电脑软件中神奇地创建出来。根据官方的尺寸数据，我们可以使用Fireworks 8中的矢量工具来轻松地创建这个图形。其实GBM的形状很简单，主要是希望通过颜色的设置能实现一种真实的感觉。所以要结合渐变色和滤镜来完成。
$$ 实现步骤
1、新建一个Fireworks 8文件。
2、在弹出的【新建文档】对话框中设置画布的宽度为“600”像素，高度为“300”像素，背景颜色为白色。如图1.2所示。
图 1.2新建文档对话框
3、选择工具箱中的“矩形”工具，在画布中绘制一个宽度为“382”像素，高度为“189”像素的矩形。
4、选择画布中的矩形，在属性面板中的“矩形圆度”文本框中设置其圆角度数为“10”，同时使用对齐面板把它对齐到画布中心。效果如图1.3所示。
图 1.3把圆角矩形对齐到画布的中心位置
5、给这个圆角矩形填充线性渐变色。两端颜色为“#535A6D”,中间的颜色为白色，同时白色的范围适当靠左。使用指针工具，把渐变色的方向调整为45度倾斜。效果如图1.4所示。
图 1.4 渐变色调整面板
6、给这个圆角矩形添加边框，笔尖大小为“1像素”，颜色为“#CDCCD4”。这样底板的效果就制作出来了，如图1.5所示。
图 1.5 GBM的底板
7、接下来开始制作第2层面板，复制这个圆角矩形。
8、然后选择工具箱中的“椭圆工具”，在舞台中绘制一个宽度为“362”像素，高度为“30”像素的椭圆。
9、复制这个椭圆，然后分别对齐圆角矩形的上方和下方。效果如图1.6所示。
图 1.6 把椭圆和矩形对齐好位置
10、选择这两个椭圆和刚刚复制出来的圆角矩形。选择【修改】@@【组合路径】@@【打孔】命令对这三个路径进行运算。完成效果如图1.7所示。
图 1.7 打孔后的效果
11、选择打孔后得到的形状，填充轮廓渐变色。两端颜色为“#B3B1BC”,中间的颜色为白色，同时白色的范围适当靠右。使用指针工具，把渐变色的范围适当扩大。效果如图1.8所示。
图 1.8 添加轮廓渐变色
12、最好来制作最上方的面板。把刚刚得到的形状复制，填充黑色。
13、使用工具箱中的“缩放工具”，适当把得到复制出来的形状等比例缩小，然后对齐下方的面板。这时的图层效果如图1.9所示。
图 1.9最上方的面板效果
14、接下来要制作黑色面板的立体效果。选择最上方的黑色面板，在属性面板中的滤镜菜单中选择【Eye Candy 4000 LE】@@【Bevel Boss…】命令。
15、在弹出的“Bevel Boss”对话框中，选择Basic选项卡。设置Bevel Width的值为“3”；Bevel Height Scale的值为“100”；Smoothness的值为“35”；
16、选择Bevel Profile选项卡。设置斜角曲线的值为“Mesa”。其它设置不变。完成效果如图1.10所示。
图 1.10给面板添加滤镜
17、面板全部完成后，开始绘制屏幕。选择工具箱中的“矩形工具”，在舞台中绘制一个宽度为“173”像素，高度为“116”像素的矩形。并且把这个矩形对齐到画布的中心。
18、给这个圆角矩形填充线性渐变色。左侧的颜色为“#BED0DB”,右侧的颜色为白色。使用指针工具，把渐变色的方向调整为45度倾斜。效果如图1.11所示。
图 1.11绘制屏幕
19、给这个屏幕矩形添加边框，笔尖大小为“1像素”，颜色为“#CDCCD4”。
20、选择屏幕，在属性面板中的滤镜菜单中选择【斜角和浮雕】@@【凹入浮雕】命令。
21、在弹出的对话框中设置斜角宽度为“1”像素；对比度为“100％”；柔化为“1”。其它不变，这样的话可以让屏幕有一种凹陷的感觉。效果如图1.12所示。
图 1.12给屏幕添加滤镜
22、接下来制作经典的十字按键。选择工具箱中的“矩形工具”，在画布中绘制一个宽度为“65”像素，高度为“20”像素的矩形。
23、复制这个矩形，并且选择【修改】@@【变形】@@【旋转90°】命令，把这个矩形旋转90°。
24、使用对齐面板，把这两个矩形对齐到中心位置，然后选择【修改】@@【组合路径】@@【联合】命令对这三个路径进行运算。完成效果如图1.13所示。
图 1.13制作十字按键
25、给这个十字形填充线性渐变色。左侧的颜色为“#01000F”,右侧的颜色为“#6C697E”。使用指针工具，把渐变色的方向调整为45度倾斜。效果如图1.14所示。
图 1.14调整十字形的渐变色方向和范围
26、继续选择这个十字形，在属性面板中的滤镜菜单中选择【Eye Candy 4000 LE】@@【Bevel Boss…】命令。这样做的目的是为了给十字按键添加立体效果。
27、在弹出的“Bevel Boss”对话框中，选择Basic选项卡。设置Bevel Width的值为“3”；Bevel Height Scale的值为“100”；Smoothness的值为“0”；
28、选择Lighting选项卡。把高光的方向适当往左上角调整。
29、选择Bevel Profile选项卡。设置斜角曲线的值为“Flat”。其它设置不变。效果如图1.15所示。
图 1.15给十字按键添加滤镜
30、复制这个十字形，取消滤镜效果。把复制出来的形状填充给透明，边框给白色。然后适当放大。并且和原来的十字按键对齐好位置。效果如图1.16所示。
图 1.16制作十字按键的边框
31、选择工具箱中的“直线”工具，设置笔触的颜色为白色，然后在十字按键上依次绘制一些粗细为“1”像素，长度为“5”像素的直线。这样十字按键就全部完成了。效果如图1.17所示。
图 1.17完成后的效果
32、接下来制作右侧的圆形按钮。选择工具箱中的“椭圆工具”，在舞台中绘制一个“32X32”像素的正圆。
33、给这个正圆填充线性渐变色。左侧的颜色为“黑色”,右侧的颜色为“白色”。使用指针工具，把渐变色的方向调整为45度倾斜。效果如图1.18所示。
图 1.18给圆形按钮填充线性渐变色
34、复制这个正圆，然后把复制出来正圆填充黑色，缩小到原来的“95％”，也就是缩小到30X30像素。
35、这样两个大小不同的圆叠加在一起会出现一个边框效果。效果如图1.19所示。
图 1.19创建第二个路径点
36、把黑色的正圆复制，填充白色，选择选择工具箱中的“刀子工具”，把这个正圆裁掉一部分。效果如图1.20所示。
图 1.20使用刀子工具裁掉正圆的一部分
37、选择剩下的部分形状，在图层面板中调整透明度为“20”。如图1.21所示。
图 1.21设置形状的透明度
38、接下来在这个半透明的部分上面绘制高光。选择工具箱中的“钢笔”工具，在任意位置单击鼠标，创建第一个路径点。
39、然后适当移动，在第二点的位置单击并且按住鼠标进行拖拽。创建第二个路径点。效果如图1.22所示。
图 1.22使用钢笔工具绘制形状
40、把鼠标指针移动到第一个路径点上，这时钢笔光标的右下角会显示一个空心的小圆，表示闭合路径。单击鼠标，闭合这个路径。效果如图1.23所示。
图 1.23闭合路径
41、给得到的形状填充白色，边框为透明。
42、选择工具箱中的“部分选定工具”，首先拖拽路径点，调整为如图1.24所示效果。
图 1.24调整路径点的位置
43、按住键盘的【Alt】键，使用“部分选定”工具，拖拽当前形状左下角路径点两端的控制手柄，调整路径的形状。效果如图1.25所示。
图 1.25最终调整效果
44、把圆形按钮的所有组成部分组合起来，选择工具箱中的“文本工具”在按钮上输入字母“a”。
45、直接复制这个按钮，把按钮上的字母更改成“b”，这样第二个按钮也就完成了，调整好按钮和面板之间的位置，效果如图1.26所示。
图 1.26调整按钮和面板的位置
46、还剩下选择、开始按钮和L、R键。首先从下方的选择、开始按钮来制作。选择工具箱中的“矩形”工具，在画布中绘制一个宽度为“50”像素，高度为“5”像素的矩形。
47、在属性面板中设置矩形圆度为“100”。
48、给这个圆角矩形填充线性渐变色。左侧颜色为“#333333”,右侧的颜色为“#DFDFEB”。使用指针工具，把渐变色的方向调整为90度垂直。同时添加边框颜色为“#575E71”。效果如图1.27所示。
图 1.27渐变色调整面板
49、复制这个圆角矩形，然后对齐到面板下方。选择、开始按钮就制作完毕了。效果如图1.28所示。
图 1.28绘制选择、开始按钮
50、然后制作L、R键。选择工具箱中的“矩形”工具，在画布中绘制一个宽度为“90”像素，高度为“50”像素的矩形。
51、在属性面板中设置矩形圆度为“30”。
52、设置这个圆角矩形的填充色为“#E4E7EC”,并且添加边框，笔尖大小为“1像素”，颜色为“#CDCCD4”。如图1.29所示。
图 1.29 绘制L、R键
53、【修改】@@【排列】@@【移到最后】（快捷键：【Ctrl+Shift+Down】）命令把这个矩形放置到所有对象的下方。
54、把这个圆角矩形和整个面板对齐好位置，如图1.30所示。
图 1.30 对齐矩形和面板的位置
55、选择工具箱中的“部分选定工具”，拖拽左侧的路径点，调整为如图1.31所示效果。
图 1.31调整路径点的位置
56、复制刚刚得到的形状，选择【修改】@@【变形】@@【水平翻转】命令，把右侧的按钮也制作出来，而成效果如图1.32所示。
图 1.32 L、R键制作完毕
57、基本上完成了，最后稍微修饰一下，首先把喇叭孔绘制出来，绘制三个8X3像素的圆角矩形，设置如图1.33所示。
图 1.33 绘制喇叭孔
58、最后选择工具箱中的“文本工具”在屏幕上输入文字“GAME BOY”。字体为“Arial”；字号大小为“30”；颜色为“蓝色”；加粗；倾斜；字距为“-10”。完成效果如图1.1所示。好了，看看辛苦后的结果吧，是不是很有成就感呢？
【提示】GBM还是可以换面板的哦，想知道怎么更换具有个性话的面板吗？其实很简单。你可以选择黑色的GBM面板，然后在属性面板中的“填充类别”里选择“图案填充”就可以了，如果想填充自己的图案，还可以选择“其它”命令来从计算机中查找不同的图案。图1.34是我自己设计的几种不同风格的面板，你也来试试？
图 1.34 不同风格的面板
$$ 操作技巧
1、在渐变色调整面板中，不需要的颜色控制点可以直接从面板中向下拖拽删除。
2、改变渐变色的方向和范围时一定要选择指针工具。
3、使用钢笔工具创建大致形状，然后可以通过部分选定工具来进行调整。可以改变路径点的位置，也可以改变路径点两端的控制手柄。
4、当需要单独改变路径点一端的控制手柄时，可以按住键盘的【Alt】键。
顽主论坛 顽主教程 亚露死苦 版权所有，转载请注明出处，谢谢～！
www.go2here.net
