圖標(biāo)是界面設(shè)計領(lǐng)域重要的一項設(shè)計內(nèi)容,這次我們以在 2004 度中由 stardock 公司主辦的 GUI 國際奧林匹克大賽中獲全場大獎的圖標(biāo)包的 The Last Order 中的一個圖標(biāo)作為例子給大家講述一下圖標(biāo)制作的詳細過程。
下圖是這套圖標(biāo)的部分截圖。
教程中所應(yīng)用到的軟件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop等。我們用Adobe Illustrator CS 進行圖標(biāo)設(shè)計,并在Photoshop 中進行后期處理,最后用Iconworkshop 輸出成 .ico 格式的圖標(biāo)文件。

1.打開 Adobe Illustrator CS ,選取工具欄上的圓角矩形工具,單擊畫板任意位置在彈出的窗口中開可以設(shè)定圓角曲度。(如果第一次圓角矩形長寬不合適,可以刪除,直接拖拽得到合適大?。?。

2.選中菜單 Effect/3D/Rotate 命令調(diào)出 3D 旋轉(zhuǎn)設(shè)置窗口,用于生成 3D 透視圖形(只有最新的 Illustrator CS 版 本具有此功能)。

3.調(diào)整至合適角度(如過制作一整套圖標(biāo),請記住保留設(shè)置參數(shù),以應(yīng)用于整套圖標(biāo)設(shè)計保持風(fēng)格統(tǒng)一)選中 Preview 可以既時的看到畫板中圖形的應(yīng)用效果。

4.可以在 Appearance 棉板里看到所應(yīng)用的 3D Rotate 效果,并可以隨時通過雙擊調(diào)出 3D Rotate 窗口進行調(diào)節(jié)。

5.調(diào)整至合適角度,使用 object 菜單下的 Expand Appearance 命令把應(yīng)用效果的圖形“打散”: 即不再具有 Appearance 的屬性。

6.選用工具欄中的白色箭頭選中我們需要的圖形用 Ctrl+c( 復(fù)制 ) Ctrl+v (粘帖)提取出來, 其余的無用圖形刪除。

7.隨后我們用漸變色給這個圖形上色,用 Gradient 面板設(shè)計漸變顏色,用 Swatch 面板調(diào)整顏色,這里采用的是線型(linear)漸變,假設(shè)光源來自左上角,這將是后面所有圖標(biāo)上色的依據(jù)。

8.把此圖形復(fù)制一遍,按圖中方式排列,同時選中兩個圖形,然后調(diào)出 Pathfinder 面板, 使用 Subtract form sharp area 制作出此圖形的立體厚度。然后可以點擊 Expand 按鈕展開此合并圖形。

