本文格式為Word版，下載可任意編輯——fireworks中進行圖標細節(jié)刻畫

這是一篇新寫的教程，首發(fā)Blueidea，最近很忙，這篇教程寫好后也擱置兩三天了，不過由于之前已經整理好了，發(fā)上來也只是CopyPaste的事情^_^使用Fireworks（以下簡稱FW）進行圖標設計主要要留意兩點：一是FW專注于web設計，不適合創(chuàng)造一些過于繁雜的PS效果，請期待FWCS5的PS濾鏡；

二是FW的編輯方式類似于AI，假如您習慣于工作在PS類的像素著色環(huán)境下，請綺麗的飄過。

接下來進入正題，我們拿一個對比標準的圖標降臨摹做說明，這樣可以便利您理解。

下圖是國內知名的eicodesign所創(chuàng)作的一套圖標，我們要臨摹的對象就是圖中被框住的信封圖標。事先說明一下，由于教程的主題，我們會對這個圖標參與一些細節(jié)，因此我們的最終臨摹結果會與原圖不太一樣。

Step01

把需要臨摹的圖標剪下來作為參考，鎖定圖層。我這里FW的路徑面板是從FireworksCS4中提取的，不過對接下來的操作都無影響，由于我使用的全是CS3包含的功能。

Step02

用RoundedRectangle工具畫出一個和樣圖相仿的圓角矩形，使用四個圓角控制點調理好圓角的半徑，然后按下Ctrl+Shift+G把圖形打散。隨后把第一個圓角矩形復制一份，用白色箭頭工具往四個方向移動一像素，制作出如下圖的兩個圓角矩形（注意用白箭頭處理好圓角處的八個節(jié)點，它們是要對齊的）。

我們不能用Stroke去給矩形加外邊框，由于虛邊會把你給搞死。假如你用RoundedRectangle工具畫出來的圓角矩形已經出現了非Stroke虛邊，那就把節(jié)點打散后，用黑色箭頭工具選中那個Path，點擊路徑面板的RoundPointstoPixels把路徑的所有節(jié)點歸位到像素交點（也可以用白色箭頭工具選中某個節(jié)點單獨進行歸位）。

Step03

把大的圓角矩形復制一份放到最頂層，用白色箭頭協(xié)同Shift+方向鍵得到一個倒三角，隨即復制一份，上面的倒三角用Linear填充漸變；下面的倒三角實心填充褐色，并設置1px羽化。

Step04

用白色箭頭選中途中所示那些節(jié)點，然后用鍵盤的方向鍵往下挪兩個像素，這樣使信封看起來長一點（由于這里單個圖標不受整體風格約束）。

Step05

把之前畫的漸變填充倒三角作垂直翻轉，復制一份擺放好，它們的位置關系如下圖所示。兩個倒三角上下相隔1px多一點?？梢杂冒咨^工具選擇深褐色倒三角上方的四個節(jié)點，以鼠標拖動的方式協(xié)同輔助線挪動把節(jié)點往上挪0.3~0.5個像素，這樣可以讓深褐色的先顯得不那么虛（再一次重申，盡早消去用Stroke作邊線的念頭，這里不是photoshop）。

Step06

留意樣圖的圖標上方有一道高光，而且不是常見的單像素放射高光（大約為兩個像素的高光處上面的1px高光要亮于下面的1px），因此可以考慮用Ellipse這種橢圓形的放射性填充達到這種效果。

我們選中并復制最底的圓角矩形兩次，移動位置后得到兩個上下相隔2px的圓角矩形，用兩個矩形路徑相減的方法得到一個新的路徑，對其進行Ellipse填充（白色0-100透明度），最終把這個高光路徑的疊加方式設置為Overlay。

Step07

底部加個1px高光。

Step08

現在的結果如下圖，先歇一會兒，喝口茶，接下來我們進行細節(jié)的添加。

Step09

暫時把背景改成白色，我們可以看到之前一個倒三角由于使用了羽化，有一些像素從信封兩邊溢出了一點。

這里有兩種方法可以對這些像素進行處理，一是Flatten為Bitmap，二是保存路徑的前提下做遮罩，我偏向于后者，由于這樣保存了路徑，以后如有需要可以進行再編輯，操作如下圖所示：

Step10

我們回到深色背景，有沒有感覺到信封的兩邊顯得有點平？我們用一個Bars或者Radial填充來加點效果上去。

Step11

接下來為信封的上下三角形加單像素高光，由于之前已經反復講過路徑相減（PunchPath，您可以在ModifyCombinePaths菜單下找到它）的操作，這里不再作說明，如下圖：

Step12

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

Step13

由于背景是對比深的顏色，我們可以考慮加個發(fā)光。這里我們不去用FW的投影或發(fā)光濾鏡，還是用Path，為什么？由于對比好控制，個人喜好吧。我們可以做一個比信封底層的圓角矩形上下左右多1px的新圓角矩形，不羽化，透明度30。

Step14

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

Step15

至此圖標基本完成，下面進入潤色階段。我們把所有圖層全選"復制'一份，然后迅速按下Ctrl+Alt+Shift+Z把圖層平面化為位圖，然后設置疊加方式為Overlay，透明度60，這樣就會發(fā)現圖標的飽和度、比較度被提高了，這是我個人對比喜歡的