天天看點

icon 制作

  圖示有一套标準的大小和屬性格式,且通常是小尺寸的。每個圖示都含有多張相同顯示内容的圖檔,每一張圖檔具有不同的尺寸和發色數。一個圖示就是一套相似的圖檔,每一張圖檔有不同的格式。從這一點上說圖示是三維的。圖示還有另一個特性:它含有透明區域,在透明區域内可以透出圖示下的桌面背景。在結構上圖示其實和麥當勞的巨無霸漢堡差不多。

  一個圖示實際上是多張不同格式的圖檔的集合體,并且還包含了一定的透明區域。因為計算機作業系統和顯示裝置的多樣性,導緻了圖示的大小需要有多種格式。

  作業系統在顯示一個圖示時,會按照一定的标準選擇圖示中最适合目前顯示環境和狀态的圖像。如果你用的是Windows98作業系統,顯示環境是 800x600分辨率,32位色深,你在桌面上看到的每個圖示的圖像格式就是256色32x32象素大小。如果在相同的顯示環境下,Windows XP作業系統中,這些圖示的圖像格式就是:真彩色(32位色深)、32x32象素大小。下面就是Windows各個作業系統中的标準圖示格式:(機關:大小象素—顔色)

  Windows 98 SE/ME/2000

  48 x 48 - 256 32 x 32 - 256 16 x 16 - 256

  48 x 48 - 16 32 x 32 - 16 16 x 16 - 16

  Windows XP

  48 x 48 - 32bit 32 x 32 - 32bit 24 x 24 - 32bit * 16 x 16 - 32bit

  (32位真彩色支援多通道透明。)

  48 x 48 - 256 32 x 32 - 256 24 x 24 - 256 * 16 x 16 - 256

  48 x 48 - 16 32 x 32 - 16 24 x 24 - 16 * 16 x 16 - 16

  * 這種格式在XP圖示中并不是必須的。

  在Vista系統下最大可以支援256 x 256

  同時,非标準的ico格式檔案也支援不規則尺寸的存儲。

方法一

可以線上生成,但是背景不是透明的 http://www.bitbug.net/

方法二

這裡我現在用HyperSnap-DX6來制作

(圖文教程如下:)

icon可以用多個軟體制作,也可以通過一些網站把普通圖檔轉換為.ico檔案,但通常存在的問題是圖檔本該透明的地方經轉換後變為了黑色或者白色,十分影響效果。難道一定要制作正方形的.ico檔案方能掩蓋此缺陷?

首先,我們得下載下傳個HyperSnap,這裡推薦使用的是綠色版本的HyperSnap-DX6, 不用安裝,解壓使用,此軟體的經典用途是用來抓圖,多中抓圖方式十分強大,同時它又具有很多圖檔格式的轉換功能,包括轉換為.ico和.cur(Windows光标檔案,就是滑鼠形狀檔案)。是個十分厲害的家夥!

icon 制作

在軟體中打開圖檔,最好是.png,因為.png檔案該透明的部分是可以做成透明的。其實呢,能顯示透明的圖檔檔案也不外乎是.png或.gif等幾個。這裡以.png檔案為例。

icon 制作

接着就是把圖檔放大到800%,我為什麼選800%呢?因為HyperSnap最多就是放大到800%了。要做成.ico檔案的圖檔要不就是32*32px要不就是16*16px,太大太小都不行,是以進行轉換之間就先把圖檔轉換成如此大小了哦!

icon 制作

放大為800%的圖檔你就能看清楚每個像素了,每個方格就是一個像素,圖3的.png就是32*32px的。

icon 制作

接着我們要設定前景顔色,這裡暫不說為什麼我們得設定前景顔色。

icon 制作

純白色得紅、綠、藍三色都為255,我們把紅、綠、藍設定為3個254是為了那個顔色很接近白色但又不是白色,這可是十分有玄機的哦,不過還是暫時賣個關子。

icon 制作

設定了前景顔色後畫線工具的顔色就是我們剛才設定的3個254了。在這個.png中,魚的眼睛和魚以外的部分是白色的,但經過用畫線工具處理魚眼睛以後,魚眼睛就看上去是白色,但實際上隻是近似白色而已,放大到像素階段尚且很難察覺,更不用說是正常大小了。如此操作,真正是純白色(3個255)的部分就隻剩下魚以外的地方了。而我之前所說的技巧也正是這裡。

icon 制作

第7步是關鍵步驟,第4步到第6步所做得一切工作都是為第7步做準備!!!!廢話少說,看看第8步的效果先!

icon 制作

第7步的處理那些該透明的地方變成了透明了!!!原因是在第7步我們選擇了純白色的區域轉換為透明!我們之前先要把魚眼睛弄成很接近純白色的白色目的就是為了讓它和真正得純白色分開,那麼我們進行第7步處理的時候我們就不會把眼睛也弄成透明了。并不是制作的所有icon都必須要進行如此操作,如果你的icon的核心部分的顔色沒有和透明部分的顔色一樣,那麼就隻需要把透明部分的顔色設定為透明。通常來說,.png檔案在HyperSnap中打開,透明部分的顔色為白色,于是隻要你要處理的圖案中沒有白色,那麼你就可以跳過第4步到第6步,從第3步直接跳到第7步。到達第8步後就算完成了,你可以把它另存為.ico檔案。

icon 制作

儲存為.ico檔案後圖檔會自動變成這個樣子。建議你選擇“撤消”回到上一步,把圖檔也儲存為.gif格式,有另一個玄機的哦!

icon 制作

從Windos對比圖我們可以分明看出,fish1.ico是利用上面的方法做出來的,而fish2.ico隻是直接把.png輸入到HyperSnap然後用.ico輸出,本該透明的地方并不透明。

步驟2) 導入以後,點選上方的“從圖像建立Windows圖示”按鈕,這時會自動彈出一個對話框,生成好幾種圖像格式,我們隻需選擇16X16 -XP,然後點選确定按鈕。

icon 制作
icon 制作

3) 從菜單欄點選另存為,彈出對話框以後儲存類型選擇*.ico格式,檔案名寫favicon,然後點選儲存。

4) 把制作好的favicon.ico圖檔,上傳到網站根目錄。清除浏覽器的緩沖,搞定。

繼續閱讀