您所在的位置:首页 > 教程首页 > 软件教程 > 图文处理 > fireworks如何进行图标细节刻画

fireworks如何进行图标细节刻画

来源:互联网 | 编辑:互联网 | 时间:2013-09-22 13:35:58 | 阅读:

这是一篇新写的教程,首发Blueidea,最近很忙,这篇教程写好后也搁置两三天了,不过由于之前已经整理好了,发上来也只是Copy Paste的事情 ^_^  使用Fireworks(以下简称FW)进行图标设计主要要留意两点:

一是FW专注于web设计,不适合创造一些过于复杂的PS效果,请期待FW CS5的PS滤镜;

二是FW的编辑方式类似于AI,如果您习惯于工作在PS类的像素着色环境下,请华丽的飘过。

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

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

fireworks如何进行图标细节刻画_52z.com

Step 01

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

fireworks如何进行图标细节刻画_52z.com

Step 02

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

fireworks如何进行图标细节刻画_52z.com

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

fireworks如何进行图标细节刻画_52z.com

Step 03

把大的圆角矩形复制一份放到最顶层,用白色箭头配合Shift+方向键得到一个倒三角,随即复制一份,上面的倒三角用Linear填充渐变;下面的倒三角实心填充褐色,并设置1px羽化。

fireworks如何进行图标细节刻画_52z.com

Step 04

用白色箭头选中途中所示那些节点,然后用键盘的方向键往下挪两个像素,这样使信封看起来长一点(因为这里单个图标不受整体风格约束)。

fireworks如何进行图标细节刻画_52z.com

Step 05

把之前画的渐变填充倒三角作垂直翻转,复制一份摆放好,它们的位置关系如下图所示。两个倒三角上下相隔1px多一点。可以用白色箭头工具选择深褐色倒三角上方的四个节点,以鼠标拖动的方式配合辅助线挪动把节点往上挪0.3~0.5个像素,这样可以让深褐色的先显得不那么虚(再一次重申,尽早打消用Stroke作边线的念头,这里不是photoshop)。

fireworks如何进行图标细节刻画_52z.com

Step 06

留意样图的图标上方有一道高光,而且不是常见的单像素放射高光(大约为两个像素的高光处上面的1px高光要亮于下面的1px),因此可以考虑用Ellipse这种椭圆形的放射性填充达到这种效果。

fireworks如何进行图标细节刻画_52z.com

Adobe Fireworks CS6(远程打印软件) 简体中文版
Adobe Fireworks CS6(远程打印软件) 简体中文版

类型:图像处理  大小:180.8 MB  平台:

Vista/winXP/win7/win8

相关专题:

照片合成软件网页三剑客Adobe Fireworks

你可能感兴趣的内容

热门游戏

下载声明 | 法律声明 | 版权声明 | 友情链接 | 发布软件 | 最新更新

本i站为非盈利性网站,不接受任何广告。本站所有资源均由网友上传,如有侵权,请发邮件至 hnrshwl@163.com

琼ICP备2022006426号-1      琼公安网备 46010602001475