并不是所有對象使用 16 × 16 的圖像都能獲得較好效果。下面的對象通常以正面直觀圖像顯示:
文檔圖標
符號圖標(如警告或信息圖標)
單一對象圖標(如放大鏡)
除非創建重疊輔助對象可以更清楚地表達圖標的含義,否則就可讀性和完整性而言,還是應使用直觀圖像。還應考慮如何按組查看圖標,以便確定如何將對象分組。
投影
使用投影后,Windows XP 圖標將更清晰且更具立體感??稍赑hotoshop 中實現這種效果。
若要為圖像添加投影,請在 Photoshop 中雙擊圖像的圖層,并選擇 Drop Shadow。然后將 Angle 更改為 135,Distance 更改為 2,Size 更改為 2。此時投影為 75% 不透明黑色。
輪廓
繪制 XP 樣式圖標時,為圖像添加輪廓可使之更清晰,并可保證圖像在不同背景色上都具有較好效果。
二、創建圖標的具體步驟
步驟 1:概念
設計新圖標時,建議先用紙筆將基本思路繪制出來。
以下是 Windows XP “圖片收藏”圖標的初稿示例:
設計圖標時,請考慮以下因素:
使用已有概念以確保真實表達了用戶的想法。
考慮圖標在用戶界面環境中以何種形式出現,以及如何作為圖標集的一部分使用。
考慮圖形的文化背景。避免在圖標中使用字母、單詞、手或臉。必須用圖標表示人或用戶時,請盡可能使其大眾化。
如果圖標中的圖像由多個對象組成,應考慮如何使圖像尺寸更小。建議在圖標中使用的對象不超過三個。對于 16 × 16 的尺寸大小,還可考慮刪除某些對象或簡化圖像使之更容易辨認。
注意:在圖標中使用 Windows 標志時,請遵守以下規定:
為遵守商標及 Windows 品牌規則,除 Windows 的 Update 圖標外,不要在圖標中使用 Windows 標志。
Windows 標志只能在 Microsoft? Windows? 操作系統所提供的圖標中使用。
Microsoft 品牌組應審查圖標中 Windows 標志的使用情況。
公用圖標
公用工具欄圖標
步驟 2:繪制圖像
若要繪制 Microsoft Windows XP 的樣式圖標,建議您使用矢量工具,如 Macromedia FreeHand 或 Adobe Illustrator。按圖標設計概述中指定的操作使用調色板和樣式特征。
使用 FreeHand 或 Illustrator 繪制圖像。
分別創建三個尺寸的圖像。因為稍后將為圖像添加投影,所以創建的三個尺寸應為 46 × 46、30 × 30 及 14 × 14 像素。
復制矢量圖,并將其粘貼到 Photoshop 中。
注意:建議使用 Photoshop 作為圖像創建工具,因為創建 .ico 文件所用的 Gif Movie Gear 可以直接導入 Photoshop 文件。在 Photoshop 中通過“RGB”模式創建的圖像都具有 alpha通道。如果圖像或圖層具有透明度,對圖標而言,使用通道將非常有意義。
若要合并投影和 24 位圖像,請新建一個空層。在 Layers 菜單中,選擇 Merge Visible 將三層合并在一起。
新建三個 Photoshop 文件,每個文件的尺寸分別為 48 × 48、32 × 32 和 16 × 16 像素。復制并粘貼相應圖像。如果圖像投影被截斷,應在FreeHand 中縮小圖像尺寸,然后重新執行這些步驟。
將每個文件保存為 .psd 文件。不要將圖像圖層與背景圖層合并在一起。最好在文件名中包含尺寸和色彩深度。
步驟 4:創建 8 位和 4 位圖像
創建 8 位圖像
既然已經制作完成了 24 位圖像(用于合成 32 位圖標),下一步則是創建 8 位圖像。8 位圖標將以低于 32 位的任意顏色模式顯示。
8 位圖標不具有 8 位 alpha 通道。因此,要對 8位圖標進行邊緣清理,否則邊緣會有鋸齒。
在 Photoshop 中, 復制 24 位圖像圖層并將圖層重命名為 8 位圖像。
新建空層并用深色(如藍色)填充圖層。
將 8 位圖像圖層與新層合并。
用純色清理邊緣,去除已消除鋸齒的像素。固定使用某種方法對邊緣進行處理,淡化邊緣的鋸齒效果。
在淺色(如白色)背景上檢查圖像的外觀效果。
新建三個 Photoshop 文件,每個文件的尺寸分別為:48 × 48、32 × 32 和 16 × 16 像素。復制并粘貼相應圖像。
接下來需將圖像的索引顏色更改為 256 色。8 位圖標可以具有自定義的調色板。 在 48 × 48 圖像中,使用獨特的顏色 — 圖像中未曾使用的顏色填充背景。通常使用品紅色 (R255 G0 B255)。
轉至 Image->Mode->Indexed Color,然后選擇 Flatten Layers。
在 Palette 下拉菜單中,選擇 Custom。在 Custom 對話框中,單擊 OK。在 Indexed Color
對話框中單擊 OK。
將文件保存為 .psd 文件。
使用同樣的背景色和自定義調色板保存另外兩種尺寸的文件。
將每個文件保存為 .psd 文件。
創建 4 位圖像
若要使圖標在較低的顯示環境中具有較好的顯示效果,請使用 16 色圖標。
將 8 位圖像的索引顏色改為 Windows 16 色調色板。
僅用 16 色調色板中的顏色清理圖像。
在圖像的底部和右側邊緣處使用黑色輪廓。
在圖像的左側和頂部邊緣處使用深灰或其它深顏色。
使用同樣的背景色保存三種尺寸。確保圖像中未使用背景色,因為背景色將作為透明色。
步驟 5:創建 .ico 文件
所有圖像都準備好后,即可將它們編譯成 .ico文件。若要創建 32 位圖標,需使用 Gif Movie Gear (以下簡稱GMG) 工具。在 Gamani(英文)網站可獲得此工具。
在下面的步驟中,我們將討論創建典型 .ico 文件(具有三種尺寸和三種色彩深度)的過程。
總共應有 9 個文件 — 每種色彩深度有三種尺寸:
48 × 48,24 位
32 × 32,24 位
16 × 16,24 位
48 × 48,8 位
32 × 32,8 位
16 × 16,8 位
48 × 48,4 位
32 × 32,4 位
16 × 16,4 位
打開 Gif Movie Gear 軟件(以下簡稱GMG),將每個圖像文件拖動到窗口中(或使用 File->Insert Frames)。 每個圖像都將成為一個幀。
將 24 位圖像(或帶有圖層的 .psd 文件)拖動到 GMG 中時,將會出現一個對話框:
請確認設置如下所示:
圖層為多幀動畫
未混合:每層為一個幀
保持背景透明
每個24位圖像的背景層都將顯示為一個幀。選擇幀,并按 Delete 鍵可刪除這些空白幀。
現在,總共應有 9 個幀。圖標應按顏色分辨率的遞增順序排序:前三個為 4 位(16 色),接下來的三個為 8 位(256 色),最后三個為 24 位顏色加上 8 位 alpha 通道(共 32 位)。
注意:若要檢查圖像的屬性,請將鼠標移到圖像上。將顯示一個工具提示框,其中包含每個圖像的分辨率信息。默認設置包括維度、透明度和位計數??梢酝ㄟ^ Edit->Preferences->Frame Tips 添加或刪除所顯示的項目。
對于 8 位和 4 位圖像,背景應是透明的。GMG 使用暗黃綠色表示“透明”色??梢允褂?View->Transparency As
菜單項設置自己的顏色(或仍然使用默認背景色)。所選顏色只用于查看圖像效果,不會影響圖像本身。
若要使 8 位和 4 位圖像透明,可采用下面的辦法:
選擇一個幀,并單擊 Pick Transparency Color 工具欄圖標(吸管)。
將打開一個對話框,其中顯示您的圖標。使用吸管工具單擊圖標的背景色。此顏色將更改為暗黃綠色(或在 GMG 中選作透明背景色的顏色)。
重復所有 4 位和 8 位幀。
若要保存圖標,請選擇 File->Save Icon As...。
三、創建工具欄
Windows 工具欄圖標除不使用投影之外,使用的樣式與其它圖標相同。由于工具欄圖標非常小,建議您使用簡單的圖像。如果以直觀方式顯示圖像即可清晰地表達圖標的含義,則不必使用其它復雜方式。
Windows 工具欄顯示兩種圖標尺寸:24 × 24 和 16 × 16 像素。圖標具有兩種狀態 — 默認和激活(鼠標在圖標上)。對于激活態,我們需稍微增加圖像的飽和度。
工具欄圖標的創建過程除了圖像是 .bmp 格式之外,與創建非工具欄圖標非常相似 — 基本上是按順序排列的一行圖標。
在 FreeHand 中繪制了各種尺寸的圖標之后,請將它們復制并粘貼到 Photoshop 中。將 24 × 24 的圖像放在一個圖層上,將 16 × 16 的圖像放在另一個圖層上。
在每個圖層上,針對每種尺寸畫一行方框。一行為 16 × 16 的方框,另一行為 24 × 24 的方框。
將每個圖像按所需順序置于方框中。確認圖像間沒有重疊。
保存 Photoshop 文件。
接下來將在 Photoshop 中創建激活態圖像。
復制 24 × 24 和 16 × 16 圖層。重命名圖層,將其標記為激活態版本。
對于每個激活態版本,選擇圖層并轉至 Image->Adjust->Levels,然后將中間的箭頭移到 0.75 處。單擊 OK?! ?
創建激活態圖像后,每個草圖應有一個圖層:分別是默認 24 × 24、激活 24 × 24、默認 16 × 16 以及激活 16 × 16。
接下來為每個草圖單獨創建文件。
一種方式是使用“裁切”工具將文件裁切到適合草圖的尺寸,然后,保存該文件。對草圖的度量必須從第一個方框的開始處直到最后一個方框的結尾處。
分別將每個草圖保存為 24 位 .psd 文件。
如果要將草圖另存為 32 位圖像,請將其拖動到 GMG 中。刪除所有空白幀。轉至 File->Export as->Filmstrip。在 Film Export 對話框中,確認已選中 BMP/DIB and 24-bit with Alpha。
四、創建 AVI
Microsoft Windows XP 使用 8 位 AVI。創建 .avi 文件的過程與創建圖標的過程相同 — 在 Photoshop 中準備圖像,然后將其拖動到 GMG 中。請按以下指導創建8 位圖標。
若要使用 GMG 保存 AVI,請轉至 File->Export As->AVI file?。
創建 .avi 文件時,請考慮以下因素:
使用品紅 (R255 G0 B255) 作為背景透明色。
在 Photoshop 中,重要的一點是不要出現雜散像素。請將填充能力設置為 0,并確認未選中取消鋸齒。