学院首页 软件应用 编程开发 创意设计 认证培训 软件论坛
Flash Fireworks Dreamweaver Photoshop CorelDraw Illustrator FreeHand 3DsMAX AutoCAD

您的位置:学院 >> 创意设计 >> Fireworks >> FW制作媒体播放器精致立体图标


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



  今年推出的新操作系统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源文件如下:

点击放大此图片

技术文章快速查找

栏目导航
软件应用
·操作系统 ·杀毒防黑 ·应用软件
·聊天软件 ·网络软件  
Web开发
·ASP ·JavaScript ·CGI
·JSP ·VbScript ·Web服务器
·PHP ·XML  
开发语言
·VB ·VC ·ASP.NET
·Java ·C/C++ ·Delphi
数据库开发
·MySQL ·SQL/Access ·PowerBuilder
·Oracle ·DB2  
网站设计
·Flash ·Dreamweaver ·HTML/CSS
·Fireworks ·FrontPage  
平面设计
·Photoshop ·CorelDraw ·AutoCAD
·FreeHand ·Illustrator ·3DsMAX
媒体动画
·Director ·Authorware ·Maya
·视频处理    


相关软件 产品库推荐
·笔记本 ·台式机 ·服务器
·数码相机 ·手机 ·GPS
·DV摄像机 ·MP3 ·MP4
·CPU ·硬盘 ·内存
·主板 ·显卡 ·显示器
·打印机 ·投影机 ·路由器

还没人留言,抢个先,哈哈!
对"FW制作媒体播放器精致立体图标"的评论 - 快速回贴
内容:
  [完成后可按Ctrl+Enter发布]

百度中 FW制作媒体播放器精致立体图标 相关内容
Google搜索中 FW制作媒体播放器精致立体图标 相关内容
雅虎中 FW制作媒体播放器精致立体图标 相关内容
Sogou搜索中 FW制作媒体播放器精致立体图标 相关内容

相关软件 最新回复帖子:

·Windows Vista 中卸载软件的不同方式
·没有mysql支持时的替代方案
·一个可以发送附件及HTML格式邮件的PHP类
·AutoCAD打造精致三维鸟笼实例详解
·Photoshop自定义水晶字特效样式
·AutoCAD三维基础实例教程
·PS为黑背景长发美女照片抠图换背
·用Photoshop自制个性摩托车贴花小经验
·轻松几步将美女照片处理为手工素描
·巧用Photoshop画笔轻松绘制创意特效


  相关软件 FW制作媒体播放器精致立体图标相关文章
Fireworks画矢量立体图标完整流程 用Fireworks为照片做精美边框
用Fireworks绘制网页视觉设计稿 Fireworks绘矢量风格“大雪盖顶”特效
Fireworks绘XP风格精致图标 Fireworks滤镜模拟滴溅油漆斑点效果
Fireworks三维插件辅助绘制转动立体球 Fireworks做马赛克文字特效
Fireworks精细描绘甲壳虫汽车 Fireworks打造精致播放器水晶图标
Fireworks轻松绘制简单卡通海景画 Fireworks巧绘水晶葡萄
Fireworks绘制精致立体IPOD Fireworks去照片红眼功能使用详解
Fireworks绘制精致三维仿真金属小球 Fireworks绘精致矢量美女插画
Fireworks轻松绘制简单漂亮的立体Logo Fireworks逐帧动画效果及实例剖析
初学必读:怎样学习Fireworks? 再玩图片魔术:黑白照片的彩色秘密