利用 Adobe Illustrator CS 進(jìn)行圖標(biāo)設(shè)計(jì)并在 Photoshop 中進(jìn)行后期處理，用 Iconworkshop 輸出 .ico 格式的圖標(biāo)文件。圖標(biāo)是界面設(shè)計(jì)領(lǐng)域重要的一項(xiàng)設(shè)計(jì)內(nèi)容，這次以在 2004 度中由 stardock 公司主辦的 GUI 國(guó)際奧林匹克大賽中獲全場(chǎng)大獎(jiǎng)的圖標(biāo)包的 The Last Order 中的一個(gè)圖標(biāo)作為例子給大家講述一下圖標(biāo)制作的過(guò)程。下圖是這套圖標(biāo)的部分截圖。教程中所應(yīng)用到的軟件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop
1．打 AdobeIllustrator CS ，選取工具欄上的圓角矩形工具，單擊畫板任意位置在彈出的窗口中開(kāi)可以設(shè)定圓角曲度。（如果第一次圓角矩形長(zhǎng)寬不合適，可以刪除，直接拖拽得到合適大?。?/P>
2．選中菜單 Effect/3D/Rotate 命令調(diào)出 3D 旋轉(zhuǎn)設(shè)置窗口，用于生成 3D 透視圖形（只有最新的 Illustrator CS 版 本具有此功能）
3．調(diào)整至合適角度（如過(guò)制作一整套圖標(biāo)，請(qǐng)記住保留設(shè)置參數(shù)，以應(yīng)用于整套圖標(biāo)設(shè)計(jì)保持風(fēng)格統(tǒng)一）選中 Preview 可以既時(shí)的看到畫板中圖形的應(yīng)用效果。
4．可以在 Appearance 棉板里看到所應(yīng)用的 3D Rotate 效果，并可以隨時(shí)通過(guò)雙擊調(diào)出 3D Rotate 窗口進(jìn)行調(diào)節(jié)。
5．調(diào)整至合適角度，使用 object 菜單下的 Expand Appearance 命令把應(yīng)用效果的圖形“打散”： 即不再具有 Appearance 的屬性。
6．選用工具欄中的白色箭頭選中我們需要的圖形用 Ctrl+c( 復(fù)制 ) Ctrl+v （粘帖）提取出來(lái)， 其余的無(wú)用圖形刪除。
7．隨后我們用漸變色給這個(gè)圖形上色，用 Gradient 面板設(shè)計(jì)漸變顏色，用 Swatch 面板調(diào)整顏色，這里采用的是線型（linear）漸變，假設(shè)光源來(lái)自左上角，這將是后面所有圖標(biāo)上色的依據(jù)。
[Page: ]
8．把此圖形復(fù)制一遍，按圖中方式排列，同時(shí)選中兩個(gè)圖形，然后調(diào)出 Pathfinder 面板， 使用 Subtract form sharp area 制作出此圖形的立體厚度。然后可以點(diǎn)擊 Expand 按鈕展開(kāi)此合并圖形。
9 隨后我們給這個(gè)圖形也上色，同樣使 G radient 面板，在這里我采用的圓行漸變模式。
10．這一步我們準(zhǔn)備為這個(gè)“面板”增加一些高光。先復(fù)制一個(gè)同樣的圖形填充為白色置于此“面板”下方。
11．隨后再?gòu)?fù)制一個(gè)同樣的圖形置此“面板”上方，并適當(dāng)縮小一些，采用黑白兩色線性漸變填充。
12．隨后同時(shí)選中此黑白漸變圖形以及下面的“面板”圖形，打開(kāi) Transparncy 面板，點(diǎn)擊面板右下方的小箭頭在彈出菜單中使 用 Make Opacity Mask
13．同時(shí)取消 Clip 選中狀態(tài)，并勾選 Invert Mask 選項(xiàng)，這樣我們就為這個(gè)“面板”圖形增加了一個(gè)透明蔗遮罩，在這種狀態(tài)下，黑白漸變圖形（已被作為 Opacity Mask 中的圖形）黑色部分表示了被遮物體（面板）的透明部分，所以剛才我們?yōu)椤懊姘濉毕路教砑拥耐瑯哟笮〉陌咨珗D形是為了怕背景是有色的或是下方還會(huì)有其他物體從透明的“面板”透出。編輯 Opacity Mask 中的物體需要點(diǎn)擊 Transparency 面板中的 Opacity Mask 區(qū)域再進(jìn)行編輯。
14．下面開(kāi)始為這個(gè)面板添加一個(gè)屏幕。復(fù)制一個(gè)圖形置于“面板”上方，大小如圖，也采用線性漸變，因?yàn)楣庹辗较蛟颉Ｗ⒁馍钌蜏\色的方向和“面板”方面：我們?cè)谶@里做個(gè)凹槽效果。
[Page: ]
15．如果理解了透明遮罩的原理，這一步對(duì)你非常簡(jiǎn)單，和上面給“面板”加高光一樣首先復(fù)制白色底色以及藍(lán)色面板，隨后用黑白色漸變圖形制作透明遮罩效果，各圖形層次如圖所示。
16．藍(lán)色面板的色彩填充我采用的圓形填充，如圖所示。
17．下面為這個(gè)基本成型的平板電腦增加更多細(xì)節(jié)，左邊的圖形，以及右邊的三個(gè)凹槽，這里需要注意的是所有圖形我都復(fù)制了兩遍，下面的圖形填充白色并向右下方位移若干像素，是為了體現(xiàn)凹槽的高光。
18．下面我們來(lái)制作凹槽上面的按鈕，雖然面積很小，也要體現(xiàn)出高光的漸變，我在這里采用了 Blend 混合來(lái)制作著兩個(gè)按鈕。雙擊 Blend Tool 圖標(biāo)可以調(diào)出 Blend 混合參數(shù)面板。選取工具欄目中的 Blend Tool ，單擊混合的第一個(gè)圖形，隨后點(diǎn)擊第二個(gè)圖形完成混合。
19．用鋼筆工具以及各種標(biāo)準(zhǔn)圖形的組合完成下面的圖形，使之組合成為電腦上的其他各個(gè)元素（綠色按鈕同樣采用 Blend 混合完成）
20．這樣我門完成了這個(gè)圖標(biāo)的創(chuàng)建工作，隨后作的是輸出。繪制一個(gè) 128 X 128( 單位：像素 ) 的正方行，精確的圖形調(diào)整可以在 Transform 面板中完成，隨后是在 Transparency 面板中將 Opacity 值調(diào)整為 0%
21．使用 Flie 菜單下的 Save for web 命令，在彈出的窗口中選用 PNG 格式輸出（選擇透明輸出： Transparency ）
15．如果理解了透明遮罩的原理，這一步對(duì)你非常簡(jiǎn)單，和上面給“面板”加高光一樣首先復(fù)制白色底色以及藍(lán)色面板，隨后用黑白色漸變圖形制作透明遮罩效果，各圖形層次如圖所示。
16．藍(lán)色面板的色彩填充我采用的圓形填充，如圖所示。
17．下面為這個(gè)基本成型的平板電腦增加更多細(xì)節(jié)，左邊的圖形，以及右邊的三個(gè)凹槽，這里需要注意的是所有圖形我都復(fù)制了兩遍，下面的圖形填充白色并向右下方位移若干像素，是為了體現(xiàn)凹槽的高光。
18．下面我們來(lái)制作凹槽上面的按鈕，雖然面積很小，也要體現(xiàn)出高光的漸變，我在這里采用了 Blend 混合來(lái)制作著兩個(gè)按鈕。雙擊 Blend Tool 圖標(biāo)可以調(diào)出 Blend 混合參數(shù)面板。選取工具欄目中的 Blend Tool ，單擊混合的第一個(gè)圖形，隨后點(diǎn)擊第二個(gè)圖形完成混合。
19．用鋼筆工具以及各種標(biāo)準(zhǔn)圖形的組合完成下面的圖形，使之組合成為電腦上的其他各個(gè)元素（綠色按鈕同樣采用 Blend 混合完成）
20．這樣我門完成了這個(gè)圖標(biāo)的創(chuàng)建工作，隨后作的是輸出。繪制一個(gè) 128 X 128( 單位：像素 ) 的正方行，精確的圖形調(diào)整可以在 Transform 面板中完成，隨后是在 Transparency 面板中將 Opacity 值調(diào)整為 0%
21．使用 Flie 菜單下的 Save for web 命令，在彈出的窗口中選用 PNG 格式輸出（選擇透明輸出： Transparency ）
[Page: ]
22．隨后在 Photoshop 中打開(kāi)剛才輸出的 PNG 文件，在其下方新建一個(gè)圖層填充為白色以為圖標(biāo)加入陰影時(shí)便于看到效果）
23．雙擊圖標(biāo)圖層在 Layer Style 中為其增加了一個(gè)陰影效果。以增強(qiáng)圖標(biāo)再生成后在各種色彩桌面上的識(shí)別率。
24．隨后刪除白色輔助圖層，效果如下。
25．新建一個(gè)圖層，使之與圖標(biāo)圖層連接，使用 Ctrl+E 合并連接圖層把效果應(yīng)用于圖標(biāo)，隨后保存這個(gè) PNG 文件。
26．使用 ICONWORKSHOP 打開(kāi)這個(gè) PNG 文件，使用 Save Icon Form Image 按鈕轉(zhuǎn)換 PNG 圖象為 ICO 文件。
27．選擇你要輸出的 ICO 的文件規(guī)格。
28．存儲(chǔ)后的 ICO 格式文件你就可以直接通過(guò) Window 或第三方圖標(biāo)管理軟件瀏覽了（推薦使用 Microangelo ）
