开发学院图形图像 Fireworks 用Fireworks对图标做精致细节刻画阅读

用Fireworks对图标做精致细节刻画

　2009-11-28 16:51:25　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�

闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣捣閻棗銆掑锝呬壕濡ょ姷鍋涢ˇ鐢稿极閹剧粯鍋愰柟缁樺笧閳ь剦鍙冨鍝勑ч崶褏浠奸梺璇茬箲閼归箖鎮鹃悜钘夎摕闁靛濡囬崢鐢告⒑鐟欏嫷鍟忛柛鐘崇墵閵嗗倹绺介崨濠勫幈闁硅壈鎻槐鏇熺墡闂備線娼уú銈団偓姘嵆閻涱噣骞掑Δ鈧粻锝嗙節闂堟稑鏆欏ù婊堢畺閺岋綁濮€閳惰泛婀辨竟鏇熺節濮橆厾鍘甸梺缁樺姦閸撴岸鎮樻潏銊ょ箚闁圭粯甯炴晶娑氱磼缂佹ḿ娲寸€规洖宕灃闁告劕鍟犻崜婵堟崲濞戞ḿ鏆嗗┑鐘辫兌閺佹牜绱撴担浠嬪摵闁圭懓娲ら悾鐑藉箳閹搭厽鍍甸梺鐟板悁閻掞箓鎮楅幖浣光拻濞达絿鍎ら崵鈧梺鎼炲€栭悧鐘荤嵁韫囨稒鏅搁柨鐕傛嫹

婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繑銇勯幘鍗炵仼缂佺媭鍨堕弻娑㈠箛闂堟稒鐏堥悗鐟版啞缁诲啴濡甸崟顖氱閻庨潧鎽滈悾濂告⒑绾拋娼愭繛鑼枎椤繒绱掑Ο鑲╂嚌闂侀€炲苯澧畝锝堝劵椤︽煡鎮￠妶澶嬬厪闁割偅绻冮崑顏呯箾瀹割喕绨婚幆鐔兼⒑鐎圭姵銆冮柤鍐茬埣瀹曟繈鏁冮埀顒勨€旈崘顔嘉ч柛鈩冾殘閻熸劙姊洪悡搴℃毐闁绘牕銈稿畷鐑樼節閸パ冨祮闂侀潧楠忕槐鏇㈠储椤忓牊鈷戦柟鑲╁仜閸旀鏌￠崨顔锯姇缂佸倹甯熼ˇ瀵哥磼鏉堛劌绗氭繛鐓庣箻閸┾剝鎷呴柨瀣垫綗闂傚倷娴囧銊╂倿閿曞倸绠查柛銉墮閺嬩線鏌熼崜褏甯涢柡鍛倐閺屻劑鎮ら崒娑橆伓闂傚倸鍊搁崐鎼佸磹閹间礁纾瑰瀣椤愯姤鎱ㄥ鍡楀幊缂傚倹姘ㄩ幉绋款吋閸澀缃曢梻鍌欑濠€閬嶆惞鎼淬劌绐楅柡宥庡亞娑撳秵銇勯弽顐沪闁绘挶鍎甸弻锝夊即閻愭祴鍋撻崷顓涘亾濮樼偓瀚�　　闂傚倸鍊搁崐鎼佸磹閹间礁纾归柣鎴ｅГ閸ゅ嫰鏌ら崫銉︽毄濞寸姵姘ㄧ槐鎾诲磼濞嗘帒鍘＄紓渚囧櫘閸ㄥ爼濡撮崘顔煎窛闁哄鍨归崢娲倵楠炲灝鍔氭い锔诲灦瀹曪繝骞庨懞銉у帾闂婎偄娲﹀ú鏍ㄧ墡闂備浇顕х€垫帡宕滈悢濂夋綎闁惧繐婀辩壕鍏间繆椤栨碍鎯堟い顐㈢Т椤啴濡堕崱妤€顫庨梺鍛婎焼閸パ呭弨婵犮垼娉涜癌闁绘柨鍚嬮悡銉╂倵閿濆骸鍘撮柛瀣尰缁绘繂顫濋娑欏闁荤喐绮庢晶妤冩暜閹烘挾顩插ù鐓庣摠閻撴洟鏌熼幆褜鍤熼柍钘夘樀閺屽秶绱掑Ο鑽ゅ弳濡炪値鍋呯换鍫ュ箠濠婂懎鏋堟俊顖濐嚙椤忓綊姊婚崒娆戭槮闁硅绱曠划娆撳箣閿斿搫浜奸梺鍝勵槹閸ㄧ喖寮搁弮鍫熺厸闁告劧绲芥禍鍓х磽娴ｈ櫣甯涚紒瀣尰缁傛帡鏁冮崒姘憋紲濠殿喗锕╅崜锕傛倵閹惰姤鈷掑ù锝呮憸閿涘秶绱掗鍛仸妤犵偞鍨垮畷鍫曨敆閸屾氨銈﹂梺璇插嚱缂嶅棙绂嶉弽顓炵哗濞寸姴顑嗛悡娆撴⒑椤撱劎鐣卞褜鍨遍妵鍕棘閸喒鍋撶憴鍕攳濠电姴娲﹂崐閿嬨亜韫囨挸顏ら柛瀣崌瀵€燁檨婵炲吋鐗曢埞鎴︽偐鐎圭姴顥濋梺绋胯閸斿酣骞夊宀€鐤€婵炴垶岣块悿鍛存⒑閸︻叀妾搁柛鐘愁殜瀵煡骞栨担鍦弳闂佺粯娲栭崐鍦偓姘炬嫹

核心提示：本文中我们用fireworks软件对一现成的图标图像做一些细节刻画，让图标更加精致漂亮！使用Fireworks(以下简称FW)进行图标设计主要要留意两点：一是FW专注于web设计，用Fireworks对图标做精致细节刻画，不适合创造一些过于复杂的PS效果，可以期待FW CS5的PS滤镜;二是FW的编辑方式类似于AI，这

本文中我们用fireworks软件对一现成的图标图像做一些细节刻画，让图标更加精致漂亮！

使用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把图形打散。

随后把第一个圆角矩形复制一份，用白色箭头工具往四个方向移动一像素，制作出如图所示的两个圆角矩形(注意用白箭头处理好圆角处的八个节点，它们是要对齐的)。

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

Step 03

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

Step 04

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

Step 05

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

Step 06

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

我们选中并复制最底的圆角矩形两次，移动位置后得到两个上下相隔2px的圆角矩形，用两个矩形路径相减的方法得到一个新的路径，对其进行Ellipse填充(白色0-100透明度)，最后把这个高光路径的叠加方式设置为Overlay。

Step 07

底部加个1px高光。

Step 08

现在的结果如下图，先歇一会儿，喝口茶，接下来我们进行细节的添加。

Step 09

暂时把背景改成白色，我们可以看到之前一个倒三角因为使用了羽化，有一些像素从信封两边溢出了一点。

这里有两种方法可以对这些像素进行处理，一是Flatten为Bitmap，二是保留路径的前提下做遮罩，我偏向于后者，因为这样保留了路径，以后如有需要可以进行再编辑，操作如下图所示：

Step 10

我们回到深色背景，有没有感觉到信封的两边显得有点平?我们用一个Bars或者Radial填充来加点效果上去。

Step 11

接下来为信封的上下三角形加单像素高光，因为之前已经反复讲过路径相减(Punch Path，您可以在Modify – Combine Paths菜单下找到它)的操作，这里不再作说明，如下图：

Step 12

同理给下面的三角形加高光。

Step 13

因为背景是比较深的颜色，我们可以考虑加个发光。这里我们不去用FW的投影或发光滤镜，还是用Path，为什么?因为比较好控制，个人喜好吧。我们可以做一个比信封底层的圆角矩形上下左右多1px的新圆角矩形，不羽化，透明度30。

Step 14

再在加一道1px高光在下面。

Step 15

至此图标基本完成，下面进入润色阶段。我们把所有图层全选“复制”一份，然后迅速按下Ctrl+Alt +Shift+Z把图层平面化为位图，然后设置叠加方式为Overlay，透明度60，这样就会发现图标的饱和度、对比度被提高了，这是我个人比较喜欢的快速润色的方法，但并非任何时候都适用，某些时候你必须手动用FW自带的滤镜去调曲线、对比度、饱和度等参数。