fireworks中进行图标细节刻画 |
|
这是一篇新写的教程，首发Blueidea，近期很忙，这篇教程写好后也搁置两三天了，不过由于之前已经 整顿好了，发上来也只不过Copy Paste的 事件 ^_^ 使用Fireworks(以下简称FW)进行图标设计重要要 留神两点： 一是FW 专一于web设计，不 合适制造一些过于复杂的PS 动机，请等待FW CS5的PS滤镜； 二是FW的编辑 模式 类似于AI，假如您习惯于工作在PS类的像素着色环境下，请 华丽的飘过 。 接下来进入正题，我们拿一个 比较 标准的图标 降临摹做 注明，这样 可以容易您 了解 。 下图是国内知名的eico design所创作的一套图标，我们要临摹的对象便是图中被框住的信封图标 。事先 注明一下，由于教程的主题，我们会对这个图标加入一些细节， 因此我们的最终临摹 后果会与原图不太一样 。
Step 01 把需求临摹的图标剪下来作为参考，锁定图层 。我这里FW的路径面板是从Fireworks CS4中提取的，不过对接下来的操作都无影响，由于我 使用的全是CS3包括的 性能 。
Step 02 用Rounded Rectangle工具画出一个和样图相仿的圆角矩形， 使用四个圆角操纵点调节好圆角的半径， 而后按下Ctrl+Shift+G把图形打散 。 随后把第一个圆角矩形复制一份，用白色箭头工具往四个方向移动一像素，制作出如图所示的两个圆角矩形( 留神用白箭头 解决好圆角处的八个节点，它们是要对齐的) 。
Step 03 把大的圆角矩形复制一份放到最顶层，用白色箭头配合Shift+方向键得到一个倒三角，随即复制一份，上面的倒三角用Linear填充渐变；下面的倒三角实心填充褐色，并设置1px羽化 。
Step 04 用白色箭头选中途中所示那些节点， 而后用键盘的方向键往下挪两个像素，这样使信封看起来长丝毫(由于这里单个图标不受整体 格调 束缚) 。
Step 05 把之前画的渐变填充倒三角作垂直翻转，复制一份摆放好，它们的位置关系如下图所示 。两个倒三角上下相隔1px多丝毫 。 可以用白色箭头工具 取舍深褐色倒三角上方的四个节点，以鼠标拖动的 模式配合辅助线挪动把节点往上挪0.3'0.5个像素，这样 可以让深褐色的先显得不那么虚(重新重申，尽早打消用Stroke作边线的念头，这里不是photoshop) 。
Step 06 留神样图的图标上方有一道高光，并且不是常见的单像素 喷射高光(大概为两个像素的高光处上面的1px高光要亮于下面的1px)， 因此 可以考量用Ellipse这种椭圆形的 喷射性填充达到这种 动机 。
Step 07 |
