打造 Windows XP 風格圖示：設計規範與製作流程完整教學

前言

Windows XP 引入全新圖示設計風格：32 位色、平滑邊緣、豐富漸層、動態透視與投影效果。本文依據微軟官方設計規範，詳細說明 XP 風格圖示的特徵、尺寸、色彩、透視、投影與輪廓規範，並提供從概念草稿到 .ico 檔輸出的完整製作流程。

一、圖示設計規範概覽

風格特徵

• 色彩豐富、邊角柔和圓潤、左上角光源搭配環繞光、漸層賦予立體感、投影增強對比、輪廓線條清晰。
• 日常物件（電腦、裝置）具現代個人化外觀。

標準尺寸

四種基本尺寸：48×48、32×32、24×24、16×16 像素。

• 「開始」選單右側圖示：24×24（系統自動產生，無需提供）。
• 工具列圖示標準：24×24、16×16。

圖1：常規圖示尺寸

圖2：開始選單 24×24 像素

圖3：標準工具列圖示尺寸

色彩深度支援

每個 XP 圖示需包含三種色彩深度：

1. 32 位（24 位影像 + 8 位 Alpha 通道）—— 平滑邊緣、融合背景。
2. 8 位（256 色）+ 1 位透明色。
3. 4 位（16 色）+ 1 位透明色。

圖4：32/8/4 位「我的圖片」圖示對照

調色盤

微軟定義核心調色盤，確保視覺一致性。

圖5：Windows XP 圖示調色盤

物件角度與透視網格

採用等軸測透視網格，物件分組與重疊需符合透視關係。

圖6：Windows XP 圖示透視網格

正視圖適用物件

文件圖示、符號圖示（警告/資訊）、單一物件圖示（放大鏡）等採正視圖。

圖7：正視圖示例

重疊輔助物件

如「新增/移除程式」、「列印相片」、「最近文件」等透過重疊小圖示傳達動作。

圖8：重疊範例

投影效果製作

Photoshop 圖層樣式→「投影」：角度 135°、距離 2px、大小 2px、不透明度 75% 黑色。

圖9：加入投影前後對比

輪廓線條

為圖像添加細微輪廓，確保在不同背景色下清晰可辨。

二、圖示製作具體步驟

步驟 1：概念草稿

先以紙筆繪製構思，考量現有概念、UI 環境呈現、文化中立性（避免文字、手、臉）、物件數量不超過三個、16×16 尺寸下簡化細節。

圖10：「我的圖片」圖示初稿

步驟 2：繪製向量圖像

• 使用 FreeHand 或 Illustrator 繪製向量圖。
• 分別建立三種尺寸向量圖：46×46、30×30、14×14（預留投影空間）。
• 複製向量圖貼上至 Photoshop（選擇「圖層」或「智慧物件」）。

圖11：Photoshop 貼上選項

步驟 3：完成 24 位基礎影像

1. 檢查三尺寸可讀性，必要時回向量軟體簡化 16×16 版本。
2. 加入投影效果（角度 135、距離 2、大小 2）。
3. 新增空白圖層，執行「合併可見圖層」保留投影。
   圖12：合併圖層保留投影
4. 建立三個標準尺寸 PSD 檔（48×48、32×32、16×16），貼上對應影像，若投影被截斷需回頭縮小向量圖重做。
5. 另存為 PSD，保留圖層與透明背景，檔名建議含尺寸與色深資訊。

步驟 4：產出 8 位與 4 位版本

（原文截斷，此處補充說明）依微軟規範，需將 24 位影像分別轉換為 256 色（含 1 位透明）與 16 色（含 1 位透明）版本，注意調色盤最佳化與抖動處理，確保低色深下仍清晰可辨。

步驟 5：使用 Gif Movie Gear 封裝 .ico

將三尺寸、三色深共九個影像匯入 Gif Movie Gear，輸出單一 .ico 檔案，完成 XP 風格圖示製作。

附錄：Windows XP 系統內建公用圖示與工具列圖示

圖13：系統公用圖示

圖14：公用工具列圖示

結語

遵循微軟設計規範與標準流程，即可製作出符合 Windows XP 視覺風格、跨尺寸色深完美呈現的專業圖示。建議設計師建立個人元件庫與動作腳本，提升批量製作效率。