Fireworks制作精致立体的媒体播放器图标

核心提示：今年推出的新操作系统Vista的界面设计更加精美，从人机交互的角度来讲，Fireworks制作精致立体的媒体播放器图标，图标的图形和功能设计方面更注重用户体验的细节研究，已经逐渐抛弃了平面效果，组成了这个生动的、让人“眩目”的图标，设计来源于生活，逐渐向质感、立体的方向转变，使得我们的使用的操作

今年推出的新操作系统Vista的界面设计更加精美，从人机交互的角度来讲，图标的图形和功能设计方面更注重用户体验的细节研究，已经逐渐抛弃了平面效果，逐渐向质感、立体的方向转变。使得我们的使用的操作系统和WEB或软件产品有了新的视觉感受。

下面我们介绍用Fireworks制作精致的Media_Player图标的具体实现步骤。与大家分享、共勉。

效果

1、在新建的Fireworks灰色画布上按住SHIFT键画一个黑色的500*500像素的正圆形，以此作为图标的黑边，然后在工具面板中选取‘画圈形’工具，画出一个环状的图形，接着鼠标点取环形图的黄色控制点顺时针进行拖动，将圆环分段（1/4），如图。

将圆环分段

2、将制作好的扇形图复制粘贴3份，这样就了有了相等大小四段扇形图，分别选取颜色，可以是红色、蓝色、绿色、黄色，其色值依次为#C83225、#29469C、#009900、#FFCC00，然后分别选中四个扇形图进行“放射性”填充，在其填充的中间区域将颜色调浅，形成“渐变”效果，再选取滤镜“阴影和光晕”中的“内侧发光”效果，在每个扇形的边缘形成白色光边，增加立体感。如图

增加立体感

3、按住SHIFT键在中间区域画正圆形，然后选中并进行浅蓝（#4473E0）和白色（#FFFFFF）的“放射性”渐变的填充，在半圆上同样选取‘放射状’填充，再选择滤镜“阴影和光晕”中的“内侧发光”内侧阴影“和效果，用来外环形的阴影立体效果。如图

阴影立体效果

4、同样，再画一个相同大小的白色（#FFFFFF）圆，然后进行”放射性“渐变填充，把渐变的一端的透明度设置为”0“，把圆形逆时针旋转一定角度，制造立体的质感效果。如图

制造立体的质感效果

5、现在开始绘制图标的箭头，选取工具栏的”多边形“工具，将边数设置为”3“，绘制三角形图形，为了整个按钮的立体效果，要给三角形填充上蓝色的”线形“渐变，渐变色的中间可选取深蓝色，两边选取浅蓝色，这样效果更加的“眩”。再在三角形的下面靠左的地方复制粘贴一个颜色很浅淡的阴影效果。如图：

绘制三角形图形

6、然后，还要画出一个大的扇形，把它的透明度设置成”62“，覆盖在”彩环”的上面，用以增强图标的光感效果。如图：

增强图标的光感效果

7、最后，一个“点睛之笔”就是在中心圆形的上面再绘制一个半径同样大小的“扇形”，扇形下面的边缘划过三角形的箭头，非常逼真的展现了这个图标的立体效果。

绘制一个半径同样大小的“扇形”

现在整个图标这个浑然一体的质感效果，是通过这样一层层的细节的处理得到的，比如四个光环的颜色的渐变，中间圆形多重滤镜效果的应用，以及三角箭头中使用四种颜色的线性渐变和投影，到最后半透明的扇形覆盖，组成了这个生动的、让人“眩目”的图标，设计来源于生活，来自于细节。

png源文件如下：

PNG文件