当前位置:错新网文章中心网站设计软件应用 → 使用Fireworks 8制作GameBoy Micro

使用Fireworks 8制作GameBoy Micro

减小字体 增大字体 作者:admin  来源:www.hack50.com  发布时间:2012-4-21 7:21:06
$$ 案例欣赏
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所示。



点击在新窗口查看全图CTRL+鼠标滚轮放大或缩小  
图 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是我自己设计的几种不同风格的面板,你也来试试?



点击在新窗口查看全图CTRL+鼠标滚轮放大或缩小
图 1.34 不同风格的面板

$$ 操作技巧
1、在渐变色调整面板中,不需要的颜色控制点可以直接从面板中向下拖拽删除。
2、改变渐变色的方向和范围时一定要选择指针工具。
3、使用钢笔工具创建大致形状,然后可以通过部分选定工具来进行调整。可以改变路径点的位置,也可以改变路径点两端的控制手柄。
4、当需要单独改变路径点一端的控制手柄时,可以按住键盘的【Alt】键。

顽主论坛 顽主教程 亚露死苦 版权所有,转载请注明出处,谢谢~! http://www.go2here.net

本文引用网址:

在下列搜索引擎中搜索“使用Fireworks 8制作GameBoy Micro”的相关信息:

谷歌搜索 百度搜索 雅虎搜索 搜狗搜索 搜搜搜索 必应搜索 有道搜索
你可能还喜欢以下文章
  • 1雨后小故事 qq表情姐弟雨后小故...
  • 2四川美院女生遭前男友发艳照报...
  • 3王婷不雅视频 王婷全裸艳照 王...
  • 4林晨钰爆奶门照片ed2k 林晨钰爆...
  • 5段亚兰偷拍门短片流出 段亚兰偷...
  • 1百度联盟:哪些做法会被认为是...
  • 2如何搭建第一个网站?做网站有...
  • 3Discuz!不能正常发送邮件-DISC...
  • 4说说"电视棒"为什么卖得这么火...
  • 5个人站长建立网站的步骤
  • 1中国女大学生的淫靡生活
  • 2合肥艳照门事件 合肥艳照门全套...
  • 3武汉十七中教室门种子 教室门q...
  • 4嫩白少妇与猛男户外疯狂车震遭...
  • 5林晨钰爆奶门视频qvod 林晨钰爆...
  • 1Xen和虚拟化技术学习指南
  • 2瑞星播报--“灰鸽子变种HO”病...
  • 3如何做服务器安全维护?有哪些...
  • 4Windows Server 2003 安全性指...
  • 5用Webmin和VSFTP搭建FTP服务器...
  • 赞助商广告

    图片文章导读