Ｗｉｎｄｏｗｓ ＸＰ風格圖示輕鬆做 
 

Ｗｉｎｄｏｗｓ ＸＰ風格的圖示很美觀，用專家的話叫做"很有視覺震撼力"。隨著Ｗｉｎｄｏｗｓ ＸＰ操作系統的發行和流
行，很多人都希望能學會製作與此風格一致的圖示。那麼，這種風格的圖示是怎樣設計出來的呢？請看下面的介紹，它一定會
給你帶來驚喜。

Ｗｉｎｄｏｗｓ ＸＰ風格圖示的特點

圲圲Ｗｉｎｄｏｗｓ ＸＰ風格圖示的特點是：所用的顏色種類多、層次豐富，過渡自然流暢，邊緣清晰，立體感強。使用的設
計工具主要是Ｐｈｏｔｏｓｈｏｐ，在製作過程中，我們必須注意以下事項：
１．視線角度與透視關係應具有動感。
２．所有的圖像中的線條邊緣和角都要求圓滑，不能有生硬的感覺。
３．光源應當放置在左上角，同一個圖示中的各個圖形部分用光的風格必須一致。
４．物體放置位置和觀察者的視線應當具有一定的傾斜角度，以免顯得呆板。
５．物體陰影要過渡自然。
６．物體輪廓清晰，邊緣的線條不能有鋸齒型的折線。
７．圖示中顯示的物體，尤其是電腦以及ＩＴ設備等，外形要有現代感，盡量採用時尚流行的樣式。例如眼下液晶顯示器是
很"前衛"的，用到顯示器的圖示中就應當採用很薄的液晶顯示器的樣式。
圲圲Ｗｉｎｄｏｗｓ ＸＰ中，圖示的尺寸並不像早期的Ｗｉｎｄｏｗｓ版本那樣，要求嚴格地統一用幾個特定的尺寸，它可以
用任意尺寸，甚至還可以將自己喜愛的照片製成圖示。但原來統一的尺寸仍是系統推薦使用的，這些尺寸是：４８ × ４８、
３２ × ３２、２４ × ２４、１６ × １６（以像素的點為單位）。在製作圖示的時候，建議大家將表現相同內容的圖作成４種尺
寸，最少也需要３種尺寸：４８ × ４８、３２ × ３２、１６ × １６，同一內容的圖示，不同場合採用的尺寸不同，就是一個３
種尺寸的典型實例。
圲圲插圖是用於功能表中的圖示，所示的插圖是一個開始功能表，裡面就使用了多個２４ × ２４點像素的圖示（這些圖示是人
家微軟做好的，你就不要再費心了！），如果你想設計工具條中使用的圖示，那麼，請你注意：Ｗｉｎｄｏｗｓ ＸＰ在工具條
中使用的圖示尺寸有兩種：２４ × ２４ 和 １６ × １６，這是有尺寸限制的，就像圖中所示的一樣。

支持的顏色深度

圲圲所謂支持的顏色深度，可以直觀地理解為設計時可用的顏色種類數。支持的顏色種類數越多，可以顯示的顏色將越豐富。
按照通常習慣，大致可以分為三種：２４－Ｂｉｔ ２４位真彩色、８－Ｂｉｔ ２５６色、４－Ｂｉｔ １６色。 
圲圲只有顯示卡設置的顏色模式等於或高於某種上述設計模式時，圖示的顏色才能得以完全顯現，例如當前顯示卡設置為８－
Ｂｉｔ（２５６色），則只有８－Ｂｉｔ 及其以下的色彩可以正確顯示，高於８－Ｂｉｔ的圖示顯示的顏色將失真很大。熟悉
顯示卡設置的朋友，這點將不難理解。
圲圲同一圖形採用不同的顏色模式顯示效果有很大不同，圖是"Ｍｙ Ｐｉｃｔｕｒｅｓ"的圖示，從左到右，依次用的是 ２４
位真彩色、 ２５６色 、 １６色。

調色板

圲圲調色板是指在設計圖示的時候系統可以使用的顏色，Ｗｉｎｄｏｗｓ ＸＰ中所用的調色板：
圲圲顏色右邊的數字是構成該色所用的ＲＧＢ三個單色的份量，份量的最小值是０，最大值是２５５。
圲圲需要注意的是：在專用的設計環境中，例如Ｐｈｏｔｏｓｈｏｐ等軟體，可供使用的顏色數目很多，但設計好的圖示卻是
用在Ｗｉｎｄｏｗｓ環境中的，該環境所支持的顏色數目比Ｐｈｏｔｏｓｈｏｐ要少，有時甚至只有很少幾種，所以，選取的
顏色一定要在將來執行的調色板之內，否則，將影響顯示效果。

對像分組及透視關係

圲圲設計的圖示中，雖然可用各種各樣的圖形對象，但綜合起來，大致可分兩類：一是模擬實物的，例如表示我的文件可以用
一頁紙張、表示電腦可以用一台電腦主機、表示搜尋搜尋可以使用放大鏡等，二是會意的符號和或文字，例如感歎號常常用來
表示警告或提示等。在圖中，最左邊表示圖像我的文件，中間以放大鏡表示"搜尋"圖示，右邊是"個人偏愛設置"圖示。
圲圲如果分析圖示的透視關係，可以參考下面的方法，在圖示設計的過程中加上網格，利用網格作為參照，就可以很準確地處
理景物的透視關係。就像圖８所示，由於網格線可以由設計者增加和刪除，從這點上看，要比傳統的紙面繪畫的透視關係好掌
握。
圲圲有些圖示的設計可以考慮使用部分重疊的方案，圖形對像多，會意將變得更加形象、更便於理解含義。例如，圖９中三個
圖示的含義是（自左至右）：增加或刪除程式、圖片列印、新近建立的我的文件，你仔細想想，有這個意思沒有？但同一個圖
示中，不能用太多的物體來表示會意，採用的物體最好在三個以下。
圲圲採用物體重疊也需要注意彼此之間的透視關係。體現透視關係的另一個手段是使用陰影，請你仔細對比一下中的兩個圖
示，就會發現右邊的那個加上陰影之後，顯示效果是不一樣的。
加入陰影的方法：
圲圲１． 將左邊的圖示放置在Ｐｈｏｔｏｓｈｏｐ中。
圲圲２． 在Ｐｈｏｔｏｓｈｏｐ中，選擇"陰影"，角度取１３５度，距離取２，大小也取２。
圲圲３． 陰影用７５％的不透明的黑色。

勾勒圖示輪廓

圲圲設計初期，最好用鉛筆來勾勒出圖示的輪廓線，下面的例子是Ｍｙ Ｐｉｃｔｕｒｅｓ的圖示輪廓。
在設計圖示的時候，雖然可用素材很多，但也要遵循一些共同的原則：
圲圲１．盡量恪守已經熟悉或習慣了的概念，保持圖示含義的前後連貫和一致。
圲圲２．同一含義的圖示在系統的不同位置應保持一致。
圲圲３．注意避免採用的圖形內容與文化觀念上的衝突，並且盡量不採用字母、單詞，尤其是非通用文字的字母和單詞。另
外，還要盡量不使用人臉、人手作為圖示的素材，如果必須用，也要用那些非特定的。
圲圲４．在同一個圖示中，畫面中相互關聯的物體應控制在３個以下，如果過多，將顯得擁擠，尺寸比例也不好處理。
圲圲５．注意不要在自己設計的圖示中插入微軟的圖示或敏感的商標，這可能會引起版權糾紛。
圲圲是Ｗｉｎｄｏｗｓ ＸＰ中提供的共用圖示，其含義多數人已經瞭解，和老圖示相比，它們採用的圖形對像變化不大，但美
觀程度大大增加了。
圲圲是Ｗｉｎｄｏｗｓ ＸＰ中工具條上使用的圖示。
實例製作


下面我們就一起動手，親身體驗一下Ｗｉｎｄｏｗｓ ＸＰ風格圖示製作。
圲圲微軟推薦的圖示製作工具是：ＦｒｅｅＨａｎｄ 和 Ａｄｏｂｅ Ｉｌｌｕｓｔｒａｔｏｒ軟體，具體製作過程如下：
圲圲１．先建立圖示的輪廓圖形。ＦｒｅｅＨａｎｄ適合用來建立所謂矢量圖形，即使用劃線函數來劃線形成圖像。建立的圖
示應符合上面介紹的標準：即同一內容的圖示至少建立尺寸不同的３個圖示，以備在不同的場合下使用。
圲圲２．著色、加陰影等加工過程應用Ｐｈｏｔｏｓｈｏｐ軟體中完成，可以利用拷貝貼上命令，將矢量圖形貼上在Ｐｈｏｔ
ｏｓｈｏｐ中，是貼上命令對話視窗。
圲圲例一、建立２４－Ｂｉｔ的圖示：
圲圲１． 將原來在ＦｒｅｅＨａｎｄ中建立的圖示貼上到Ｐｈｏｔｏｓｈｏｐ中，這個過程中要注意必須將三個尺寸不同的圖
示都貼上過來，尤其注意尺寸最小的圖示（１６ × １６），清晰程度必須符合要求，如果不行，請重新用ＦｒｅｅＨａｎｄ繪
製，並重新貼上過來。
圲圲２． 加入陰影，這個操作前面已經講過，這裡不再重複，只給出選擇參數時所使用的對話視窗，
圲圲３． 將圖形與陰影進行合成，這需要先建立一個空白層，然後選擇"合併可見"，具體操作功能表。
圲圲４． 建立新的Ｐｈｏｔｏｓｈｏｐ文件，將每個尺寸的圖示單獨建立一個文件，如果認為不滿意，可以重複上述過程返工
重來。
圲圲５． 將建立的文件文件儲存為副檔名為．ｐｓｄ的文件。
例二、 建立８－Ｂｉｔ的圖示：
圲圲８－Ｂｉｔ的圖示可以顯示比３２－Ｂｉｔ模式更低的那些模式之下，建立這樣的圖示，可以使用上面介紹的方法，只是
將顏色數目加以限制。也可以以２４－Ｂｉｔ的圖示為基礎，在此基礎上將其"改造"為８－Ｂｉｔ的圖示。不論用那種方法，
都會遇到一個很現實的問題：顯示模式一更改，圖形將顯示出粗糙的邊緣，出現明顯的鋸齒狀折線，下面的操作過程，可以減
少這種影響：
圲圲１． 在ｐｈｏｔｏｓｈｏｐ環境中，雙擊原來建立的２４－Ｂｉｔ的圖像層標籤，然後將其更名為８－Ｂｉｔ的圖像層。 
圲圲２． 再建立一個新的空白層，並以某種深的顏色（例如藍色）來填充該層。
圲圲３． 將新增立的並填充好顏色的層與８－Ｂｉｔ的層進行合併操作。
圲圲４． 進行邊緣修飾，減少鋸齒折線。主要的方法是以純粹的背景顏色來"平滑"那些邊緣上的鋸齒。
圲圲５． 檢查圖形的背景光，並進行修飾。
圲圲６． 對於三種尺寸的圖示：４８ × ４８、３２ × ３２和 １６ × １６分別建立各自的Ｐｈｏｔｏｓｈｏｐ文件，可用拷貝
和貼上這些圖示之後建立文件。
圲圲７． 刷塗圖像背景顏色，這就需要在上面介紹的調色板中來選取合適的顏色，一般說，選擇顏色的原則是：盡量用原圖像
中沒有用過的顏色，例如"洋紅色"，操作步驟如下：
圲圲１．選擇功能表：Ｉｍａｇｅ－＞Ｍｏｄｅ－＞Ｉｎｄｅｘｅｄ Ｃｏｌｏｒ 然後選定 Ｆｌａｔｔｅｎ Ｌａｙｅｒｓ。
圲圲２． 在 Ｐａｌｅｔｔｅ 的下拉功能表中，選擇： Ｃｕｓｔｏｍ．在定制對話視窗中點擊ＯＫ，然後，在選定顏色後，點
擊ＯＫ。
圲圲３． 將結果儲存為．ｐｓｄ文件。
圲圲４． 另外兩個尺寸的圖示，也採用上述方法處理。
圲圲５． 也將結果儲存為．ｐｓｄ文件。 
如果建立１６色（４ Ｂｉｔ）的圖示，可以以８ Ｂｉｔ的圖示為基礎，只是用的調色板不同，這種模式下只有１６種顏色可
供選擇。
除此之外，所採用的方法和上面差別不大，這裡就不重複敘述了，另外，由於這種模式的圖示與早期Ｗｉｎｄｏｗｓ中採用的
圖示一樣，用老的方法也可以製作出來。
建立．ｉｃｏ文件

圲圲完成的圖示並不能直接在程序中使用，應用的時候必須將其編譯到一個副檔名稱為．ｉｃｏ的文件中，以建立３２ Ｂｉｔ
的圖示文件為例，需要使用一個名字為ＧＭＧ的工具，這個工具可以從Ｇａｍａｎｉ網站得到。
圲圲下面就介紹如何用這個工具來建立ｉｃｏ文件。這個過程屬於比較典型的操作，對應的圖示共有３種尺寸，每種尺寸還分
為３種顏色模式，所以，總共需要建立的文件有９個，每種尺寸中的每種顏色模式都對應一個文件，也就是下面列出的這些：
４８ × ４８ ２４－Ｂｉｔ 
３２ × ３２ ２４－Ｂｉｔ 
１６ × １６ ２４－Ｂｉｔ 
４８ × ４８ ８－Ｂｉｔ
３２ × ３２ ８－Ｂｉｔ 
１６ × １６ ８－Ｂｉｔ 
４８ × ４８ ４－Ｂｉｔ 
３２ × ３２ ４－Ｂｉｔ
１６ × １６ ４－Ｂｉｔ
圲圲具體的操作過程為： 
圲圲1． 開啟ＧＭＧ工具，將每個圖示文件用滑鼠托拽到相應的視窗中，每個圖示文件將對應地變成一個"框架"。若不使用滑
鼠托拽的方式，就需要利用功能表：Ｆｉｌｅ－＞Ｉｎｓｅｒｔ Ｆｒａｍｅｓ，兩者的作用是一樣的。
圲圲2． 當你進行這些托拽操作的時候，系統會顯示出所示對話視窗。裡面需要進行層和透明度兩個方面的設置（點擊對應的
檢查框），這些檢查框的含義是：
●直接（混合地）顯示多個層。
●不混合，每個層使用一個幀或框架。
●保持背景透明。
圲圲3． 每個圖示的背景層都有一個方框，這些方框在邏輯上總是存在的，但為了不在將來的圖示中顯示出來，請選定這些背
景幀的方框並按Ｄｅｌ鍵將其刪除，刪除的只是線條。 
圲圲4． 現在，你有了九個圖示，每三個為一組，分別對應不同的顏色模式，就像圖一樣，從上到下顏色模式依次為：４、
８、２４ Ｂｉｔ。在ＧＭＧ的環境中，將滑鼠放置到某個圖示上後，工具上面的提示框中會顯示對應圖示的屬性，包括：尺
寸、透明、顏色模式等等信息。
圲圲5． 對於４－Ｂｂｉｔ和８－Ｂｉｔ的圖示，也需要處理背景透明的問題，ＧＭＧ一般用綠色來作為背景顏色，但這可以
根據你自己的來意圖改變，換上自己喜好的顏色，更改的時候可以用功能表：Ｖｉｅｗ－＞Ｔｒａｎｓｐａｒｅｎｃｙ Ａｓ來
實現。具體操作為：
（１）選定一個幀，滑鼠點擊工具箱中的Ｐｉｃｋ Ｔｒａｎｓｐａｒｅｎｃｙ Ｃｏｌｏｒ圖示，將顯示如所示對話視窗，即
所謂透明工具。
（２）用顏色滴管工具來改變圖示中的背景顏色，例如都改用綠色，也可以用你自己喜愛的其他顏色作透明背景。
（３）對於４－Ｂｉｔ 的圖示，也需要重複上述操作過程。
圲圲6． 點擊"Ｆｉｌｅ"，以副檔名ｉｃｏ儲存這些結果。

建立工具條的方法

圲圲Ｗｉｎｄｏｗｓ ＸＰ工具條中用的圖示和剛才我們建立的圖示基本是一樣的，但有兩個區別：一是使用的圖形不需要陰影
修飾；二是尺寸有限制，必須為２４ × ２４和 １６ × １６個像素點。另外，工具條中的圖示也必須具備兩種狀態：預設狀態
和"熱"狀態。預設狀態可以簡單地理解為尚未進入使用的狀態。"熱"狀態是指滑鼠游標移動到相應圖示上後，圖示做出的響
應，這種響應一般是加深圖示顏色的飽和程度。
圲圲工具條中的圖示由於面積很小，圖示之間排列密集，所以，圖示採用的圖形應當更注意簡潔明瞭，突出其含義。假設你已
經設計好了用於工具條中的圖示，下面我們就一起看看如何建立工具條：
圲圲１． 在Ｐｈｏｔｏｓｈｏｐ中，畫出下面的工具條方框，一律畫成正方形。同一尺寸的方框排成一行，兩種尺寸分別為：
２４ × ２４和 １６ × １６像素，然後建立相應的層。
圲圲２．將原來設計好的圖示放置到上面的正方形框中，放置的次序根據你的需要決定，各個圖示不能歪斜或與臨近的圖示重
疊，就像圖中那樣。
圲圲３．將上面的結果儲存為Ｐｈｏｔｏｓｈｏｐ文件。
圲圲４．在Ｐｈｏｔｏｓｈｏｐ中，可以建立圖示的"熱"狀態，步驟如下：
圲圲（１）開啟上一步儲存的文件，用"另存為"儲存一個備份，將２４ × ２４和 １６ × １６兩個層重新命名。
圲圲（２）對於每個圖示，使用功能表：Ｉｍａｇｅ－＞Ａｄｊｕｓｔ－＞Ｌｅｖｅｌｓ…來建立"熱"狀態，也就是在下面的
對話視窗中托動中間的箭頭，調整Ｌｅｖｅｌｓ為０．７５，點擊ＯＫ。這一步驟調整的就是圖形中顏色的飽和度的級別。
圲圲５． 對每種尺寸的各個圖示，都需要建立"熱"狀態的版本，然後利用Ｃｒｏｐ工具儲存文件，以整個工具條為單位建立副
檔名為ｐｓｄ的文件。
圲圲６． 例如２４ Ｂｉｔ 的工具條，儲存的時候用滑鼠將處理好的工具條托拽進入ＧＭＧ中，然後移動入任意的空白幀，利
用功能表：Ｆｉｌｅ－＞Ｅｘｐｏｒｔ ａｓ－＞Ｆｉｌｍｓｔｒｉｐ． 在 Ｆｉｌｍ Ｅｘｐｏｒｔ 對話視窗中𡊨點擊檢查框：
ＢＭＰ／ＤＩＢ ａｎｄ ２４－Ｂｉｔ ｗｉｔｈ Ａｌｐｈａ 即可完成，具體結果可參看上圖。
圲圲Ｗｉｎｄｏｗｓ ＸＰ的圖示設計很有意思、也很有挑戰性，更主要的是，據說從Ｗｉｎｄｏｗｓ ＸＰ開始微軟將引入一
種新的技術，這種技術可把操作系統的內核程序和產生界面的程序徹底分離，這樣用戶將來有可能根據自己的想法來ＤＩＹ操
作系統的界面。如果你真有好的創意和技術，可以開發出多種風格的界面來。因此，本文作為引玉之磚，想必會得到很多朋友
的歡迎！