当前位置: 首页 > 图文教程 > 平面设计 > FireWorks > Fireworks 8打造精致指南针图标全过程

FireWorks
Macromedia Fireworks MX的新特性一
Macromedia Fireworks MX的新特性二
Macromedia Fireworks MX的新特性三
Macromedia Fireworks MX的新特性四
Fireworks4 巧用无缝填充处理图片
Fireworks4 制作透明字
Fireworks中螺旋运动字的制作
Fireworks常见问题解答(7)
Fireworks常见问题解答(6)
Fireworks常见问题解答(5)
样式在FW MX 2004中的应用
用Fireworks轻松制作网页交互按钮
巧用Style制作立体感文字
Fireworks制作产品展示图
FireWorks象素按纽教程
Fireworks MX 之 初体验5-2
Fireworks MX 之初体验3-1
撕纸边缘效果制作方法详解
立体贴图字特效制作
Fireworks MX 2004特效字系列教程:晶莹文字制作

FireWorks 中的 Fireworks 8打造精致指南针图标全过程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-15   浏览: 114 ::
收藏到网摘: n/a

本文中我们用Fireworks 8来绘制一个精致的指南针图案。

完成效果如下:

  Fireworks 8绘制精致指南针图案(图一)

首先,设置画布大小为128x128像素,底色为白色。(图01)

用椭圆工具画一个90x90的正圆形,并水平、垂直对齐于画布;(图02)

  Fireworks 8绘制精致指南针图案(图二)(图02)

改变填充类别为线性渐变,增加并调整渐变颜色;(图03)

  Fireworks 8绘制精致指南针图案(图三)(图03)

在这个圆的上面画一个70x70的正圆形,改变填充类别为线性渐变,增加并调整渐变颜色,水平、垂直对齐于画布(或对齐于它下边儿的那个圆)。(图04)

  Fireworks 8绘制精致指南针图案(图四)(图04)

接下来描绘表盘上的图案。

用星形工具画出一个五角星,改变点数为4点,得到了一个四角星(可根据个人喜好改变其形态和尺寸),水平、垂直对齐于下方任何一个圆;再画一个稍小一点的四角星(或复制粘贴)并旋转45度,水平、垂直对齐于下方任何一个圆;(图05-1)

分别选中两个四角星,点击菜单“修改”-“组合路径”-“联合”,得到了一个四个大角四个小角的八角形;(图05-2)

再在上面画一个正圆,大体尺寸见(图05-3),水平、垂直对齐。

分别选中这个小正圆和后面的八角形,点击菜单“修改”-“组合路径”-“打孔”,得到的就是我们所需要的图形了;(图05-4)

  Fireworks 8绘制精致指南针图案(图五)(图05)

设置这个图形的颜色为白色,不透明度为70;四周画四个小矩形,白色,不透明度为60。(图06)

  Fireworks 8绘制精致指南针图案(图六)(图06)

下面来制作指针:

用星形工具画出一个五角星,改变点数为3点,得到了一个三角形;用缩放工具调整长宽比例;(图07-1)

复制此三角形,选择其中一个,点击菜单“修改”-“变形”-“垂直翻转”,调整位置;(图07-2)

分别选中两个三角形,点击菜单“修改”-“组合”;旋转此组合图形;(图07-3)

修改两个三角形的颜色。(图07-4)

  Fireworks 8绘制精致指南针图案(图七)(图07)

依次改变二者的填充类别为线性渐变并调整渐变颜色(图08-1),然后选择此组合图形,添加“投影”滤镜(图08-2)。

  Fireworks 8绘制精致指南针图案(图八)(图08)

表蒙的制作:

用椭圆工具画一个64x64的正圆形,填充类别为无,笔尖颜色为白色,大小为2,不透明度为30,并水平、垂直对齐;(图09)

  Fireworks 8绘制精致指南针图案(图九) (图09)

来到很关键的一步了,表蒙上的高光制作。

用椭圆工具画一个60x60的正圆形,并水平、垂直对齐。而后,将此正圆形的X位置上移1像素,如图中橙色部分;用钢笔工具描绘出图中红色部分;(图10-1)

注意:

1、描绘红色部分时,重要的是描绘出中间的那道曲线;

2、其余部分随意描绘,但要保证盖掉后面的橙色部分。

分别选中两个图形,点击菜单“修改”-“组合路径”-“打孔”,得到的就是我们所需要的高光部分的图形了;(图10-2)

  Fireworks 8绘制精致指南针图案(图十)(图10)

改变填充类别为线性渐变,调整渐变颜色和不透明度;(图11)

  Fireworks 8绘制精致指南针图案(图十一)(图11)

已嗅出芳容了,哈哈,不过总觉得底盘像个铁片儿似的,我们来让它看起来有点立体感。

给底盘加上描边和纹理,再来个投影。(图12)

  F<script type=function ImgZoom(Id)//重新设置图片大小 防止撑破表格{var w = $(Id).width;var m = 550;if(w < m){return;}else{var h = $(Id).height;$(Id).height = parseInt(h*m/w); $(Id).title = "点击小图看大图";$(Id).width = m;}}window.onload = function(){var Imgs = $("content").getElementsByTagName("img");var i=0;for(;i本文中我们用Fireworks 8来绘制一个精致的指南针图案。 <P>  完成效果如下:</P><P>  <IMG height=128 alt=" width="128" border="0" fireworks="" src="/upload/tech/2009/20090815082521_3636638817772e42b59d74cff571fbb3.jpg" />