fireworks如何製作精緻圖標

Fireworks是Macromedia公司發佈的一款專為網絡圖形設計的圖形編輯軟件，它大大簡化了網絡圖形設計的工作難度，以下是本站小編搜索整理的關於fireworks製作精緻圖標教程，供參考學習，希望對大家有所幫助!想了解更多相關信息請持續關注我們應屆畢業生考試網!

　　使用Fireworks(以下簡稱FW)進行圖標設計主要要留意兩點：

一是FW專注於web設計，不適合創造一些過於複雜的PS效果，請期待FW CS5的PS濾鏡;

二是FW的編輯方式類似於AI，如果您習慣於工作在PS類的像素着色環境下，請華麗的飄過。

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

下圖是國內知名的eico design所創作的一套圖標，我們要臨摹的對象就是圖中被框住的信封圖標。事先説明一下，因為教程的主題，我們會對這個圖標加入一些細節，因此我們的'最終臨摹結果會與原圖不太一樣。

　　步驟01

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

　　步驟02

用Rounded Rectangle工具畫出一個和樣圖相仿的圓角矩形，使用四個圓角控制點調節好圓角的半徑，然後按下Ctrl+Shift+G把圖形打散。

隨後把第一個圓角矩形複製一份，用白色箭頭工具往四個方向移動一像素，製作出如圖所示的兩個圓角矩形(注意用白箭頭處理好圓角處的八個節點，它們是要對齊的)。

我們不能用Stroke去給矩形加外邊框，因為虛邊會把你給搞死。如果你用Rounded Rectangle工具畫出來的圓角矩形已經出現了非Stroke虛邊，那就把節點打散後，用黑色箭頭工具選中那個Path，點擊路徑面板的Round Points to Pixels把路徑的所有節點歸位到像素交點(也可以用白色箭頭工具選中某個節點單獨進行歸位)。

　　步驟03

把大的圓角矩形複製一份放到最頂層，用白色箭頭配合Shift+方向鍵得到一個倒三角，隨即複製一份，上面的倒三角用Linear填充漸變;下面的倒三角實心填充褐色，並設置1px羽化。

　　步驟04

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

　　步驟05

把之前畫的漸變填充倒三角作垂直翻轉，複製一份擺放好，它們的位置關係如下圖所示。兩個倒三角上下相隔1px多一點。可以用白色箭頭工具選擇深褐色倒三角上方的四個節點，以鼠標拖動的方式配合輔助線挪動把節點往上挪0.3~0.5個像素，這樣可以讓深褐色的先顯得不那麼虛(再一次重申，儘早打消用 Stroke作邊線的念頭，這裏不是photoshop)。

　　步驟06

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

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