- 相關(guān)推薦
fireworks制作精致圖標方法介紹
這篇教程教三聯(lián)的FIREWORKS愛(ài)好者們用fireworks打造精致圖標，教程這種介紹圖標的細節修飾。制作難度中等，轉發(fā)過(guò)來(lái)和三聯(lián)的朋友們一起學(xué)習。
使用Fireworks(以下簡(jiǎn)稱(chēng)FW)進(jìn)行圖標設計主要要留意兩點(diǎn)：
一是FW專(zhuān)注于web設計，不適合創(chuàng )造一些過(guò)于復雜的PS效果，請期待FW CS5的PS濾鏡;
二是FW的編輯方式類(lèi)似于A(yíng)I，如果您習慣于工作在PS類(lèi)的像素著(zhù)色環(huán)境下，請華麗的飄過(guò)。
接下來(lái)進(jìn)入正題，我們拿一個(gè)比較標準的圖標來(lái)臨摹做說(shuō)明，這樣可以方便您理解。
下圖是國內知名的eico design所創(chuàng )作的一套圖標，我們要臨摹的對象就是圖中被框住的信封圖標。事先說(shuō)明一下，因為教程的主題，我們會(huì )對這個(gè)圖標加入一些細節，因此我們的最終臨摹結果會(huì )與原圖不太一樣。
步驟01
把需要臨摹的圖標剪下來(lái)作為參考，鎖定圖層。我這里FW的路徑面板是從Fireworks CS4中提取的，不過(guò)對接下來(lái)的操作都無(wú)影響，因為我使用的全是CS3包含的功能。
步驟02
用Rounded Rectangle工具畫(huà)出一個(gè)和樣圖相仿的圓角矩形，使用四個(gè)圓角控制點(diǎn)調節好圓角的半徑，然后按下Ctrl+Shift+G把圖形打散。
隨后把第一個(gè)圓角矩形復制一份，用白色箭頭工具往四個(gè)方向移動(dòng)一像素，制作出如圖所示的兩個(gè)圓角矩形(注意用白箭頭處理好圓角處的八個(gè)節點(diǎn)，它們是要對齊的)。
我們不能用Stroke去給矩形加外邊框，因為虛邊會(huì )把你給搞死。如果你用Rounded Rectangle工具畫(huà)出來(lái)的圓角矩形已經(jīng)出現了非Stroke虛邊，那就把節點(diǎn)打散后，用黑色箭頭工具選中那個(gè)Path，點(diǎn)擊路徑面板的Round Points to Pixels把路徑的所有節點(diǎn)歸位到像素交點(diǎn)(也可以用白色箭頭工具選中某個(gè)節點(diǎn)單獨進(jìn)行歸位)。
步驟03
把大的圓角矩形復制一份放到最頂層，用白色箭頭配合Shift+方向鍵得到一個(gè)倒三角，隨即復制一份，上面的倒三角用Linear填充漸變;下面的倒三角實(shí)心填充褐色，并設置1px羽化。
步驟04
用白色箭頭選中途中所示那些節點(diǎn)，然后用鍵盤(pán)的方向鍵往下挪兩個(gè)像素，這樣使信封看起來(lái)長(cháng)一點(diǎn)(因為這里單個(gè)圖標不受整體風(fēng)格約束)。
步驟05
把之前畫(huà)的漸變填充倒三角作垂直翻轉，復制一份擺放好，它們的位置關(guān)系如下圖所示。兩個(gè)倒三角上下相隔1px多一點(diǎn)�？梢杂冒咨^工具選擇深褐色倒三角上方的四個(gè)節點(diǎn)，以鼠標拖動(dòng)的方式配合輔助線(xiàn)挪動(dòng)把節點(diǎn)往上挪0.3~0.5個(gè)像素，這樣可以讓深褐色的先顯得不那么虛(再一次重申，盡早打消用 Stroke作邊線(xiàn)的念頭，這里不是photoshop)。
步驟06
留意樣圖的圖標上方有一道高光，而且不是常見(jiàn)的單像素放射高光(大約為兩個(gè)像素的高光處上面的1px高光要亮于下面的1px)，因此可以考慮用Ellipse這種橢圓形的放射性填充達到這種效果。
我們選中并復制最底的圓角矩形兩次，移動(dòng)位置后得到兩個(gè)上下相隔2px的圓角矩形，用兩個(gè)矩形路徑相減的方法得到一個(gè)新的路徑，對其進(jìn)行Ellipse填充(白色0-100透明度)，最后把這個(gè)高光路徑的疊加方式設置為Overlay。
步驟07
底部加個(gè)1px高光。
步驟08
現在的結果如下圖，先歇一會(huì )兒，喝口茶，接下來(lái)我們進(jìn)行細節的添加。
步驟09
暫時(shí)把背景改成白色，我們可以看到之前一個(gè)倒三角因為使用了羽化，有一些像素從信封兩邊溢出了一點(diǎn)。
這里有兩種方法可以對這些像素進(jìn)行處理，一是Flatten為Bitmap，二是保留路徑的前提下做遮罩，我偏向于后者，因為這樣保留了路徑，以后如有需要可以進(jìn)行再編輯，操作如下圖所示：
步驟10
我們回到深色背景，有沒(méi)有感覺(jué)到信封的兩邊顯得有點(diǎn)平?我們用一個(gè)Bars或者Radial填充來(lái)加點(diǎn)效果上去。
步驟11
接下來(lái)為信封的上下三角形加單像素高光，因為之前已經(jīng)反復講過(guò)路徑相減(Punch Path，您可以在Modify – Combine Paths菜單下找到它)的操作，這里不再作說(shuō)明，如下圖：
步驟12
同理給下面的三角形加高光。
步驟13
因為背景是比較深的顏色，我們可以考慮加個(gè)發(fā)光。這里我們不去用FW的投影或發(fā)光濾鏡，還是用Path，為什么?因為比較好控制，個(gè)人喜好吧。我們可以做一個(gè)比信封底層的圓角矩形上下左右多1px的新圓角矩形，不羽化，透明度30。
步驟14
再在加一道1px高光在下面。
步驟15
至此圖標基本完成，下面進(jìn)入潤色階段。我們把所有圖層全選“復制”一份，然后迅速按下Ctrl+Alt +Shift+Z把圖層平面化為位圖，然后設置疊加方式為Overlay，透明度60，這樣就會(huì )發(fā)現圖標的飽和度、對比度被提高了，這是我個(gè)人比較喜歡的快速潤色的方法，但并非任何時(shí)候都適用，某些時(shí)候你必須手動(dòng)用FW自帶的濾鏡去調曲線(xiàn)、對比度、飽和度等參數。
Finish
最終效果(其實(shí)信封下方的三角我也用路徑加了Path作為投影，寫(xiě)完了才發(fā)現，我就不再折騰了……)
【fireworks制作精致圖標方法介紹】相關(guān)文章：
手工制作燈籠方法介紹07-02
花燈的制作方法介紹07-02
制作網(wǎng)頁(yè)時(shí)用fireworks如何切圖教程07-14
圣誕信封的制作方法介紹07-02
精致生日賀卡手工制作過(guò)程07-02
白術(shù)泡酒的功效與制作方法介紹07-02
蘆薈泡酒的功效與制作方法介紹07-26
香菇肉絲湯面制作方法介紹07-03