圖標是界面設計領域重要的一項設計內容，這次我們以在 2004 度中由 stardock 公司主辦的 GUI 國際奧林匹克大賽中獲全場大獎的圖標包的 The Last Order 中的一個圖標作為例子給大家講述一下圖標制作的詳細過程。

下圖是這套圖標的部分截圖。

教程中所應用到的軟件主要有 Adobe Illustrator CS/Adobe Photoshop/Axialis Icon-workshop等。我們用Adobe Illustrator CS 進行圖標設計，并在Photoshop 中進行后期處理，最后用Iconworkshop 輸出成 .ico 格式的圖標文件。

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

2．選中菜單 Effect/3D/Rotate 命令調出 3D 旋轉設置窗口，用于生成 3D 透視圖形（只有最新的 Illustrator CS 版 本具有此功能）。

3．調整至合適角度（如過制作一整套圖標，請記住保留設置參數，以應用于整套圖標設計保持風格統一）選中 Preview 可以既時的看到畫板中圖形的應用效果。

 

4．可以在 Appearance 棉板里看到所應用的 3D Rotate 效果，并可以隨時通過雙擊調出 3D Rotate 窗口進行調節。

5．調整至合適角度，使用 object 菜單下的 Expand Appearance 命令把應用效果的圖形“打散”： 即不再具有 Appearance 的屬性。

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

7．隨后我們用漸變色給這個圖形上色，用 Gradient 面板設計漸變顏色，用 Swatch 面板調整顏色，這里采用的是線型（linear）漸變，假設光源來自左上角，這將是后面所有圖標上色的依據。
 

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

 20．這樣我門完成了這個圖標的創建工作，隨后作的是輸出。繪制一個 128 X 128( 單位：像素 ) 的正方行，精確的圖形調整可以在 Transform 面板中完成，隨后是在 Transparency 面板中將 Opacity 值調整為 0%

21．使用 Flie 菜單下的 Save for web 命令，在彈出的窗口中選用 PNG 格式輸出（選擇透明輸出： Transparency ）

22．隨后在 Photoshop 中打開剛才輸出的 PNG 文件，在其下方新建一個圖層填充為白色以為圖標加入陰影時便于看到效果）

23．雙擊圖標圖層在 Layer Style 中為其增加了一個陰影效果。以增強圖標再生成后在各種色彩桌面上的識別率。

  

24．隨后刪除白色輔助圖層，效果如下。

25．新建一個圖層，使之與圖標圖層連接，使用 Ctrl+E 合并連接圖層把效果應用于圖標，隨后保存這個 PNG 文件。

26．使用 ICONWORKSHOP 打開這個 PNG 文件，使用 Save Icon Form Image 按鈕轉換 PNG 圖象為 ICO 文件。

27．選擇你要輸出的 ICO 的文件規格。

28．存儲后的 ICO 格式文件你就可以直接通過 Window 或第三方圖標管理軟件瀏覽了（推薦使用 Microangelo ）。