Windows XP風格圖示輕鬆做 
 

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

Windows XP風格圖示的特點

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

支持的顏色深度

所謂支持的顏色深度,可以直觀地理解為設計時可用的顏色種類數。支持的顏色種類數越多,可以顯示的顏色將越豐富。
按照通常習慣,大致可以分為三種:24-Bit 24位真彩色、8-Bit 256色、4-Bit 16色。 
只有顯示卡設置的顏色模式等於或高於某種上述設計模式時,圖示的顏色才能得以完全顯現,例如當前顯示卡設置為8-
Bit(256色),則只有8-Bit 及其以下的色彩可以正確顯示,高於8-Bit的圖示顯示的顏色將失真很大。熟悉
顯示卡設置的朋友,這點將不難理解。
同一圖形採用不同的顏色模式顯示效果有很大不同,圖是"My Pictures"的圖示,從左到右,依次用的是 24
位真彩色、 256色 、 16色。

調色板

調色板是指在設計圖示的時候系統可以使用的顏色,Windows XP中所用的調色板:
顏色右邊的數字是構成該色所用的RGB三個單色的份量,份量的最小值是0,最大值是255。
需要注意的是:在專用的設計環境中,例如Photoshop等軟體,可供使用的顏色數目很多,但設計好的圖示卻是
用在Windows環境中的,該環境所支持的顏色數目比Photoshop要少,有時甚至只有很少幾種,所以,選取的
顏色一定要在將來執行的調色板之內,否則,將影響顯示效果。

對像分組及透視關係

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

勾勒圖示輪廓

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


下面我們就一起動手,親身體驗一下Windows XP風格圖示製作。
微軟推薦的圖示製作工具是:FreeHand 和 Adobe Illustrator軟體,具體製作過程如下:
1.先建立圖示的輪廓圖形。FreeHand適合用來建立所謂矢量圖形,即使用劃線函數來劃線形成圖像。建立的圖
示應符合上面介紹的標準:即同一內容的圖示至少建立尺寸不同的3個圖示,以備在不同的場合下使用。
2.著色、加陰影等加工過程應用Photoshop軟體中完成,可以利用拷貝貼上命令,將矢量圖形貼上在Phot
oshop中,是貼上命令對話視窗。
例一、建立24-Bit的圖示:
1. 將原來在FreeHand中建立的圖示貼上到Photoshop中,這個過程中要注意必須將三個尺寸不同的圖
示都貼上過來,尤其注意尺寸最小的圖示(16 × 16),清晰程度必須符合要求,如果不行,請重新用FreeHand繪
製,並重新貼上過來。
2. 加入陰影,這個操作前面已經講過,這裡不再重複,只給出選擇參數時所使用的對話視窗,
3. 將圖形與陰影進行合成,這需要先建立一個空白層,然後選擇"合併可見",具體操作功能表。
4. 建立新的Photoshop文件,將每個尺寸的圖示單獨建立一個文件,如果認為不滿意,可以重複上述過程返工
重來。
5. 將建立的文件文件儲存為副檔名為.psd的文件。
例二、 建立8-Bit的圖示:
8-Bit的圖示可以顯示比32-Bit模式更低的那些模式之下,建立這樣的圖示,可以使用上面介紹的方法,只是
將顏色數目加以限制。也可以以24-Bit的圖示為基礎,在此基礎上將其"改造"為8-Bit的圖示。不論用那種方法,
都會遇到一個很現實的問題:顯示模式一更改,圖形將顯示出粗糙的邊緣,出現明顯的鋸齒狀折線,下面的操作過程,可以減
少這種影響:
1. 在photoshop環境中,雙擊原來建立的24-Bit的圖像層標籤,然後將其更名為8-Bit的圖像層。 
2. 再建立一個新的空白層,並以某種深的顏色(例如藍色)來填充該層。
3. 將新增立的並填充好顏色的層與8-Bit的層進行合併操作。
4. 進行邊緣修飾,減少鋸齒折線。主要的方法是以純粹的背景顏色來"平滑"那些邊緣上的鋸齒。
5. 檢查圖形的背景光,並進行修飾。
6. 對於三種尺寸的圖示:48 × 48、32 × 32和 16 × 16分別建立各自的Photoshop文件,可用拷貝
和貼上這些圖示之後建立文件。
7. 刷塗圖像背景顏色,這就需要在上面介紹的調色板中來選取合適的顏色,一般說,選擇顏色的原則是:盡量用原圖像
中沒有用過的顏色,例如"洋紅色",操作步驟如下:
1.選擇功能表:Image->Mode->Indexed Color 然後選定 Flatten Layers。
2. 在 Palette 的下拉功能表中,選擇: Custom.在定制對話視窗中點擊OK,然後,在選定顏色後,點
擊OK。
3. 將結果儲存為.psd文件。
4. 另外兩個尺寸的圖示,也採用上述方法處理。
5. 也將結果儲存為.psd文件。 
如果建立16色(4 Bit)的圖示,可以以8 Bit的圖示為基礎,只是用的調色板不同,這種模式下只有16種顏色可
供選擇。
除此之外,所採用的方法和上面差別不大,這裡就不重複敘述了,另外,由於這種模式的圖示與早期Windows中採用的
圖示一樣,用老的方法也可以製作出來。
建立.ico文件

完成的圖示並不能直接在程序中使用,應用的時候必須將其編譯到一個副檔名稱為.ico的文件中,以建立32 Bit
的圖示文件為例,需要使用一個名字為GMG的工具,這個工具可以從Gamani網站得到。
下面就介紹如何用這個工具來建立ico文件。這個過程屬於比較典型的操作,對應的圖示共有3種尺寸,每種尺寸還分
為3種顏色模式,所以,總共需要建立的文件有9個,每種尺寸中的每種顏色模式都對應一個文件,也就是下面列出的這些:
48 × 48 24-Bit 
32 × 32 24-Bit 
16 × 16 24-Bit 
48 × 48 8-Bit
32 × 32 8-Bit 
16 × 16 8-Bit 
48 × 48 4-Bit 
32 × 32 4-Bit
16 × 16 4-Bit
具體的操作過程為: 
1. 開啟GMG工具,將每個圖示文件用滑鼠托拽到相應的視窗中,每個圖示文件將對應地變成一個"框架"。若不使用滑
鼠托拽的方式,就需要利用功能表:File->Insert Frames,兩者的作用是一樣的。
2. 當你進行這些托拽操作的時候,系統會顯示出所示對話視窗。裡面需要進行層和透明度兩個方面的設置(點擊對應的
檢查框),這些檢查框的含義是:
●直接(混合地)顯示多個層。
●不混合,每個層使用一個幀或框架。
●保持背景透明。
3. 每個圖示的背景層都有一個方框,這些方框在邏輯上總是存在的,但為了不在將來的圖示中顯示出來,請選定這些背
景幀的方框並按Del鍵將其刪除,刪除的只是線條。 
4. 現在,你有了九個圖示,每三個為一組,分別對應不同的顏色模式,就像圖一樣,從上到下顏色模式依次為:4、
8、24 Bit。在GMG的環境中,將滑鼠放置到某個圖示上後,工具上面的提示框中會顯示對應圖示的屬性,包括:尺
寸、透明、顏色模式等等信息。
5. 對於4-Bbit和8-Bit的圖示,也需要處理背景透明的問題,GMG一般用綠色來作為背景顏色,但這可以
根據你自己的來意圖改變,換上自己喜好的顏色,更改的時候可以用功能表:View->Transparency As來
實現。具體操作為:
(1)選定一個幀,滑鼠點擊工具箱中的Pick Transparency Color圖示,將顯示如所示對話視窗,即
所謂透明工具。
(2)用顏色滴管工具來改變圖示中的背景顏色,例如都改用綠色,也可以用你自己喜愛的其他顏色作透明背景。
(3)對於4-Bit 的圖示,也需要重複上述操作過程。
6. 點擊"File",以副檔名ico儲存這些結果。

建立工具條的方法

Windows XP工具條中用的圖示和剛才我們建立的圖示基本是一樣的,但有兩個區別:一是使用的圖形不需要陰影
修飾;二是尺寸有限制,必須為24 × 24和 16 × 16個像素點。另外,工具條中的圖示也必須具備兩種狀態:預設狀態
和"熱"狀態。預設狀態可以簡單地理解為尚未進入使用的狀態。"熱"狀態是指滑鼠游標移動到相應圖示上後,圖示做出的響
應,這種響應一般是加深圖示顏色的飽和程度。
工具條中的圖示由於面積很小,圖示之間排列密集,所以,圖示採用的圖形應當更注意簡潔明瞭,突出其含義。假設你已
經設計好了用於工具條中的圖示,下面我們就一起看看如何建立工具條:
1. 在Photoshop中,畫出下面的工具條方框,一律畫成正方形。同一尺寸的方框排成一行,兩種尺寸分別為:
24 × 24和 16 × 16像素,然後建立相應的層。
2.將原來設計好的圖示放置到上面的正方形框中,放置的次序根據你的需要決定,各個圖示不能歪斜或與臨近的圖示重
疊,就像圖中那樣。
3.將上面的結果儲存為Photoshop文件。
4.在Photoshop中,可以建立圖示的"熱"狀態,步驟如下:
(1)開啟上一步儲存的文件,用"另存為"儲存一個備份,將24 × 24和 16 × 16兩個層重新命名。
(2)對於每個圖示,使用功能表:Image->Adjust->Levels…來建立"熱"狀態,也就是在下面的
對話視窗中托動中間的箭頭,調整Levels為0.75,點擊OK。這一步驟調整的就是圖形中顏色的飽和度的級別。
5. 對每種尺寸的各個圖示,都需要建立"熱"狀態的版本,然後利用Crop工具儲存文件,以整個工具條為單位建立副
檔名為psd的文件。
6. 例如24 Bit 的工具條,儲存的時候用滑鼠將處理好的工具條托拽進入GMG中,然後移動入任意的空白幀,利
用功能表:File->Export as->Filmstrip. 在 Film Export 對話視窗中點擊檢查框:
BMP/DIB and 24-Bit with Alpha 即可完成,具體結果可參看上圖。
Windows XP的圖示設計很有意思、也很有挑戰性,更主要的是,據說從Windows XP開始微軟將引入一
種新的技術,這種技術可把操作系統的內核程序和產生界面的程序徹底分離,這樣用戶將來有可能根據自己的想法來DIY操
作系統的界面。如果你真有好的創意和技術,可以開發出多種風格的界面來。因此,本文作為引玉之磚,想必會得到很多朋友
的歡迎! 
 
www.000webhost.com