首 页 | 报价 | 活动 | 硬件 | 数码 | 整机 | 手机 | 新闻 | DIY | 导购 | 学院 | 专题 | 市场地图 | 商家名录 | 商情 | 论坛 | 下载 | 电视 | 算命 | 读心术 | 游戏
您现在的位置: 首页>学院>网站设计>Fireworks>正文
Fireworks中进行图标细节刻画设计
文章来源:蓝色理想 文章作者: 发布时间:2011-09-04


如果您有疑问或建议,请进入技术讨论区交流 >>>

这是一篇新写的教程,首发Blueidea,最近很忙,这篇教程写好后也搁置两三天了,不过由于之前已经整理好了,发上来也只是Copy Paste的事情 ^_^

使用Fireworks(以下简称FW)进行图标设计主要要留意两点:

  1. 一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜;
  2. 二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过。

接下来进入正题,我们拿一个比较标准的图标来临摹做说明,这样可以方便您理解。

下图是国内知名的eico design所创作的一套图标,我们要临摹的对象就是图中被框住的信封图标。事先说明一下,因为教程的主题,我们会对这个图标加入一些细节,因此我们的最终临摹结果会与原图不太一样。

Fireworks中进行图标细节刻画设计

Step 01

把需要临摹的图标剪下来作为参考,锁定图层。我这里FW的路径面板是从Fireworks CS4中提取的,不过对接下来的操作都无影响,因为我使用的全是CS3包含的功能。

Fireworks中进行图标细节刻画设计

Step 02

用Rounded Rectangle工具画出一个和样图相仿的圆角矩形,使用四个圆角控制点调节好圆角的半径,然后按下Ctrl+Shift+G把图形打散。
随后把第一个圆角矩形复制一份,用白色箭头工具往四个方向移动一像素,制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点,它们是要对齐的)。

Fireworks中进行图标细节刻画设计

我们不能用Stroke去给矩形加外边框,因为虚边会把你给搞死。如果你用Rounded Rectangle工具画出来的圆角矩形已经出现了非Stroke虚边,那就把节点打散后,用黑色箭头工具选中那个Path,点击路径面板的Round Points to Pixels把路径的所有节点归位到像素交点(也可以用白色箭头工具选中某个节点单独进行归位)。

Fireworks中进行图标细节刻画设计

关键词:图标 




上一篇:Fireworks制作闪光略过的GiF动画
下一篇:Fireworks制作五彩光线迸发的魅力
精彩推荐     
关于我们 | 广告服务 | 建站服务 | 招贤纳士 | 会员服务 | 网站地图 | RSS订阅 | 联系我们

实名:中原硅谷网、电脑报价、电脑硬件报价 客服电话:0371-63659150

中原硅谷网 WWW.ZZIT.COM.CN&WWW.ZZ-IT.COM
2003-2007 版权所有