這是作者rokey為數碼藝術雜志寫的一個教程。喜愛圖標設計的網友可不要錯過哦。
利用 adobe illustrator cs 進行圖標設計并在 photoshop 中進行后期處理，用 iconworkshop 輸出 .ico 格式的圖標文件。圖標是界面設計領域重要的一項設計內容，這次以在 2004 度中由 stardock 公司主辦的 gui 國際奧林匹克大賽中獲全場大獎的圖標包的 the last order 中的一個圖標作為例子給大家講述一下圖標制作的過程。下圖是這套圖標的部分截圖。教程中所應用到的軟件主要有 adobe illustrator cs/adobe photoshop/axialis icon-workshop
效果：
|||
這是作者rokey為數碼藝術雜志寫的一個教程。喜愛圖標設計的網友可不要錯過哦。
利用 adobe illustrator cs 進行圖標設計并在 photoshop 中進行后期處理，用 iconworkshop 輸出 .ico 格式的圖標文件。圖標是界面設計領域重要的一項設計內容，這次以在 2004 度中由 stardock 公司主辦的 gui 國際奧林匹克大賽中獲全場大獎的圖標包的 the last order 中的一個圖標作為例子給大家講述一下圖標制作的過程。下圖是這套圖標的部分截圖。教程中所應用到的軟件主要有 adobe illustrator cs/adobe photoshop/axialis icon-workshop
效果：
|||
1．打 adobeillustrator cs ，選取工具欄上的圓角矩形工具，單擊畫板任意位置在彈出的窗口中開可以設定圓角曲度。（如果第一次圓角矩形長寬不合適，可以刪除，直接拖拽得到合適大?。?/p>
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 按鈕展開此合并圖形。
|||
9 隨后我們給這個圖形也上色，同樣使 g radient 面板，在這里我采用的圓行漸變模式。
10．這一步我們準備為這個“面板”增加一些高光。先復制一個同樣的圖形填充為白色置于此“面板”下方。
11．隨后再復制一個同樣的圖形置此“面板”上方，并適當縮小一些，采用黑白兩色線性漸變填充。
12．隨后同時選中此黑白漸變圖形以及下面的“面板”圖形，打開 transparncy 面板，點擊面板右下方的小箭頭在彈出菜單中使 用 make opacity mask
|||
13．同時取消 clip 選中狀態，并勾選 invert mask 選項，這樣我們就為這個“面板”圖形增加了一個透明蔗遮罩，在這種狀態下，黑白漸變圖形（已被作為 opacity mask 中的圖形）黑色部分表示了被遮物體（面板）的透明部分，所以剛才我們為“面板”下方添加的同樣大小的白色圖形是為了怕背景是有色的或是下方還會有其他物體從透明的“面板”透出。編輯 opacity mask 中的物體需要點擊 transparency 面板中的 opacity mask 區域再進行編輯。
14．下面開始為這個面板添加一個屏幕。復制一個圖形置于“面板”上方，大小如圖，也采用線性漸變，因為光照方向原因。注意深色和淺色的方向和“面板”方面：我們在這里做個凹槽效果。
15．如果理解了透明遮罩的原理，這一步對你非常簡單，和上面給“面板”加高光一樣首先復制白色底色以及藍色面板，隨后用黑白色漸變圖形制作透明遮罩效果，各圖形層次如圖所示。
16．藍色面板的色彩填充我采用的圓形填充，如圖所示。
|||
17．下面為這個基本成型的平板電腦增加更多細節，左邊的圖形，以及右邊的三個凹槽，這里需要注意的是所有圖形我都復制了兩遍，下面的圖形填充白色并向右下方位移若干像素，是為了體現凹槽的高光。
18．下面我們來制作凹槽上面的按鈕，雖然面積很小，也要體現出高光的漸變，我在這里采用了 blend 混合來制作著兩個按鈕。雙擊 blend tool 圖標可以調出 blend 混合參數面板。選取工具欄目中的 blend tool ，單擊混合的第一個圖形，隨后點擊第二個圖形完成混合。
19．用鋼筆工具以及各種標準圖形的組合完成下面的圖形，使之組合成為電腦上的其他各個元素（綠色按鈕同樣采用 blend 混合完成）
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 ）
新聞熱點
疑難解答
