如何將原始圖片變成圖標

博客|社區|消息

成員向收集站點投稿。

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

當前位置:大西縣>網絡學院>圖像處理>:教妳創建Windows XP圖標。

出版日期

2004-03-30

主頁關閉

教妳創建視窗XP圖標。

來源:編輯:閱讀:4

教妳創建視窗XP圖標。

簡介

微軟？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:開始菜單中的24x24像素大小

對於正在創建的工具欄圖標，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中雙擊圖像的圖層，然後選擇“投影”。然後將角度改為135，距離改為2，大小改為2。在這壹點上，投影是75%不透明的黑色。

圖10:向圖標添加投影之前和之後。

概述

在繪制XP風格的圖標時，給圖像添加壹個輪廓可以使其更加清晰，並保證圖像在不同的背景顏色下都有很好的效果。

步驟1:概念

設計新圖標時，建議先用紙和筆把基本思路畫出來。

以下是Windows XP圖片收藏圖標初稿的示例:

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

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

利用已有的概念，確保用戶的想法得到真實的表達。

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

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

如果圖標中的圖像由多個對象組成，那麽就要考慮如何讓圖像變小。建議在圖標中使用不超過三個對象。對於16 × 16的尺寸，我們也可以考慮刪除壹些物體或者簡化圖像，使其更容易識別。

註意:在圖標中使用Windows徽標時，請遵守以下規則:

為了遵守商標和Windows品牌規則，除Windows Update圖標外，請勿在圖標中使用Windows徽標。

Windows logo只能在微軟用？Windows？在操作系統提供的圖標中使用。

Microsoft品牌組應審查圖標中Windows徽標的使用。

常用圖標

圖12:Windows XP的常用圖標

通用工具欄圖標

圖13:Windows XP的常用工具欄圖標

第二步:畫壹幅圖像

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

使用手繪或Illustrator繪制圖像。

分別創建三種尺寸的圖像。因為投影會在後面加到圖像上，所以創建的三個維度應該是46 × 46，30 × 30，14 × 14像素。

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

圖14:粘貼對話框

註意:推薦Photoshop作為圖像創建工具，因為Gif電影齒輪用來創建。ico文件可以直接導入Photoshop文件。Photoshop中“RGB”模式創建的圖像都有alpha通道。如果圖像或層是透明的，圖標使用通道是有意義的。

步驟3:創建24位映像

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

將三種尺寸的圖像粘貼到Photoshop後，請檢查圖像的可讀性和分辨率，尤其是尺寸為16 × 16的圖像。可能需要像素移位。如果16 × 16的圖像無法清晰顯示，那麽這個尺寸的圖像就要用徒手簡化。

要給圖像添加投影，請雙擊圖像的圖層，然後選擇“投影”。然後將角度改為135，距離改為2，大小改為2。此時，投影是75%不透明的黑色。

圖15:設置投影

要將投影與24位圖像合並，請創建壹個新的空層。在“層”菜單中，選擇“合並可見”將三個層合並在壹起。

圖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)。

轉到圖像-& gt；模式->；索引顏色，然後選擇拼合圖層。

在調色板下拉菜單中，選擇自定義。在自定義對話框中，單擊確定。在“索引顏色”對話框中，單擊“確定”。

將文件保存為. psd文件。

用相同的背景色和自定義調色板保存另外兩種大小的文件。

將每個文件保存為. psd文件。

創建壹個4位映像

為了使圖標在較低的顯示環境下顯示效果更好，請使用16顏色的圖標。

將8位圖像的索引顏色更改為Windows 16調色板。

僅使用16調色板中的顏色清潔圖像。

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

在圖像的左邊緣和上邊緣使用深灰色或其他深色。

用相同的背景色保存三個尺寸。確保圖像中沒有使用背景色，因為背景色將被用作透明色。

圖18:4位圖標示例

步驟5:創建壹個。ico文件

壹旦所有的圖像都準備好了，妳就可以把它們編譯成。ico文件。要創建32位圖標，您需要使用Gif電影齒輪(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電影齒輪(GMG)並將每個圖像文件拖入窗口(或使用文件->；插入框架).每個圖像將成為壹幀。

當您將24位圖像(或帶圖層的. psd文件)拖到GMG時，會出現壹個對話框:

圖19:在Gif電影文件中設置24位圖像

請確認設置如下:

圖層是多幀動畫。

未混合:每層壹幀。

保持背景透明

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

現在，總共應該有9幀。圖標要按照顏色分辨率升序排序:前三位是4位(16色)，後三位是8位(256色)，後三位是24位顏色加8位alpha通道(*** 32位)。

圖20:GIF電影齒輪中的幀序列

註意:要檢查圖像的屬性，請將鼠標移動到圖像上。工具提示框將顯示每個圖像的分辨率信息。默認設置包括尺寸、透明度和位數。您可以使用Edit-& gt；首選項-& gt；框架提示添加或刪除顯示的項目。

對於8位和4位圖像，背景應該是透明的。GMG用暗黃綠色表示“透明”的顏色。您可以使用視圖-& gt；“透明為”菜單項設置自己的顏色(或仍使用默認背景色)。所選顏色僅用於查看圖像效果，不會影響圖像本身。

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

選擇壹個框架，然後單擊“拾取透明度顏色”工具欄圖標(吸管)。

圖21:使用透明工具

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

重復所有4位和8位幀。

要保存圖標，請選擇文件-& gt；圖標另存為...。

創建工具欄

Windows工具欄圖標使用與其他圖標相同的樣式，只是它們不使用投影。因為工具欄圖標非常小，所以建議您使用簡單的圖像。如果能通過直觀的方式顯示圖像，清晰地表達圖標的含義，就不需要使用其他復雜的方式。

Windows工具欄顯示兩種圖標尺寸:24 × 24和16 × 16像素。圖標有兩種狀態—默認和活動(鼠標懸停在圖標上)。對於活動狀態，我們需要稍微增加圖像的飽和度。

創建工具欄圖標的過程與創建非工具欄圖標非常相似，只是圖像在。bmp格式-基本上是壹排按順序排列的圖標。

在徒手畫出各種大小的圖標後，請復制粘貼到Photoshop中。把24 × 24的圖像放在壹層，16 × 16的圖像放在另壹層。

在每壹層上，為每個尺寸畫壹排盒子。壹排16 × 16的盒子，壹排24 × 24的盒子。

圖22:工具欄圖標框的例子

將每張圖片按所需順序放入框中。確保圖像之間沒有重疊。

圖23:在工具欄框架中放置圖標

保存Photoshop文件。

接下來，您將在Photoshop中創建壹個活動圖像。

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

對於每個活動版本，選擇圖層並轉到image->；調整-& gt；級別，然後將中間的箭頭移動到0.75。單擊確定。

圖24:改變色階以創建“活動”圖像

創建活動圖像後，每個草圖都應該有壹個層:默認24 × 24，活動24 × 24，默認16 × 16，活動16。

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

壹種方法是使用裁剪工具將文件剪切到適合草圖的大小，然後保存文件。草圖必須從第壹個框的開始測量到最後壹個框的結束。

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

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

如果您想要將草圖存儲為32位圖像，請將它拖到GMG中。刪除所有空白框架。轉到文件-& gt；導出為-& gt；電影膠片.在“膠片導出”對話框中，確認選擇了“BMP/DIB和帶Alpha的24位”。

創造AVI

Microsoft Windows XP使用8位AVI。創建的過程。avi文件與創建圖標是壹樣的——在Photoshop中準備壹個圖像，然後將其拖到GMG中。請按照下面的說明創建壹個8位圖標。

要使用GMG保存AVI，請轉到文件-& gt；導出為-& gt；AVI檔案？。

創建時。avi文件，考慮以下因素:

使用洋紅色(R255 G0 B255)作為背景透明色。

在Photoshop中，重要的是不要有雜散像素。請將填充容量設置為0，並確保未選擇抗鋸齒。

爐頂封閉

上壹篇:FR渲染的金酒杯3DSMAX下壹篇:MAYA瑪雅中下頜的建模方法