软件下载  硬件资讯
 
软件首页软件更新软件分类国产软件国外软件软件发布广告联系软件商城
软件资讯硬件资讯动漫频道游戏下载数码软件硬件报价电脑技巧DIY 天地
广告联系 版权说明 网友投稿
意见建议 加入收藏 设为首页
资讯首页
软件新闻 网络动态 信息安全 软件评测 软件技巧 编程开发 设计教程 教学动画 游戏娱乐 专题
 8 您的位置: 首页设计教程平面设计→ 正文
Fireworks制作精致立体的媒体播放器图标
发布日期: 2006-12-26 10:49:40 作者: Wood_Lee 原创 字体:【 】【打印本页

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

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

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

效果

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

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

将圆环分段

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

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

增加立体感

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

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

阴影立体效果

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

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

制造立体的质感效果

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

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

绘制三角形图形

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

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

增强图标的光感效果

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

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

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

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

  png源文件如下:

Fireworks制作精致立体的媒体播放器图标(2)
PNG文件 


天极yesky

上一篇: Photoshop实例教程打造雪景婚纱照片
下一篇: 没有了
相关文章 相关软件
·Fireworks网页设计入门教程(上)
·Fireworks8简单教程 设计美丽的雨后蝴蝶
·流光溢彩!制作Vista风格强劲光束
·用Fireworks绘制飞利浦手机
·Fireworks教程 设计精致的播放器水晶图标
·Fireworks设计教程 巧绘逼真的水晶葡萄
·Fireworks 的描边表面研究
·亮闪闪的美丽 Fireworks巧绘精美闪图动画
·Fireworks简单方法设计网页闪字动画效果
·Fireworks MX 2004入门与实例 1.7
·Fireworks MX2004精选实例 1.5
·Macromedia Fireworks 8.0 简体版
·Fireworks 8 官方简体教程
·Macromedia Fireworks 8.0 Trail
·Macromedia Fireworks MX 2004 7.02 update
·Fireworks Screensaver 6.11
·Macromedia Fireworks MX 2004 7.01 官方繁体中文版
·Fireworks Spectacular 2.5
·Fireworks KaBlaam 1.20
8 精品推荐
8 最新发布
8 本 周 热 门
Copyright (C) 1997,2005 《华军软件园》OnlineDown.NET 本主页保留所有权利。 京ICP备05004773号 京ICP证050203 本站特聘法律顾问:于国富律师