怎樣將原有圖片更改為圖標

博客 | 社區 | 留言

會員投稿收藏本站

首頁關註泗縣綜合新聞健康保健時尚頻道網絡學院泗州論壇大泗縣影院

當前位置：大泗縣>網絡學院>圖象處理> 教妳創建 Windows XP 圖標圖標

發表日期

2004-03-30

首頁關閉

教妳創建 Windows XP 圖標圖標

來源: 編輯: 閱讀: 4

教妳創建 Windows XP 圖標圖標

簡介

Microsoft? Windows? XP 引入了壹種新的圖標設計樣式。在以下指南中，我們將討論設計和創建 Windows XP 樣式圖標的具體步驟。

Windows XP 圖標樣式有趣、色彩豐富且充滿活力 — 這是因為這些圖標是 32 位圖標，並且邊緣非常平滑。在矢量程序中繪制完每個圖標後，再用 Adobe Photoshop 進行處理可使圖像更加完美。

本指南是專為設計者編寫的。在創建圖像時，建議您與高水平的圖形設計者壹起工作，尤其是具有豐富的矢量和 3D 程序經驗的圖形設計者。

圖 1：圖標示例

圖標設計概述

本節的目的是讓您熟悉 Windows XP 的新樣式，為創建圖標做好準備。

圖標樣式特性

色彩豐富，是對 Windows XP 外觀的補充。

不同的角度和透視特性為圖像增添了動態活力。

元素的邊角十分柔和，並略微有些圓滑。

光源位於圖標的左上角，同時有環繞光照亮圖標的其它部分。

漸變效果使圖標具有立體感，進而使圖標的外觀更加豐滿。

投影使圖標更具對比度和立體感。

添加輪廓可使圖像更清晰。

日常對象（如計算機和設備）具有更現代化的個人外觀。

圖標尺寸

Windows 圖標有四種尺寸 — 48 × 48、32 × 32、24 × 24 和 16 × 16 像素。

建議使用以下三種尺寸：

48 × 48 像素

32 × 32 像素

16 × 16 像素

圖 2：常規圖標尺寸

“開始”菜單右側的圖標顯示為 24 × 24 像素大小。該尺寸不需要由用戶提供。

圖 3：“開始”菜單中的 24 × 24 像素大小

對於正在創建的工具欄圖標，Windows 標準尺寸為 24 × 24 和 16 × 16 像素。

圖 4：標準工具欄圖標尺寸

圖標色彩深度支持

Windows XP 支持 32 位圖標。32 位圖標為 24 位圖像加上 8 位 alpha 通道。使圖標邊緣非常平滑，且與背景相融合。

每個 Windows XP 圖標應包含以下三種色彩深度，以支持不同的顯示器顯示設置：

24 位圖像加上 8 位 alpha 通道（32 位）

8 位圖像（256 色），加上 1 位透明色

4 位圖像（16 色），加上 1 位透明色

圖 5：32 位、8 位和 4 位的“圖片收藏”圖標

調色板

以下顏色是圖標中使用的主要顏色：

圖 6：Windows XP 圖標調色板

對象的角度和分組

以下是 Windows XP 樣式圖標使用的透視網格：

圖 7：Windows XP 圖標透視

並非所有對象使用 16 × 16 的復雜圖像都能獲得較好效果。以下對象通常以直觀圖像顯示：

文檔圖標

符號圖標（如警告或信息圖標）

單壹對象圖標（如放大鏡）

圖 8：直觀圖標示例（.Jpg 文檔、搜索和收藏夾圖標）

除非創建重疊輔助對象可以更清楚地表達圖標的含義，否則就可讀性和完整性而言，還是應使用直觀圖像。還應考慮如何按組查看圖標，以便確定如何將對象分組。

圖 9：重疊示例（添加或刪除程序、打印圖片及最近的文檔）

投影

使用投影後，Windows XP 圖標將更清晰且更具立體感。可在 Photoshop 中實現這種效果，本指南的後面部分將對此進行描述。

若要為圖像添加投影，請在 Photoshop 中雙擊圖像的圖層，並選擇 Drop Shadow。然後將 Angle 更改為 135，Distance 更改為 2，Size 更改為 2。此時投影為 75% 不透明黑色。

圖 10：為圖標添加投影前後

輪廓

繪制 XP 樣式圖標時，為圖像添加輪廓可使之更清晰，並可保證圖像在不同背景色上都具有較好效果。

步驟 1：概念

設計新圖標時，建議先用紙筆將基本思路繪制出來。

以下是 Windows XP “圖片收藏”圖標的初稿示例：

圖 11：“圖片收藏”圖標初稿

設計圖標時，請考慮以下因素：

使用已有概念以確保真實表達了用戶的想法。

考慮圖標在用戶界面環境中以何種形式出現，以及如何作為圖標集的壹部分使用。

考慮圖形的文化背景。避免在圖標中使用字母、單詞、手或臉。必須用圖標表示人或用戶時，請盡可能使其大眾化。

如果圖標中的圖像由多個對象組成，應考慮如何使圖像尺寸更小。建議在圖標中使用的對象不超過三個。對於 16 × 16 的尺寸大小，還可考慮刪除某些對象或簡化圖像使之更容易辨認。

註意：在圖標中使用 Windows 標誌時，請遵守以下規定：

為遵守商標及 Windows 品牌規則，除 Windows 的 Update 圖標外，不要在圖標中使用 Windows 標誌。

Windows 標誌只能在 Microsoft? Windows? 操作系統所提供的圖標中使用。

Microsoft 品牌組應審查圖標中 Windows 標誌的使用情況。

公用圖標

圖 12：Windows XP 的公用圖標

公用工具欄圖標

圖 13：Windows XP 的公用工具欄圖標

步驟 2：繪制圖像

若要繪制 Microsoft Windows XP 的樣式圖標，建議您使用矢量工具，如 Macromedia FreeHand 或 Adobe Illustrator。按圖標設計概述中指定的操作使用調色板和樣式特征。

使用 FreeHand 或 Illustrator 繪制圖像。

分別創建三個尺寸的圖像。因為稍後將為圖像添加投影，所以創建的三個尺寸應為 46 × 46、30 × 30 及 14 × 14 像素。

復制矢量圖，並將其粘貼到 Photoshop 中。

圖 14：Paste（粘貼）對話框

註意：建議使用 Photoshop 作為圖像創建工具，因為創建 .ico 文件所用的 Gif Movie Gear 可以直接導入 Photoshop 文件。在 Photoshop 中通過“RGB”模式創建的圖像都具有 alpha 通道。如果圖像或圖層具有透明度，對圖標而言，使用通道將非常有意義。

步驟 3：創建 24 位圖像

將矢量文件粘貼到 Photoshop 中後，下壹步就是完成 24 位圖像。

將三個尺寸的圖像粘貼到 Photoshop 中後，請檢查圖像的可讀性和分辨率，特別是 16 × 16 大小的圖像。可能需要進行像素推移。如果不能清晰地顯示 16 × 16 的圖像，應在 FreeHand 中簡化該尺寸的圖像。

若要為圖像添加投影，請雙擊圖像的圖層，並選擇 Drop Shadow。然後將 Angle 更改為 135，Distance 更改為 2，Size 更改為 2。此時，投影為 75% 不透明黑色。

圖 15：設置投影

若要合並投影和 24 位圖像，請新建壹個空層。在 Layers 菜單中，選擇 Merge Visible 將三層合並在壹起。

圖 16：合並圖層保留投影

新建三個 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 位圖像圖層與新層合並。

用純色清理邊緣，去除已消除鋸齒的像素。固定使用某種方法對邊緣進行處理，淡化邊緣的鋸齒效果。

在淺色（如白色）背景上檢查圖像的外觀效果。

圖 17：清理 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 色調色板中的顏色清理圖像。

在圖像的底部和右側邊緣處使用黑色輪廓。

在圖像的左側和頂部邊緣處使用深灰或其它深顏色。

使用同樣的背景色保存三種尺寸。確保圖像中未使用背景色，因為背景色將作為透明色。

圖 18：4 位圖標示例

步驟 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 中時，將會出現壹個對話框：

圖 19：在 Gif Movie Gear 中設置 24 位圖像

請確認設置如下所示：

圖層為多幀動畫

未混合：每層為壹個幀

保持背景透明

每個 24 位圖像的背景層都將顯示為壹個幀。選擇幀，並按 Delete 鍵可刪除這些空白幀。

現在，總***應有 9 個幀。圖標應按顏色分辨率的遞增順序排序：前三個為 4 位（16 色），接下來的三個為 8 位（256 色），最後三個為 24 位顏色加上 8 位 alpha 通道（*** 32 位）。

圖 20：Gif Movie Gear 中幀的順序

註意：若要檢查圖像的屬性，請將鼠標移到圖像上。將顯示壹個工具提示框，其中包含每個圖像的分辨率信息。默認設置包括維度、透明度和位計數。可以通過 Edit->Preferences->Frame Tips 添加或刪除所顯示的項目。

對於 8 位和 4 位圖像，背景應是透明的。GMG 使用暗黃綠色表示“透明”色。可以使用 View->Transparency As 菜單項設置自己的顏色（或仍然使用默認背景色）。所選顏色只用於查看圖像效果，不會影響圖像本身。

若要使 8 位和 4 位圖像透明：

選擇壹個幀，並單擊 Pick Transparency Color 工具欄圖標（吸管）。

圖 21：使用透明工具

將打開壹個對話框，其中顯示您的圖標。使用吸管工具單擊圖標的背景色。此顏色將更改為暗黃綠色（或在 GMG 中選作透明背景色的顏色）。

重復所有 4 位和 8 位幀。

若要保存圖標，請選擇 File->Save Icon As...。

創建工具欄

Windows 工具欄圖標除不使用投影之外，使用的樣式與其它圖標相同。由於工具欄圖標非常小，建議您使用簡單的圖像。如果以直觀方式顯示圖像即可清晰地表達圖標的含義，則不必使用其它復雜方式。

Windows 工具欄顯示兩種圖標尺寸：24 × 24 和 16 × 16 像素。圖標具有兩種狀態 — 默認和激活（鼠標在圖標上）。對於激活態，我們需稍微增加圖像的飽和度。

工具欄圖標的創建過程除了圖像是 .bmp 格式之外，與創建非工具欄圖標非常相似 — 基本上是按順序排列的壹行圖標。

在 FreeHand 中繪制了各種尺寸的圖標之後，請將它們復制並粘貼到 Photoshop 中。將 24 × 24 的圖像放在壹個圖層上，將 16 × 16 的圖像放在另壹個圖層上。

在每個圖層上，針對每種尺寸畫壹行方框。壹行為 16 × 16 的方框，另壹行為 24 × 24 的方框。

圖 22：工具欄圖標的方框示例

將每個圖像按所需順序置於方框中。確認圖像間沒有重疊。

圖 23：將圖標置於工具欄幀中

保存 Photoshop 文件。

接下來將在 Photoshop 中創建激活態圖像。

復制 24 × 24 和 16 × 16 圖層。重命名圖層，將其標記為激活態版本。

對於每個激活態版本，選擇圖層並轉至 Image->Adjust->Levels，然後將中間的箭頭移到 0.75 處。單擊 OK。

圖 24：更改色階創建“激活”態圖像

創建激活態圖像後，每個草圖應有壹個圖層：分別是默認 24 × 24、激活 24 × 24、默認 16 × 16 以及激活 16 × 16。

接下來為每個草圖單獨創建文件。

壹種方式是使用“裁切”工具將文件裁切到適合草圖的尺寸，然後，保存該文件。對草圖的度量必須從第壹個方框的開始處直到最後壹個方框的結尾處。

分別將每個草圖保存為 24 位 .psd 文件。

圖 25：Photoshop 中的 24 位工具欄草圖

如果要將草圖另存為 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，並確認未選中取消鋸齒。

頂部關閉

上壹篇：FR渲染的黃金酒杯3DSMAX 下壹篇：MAYA中下顎的建模方法Maya