如何讓程序適配不一樣尺寸的ico圖標

因爲參與桌面端開發的項目極少,大多數可愛的攻城獅們又都會選擇自帶的組件和圖標,因此歷來沒有深刻研究過ico格式的圖片有什麼特色。但此次,遇到一個項目須要使用自定義的ico圖標,由於之前使用這種格式的場景不多,因此就天真的覺得相一樣式但不一樣尺寸的ico是由對應尺寸的png(或其餘格式)直接轉換生成。
爲了在不一樣的場景下都能有好的視覺效果,我按照以往iOS和Android開發的思路,分別作了256*256,128*128,96*96,64*64,32*32,16*16這些尺寸,而後一古腦兒的塞給了開發人員。開發人員卻告知只能選擇一個尺寸,而雖然選了最大的256*256尺寸的,但反饋的編譯後的結果卻不怎麼美好。上圖說明。 windows

這是個人一些安裝程序,當windows系統的圖標爲 選擇超大圖標 後的縮略圖預覽效果。一眼就能夠看出問題出在哪裏,有些圖標很大很清晰,好比Axure,好比typora,好比notepad++,但也有些圖標的尺寸並不能放大。好比用紅線框出的iSparta,好比Everything。並且系統還會給加上醜出天際的灰色的邊框。各位看官能夠用本身機器上的程序安裝包測試一下,應該都會出現這種狀況。這說明一個問題,就是這些不能提供大圖標預覽效果的程序,ico都是缺失的,就是最大支持到48*48。

一個=N個的ico格式

來吧,就不怕出現問題,每一個遇到的坑都是進階的路 ,查了資料,試驗了一下,最終仍是解決了 讓程序適配不一樣尺寸的ico 的問題,在此分享,有須要作桌面端項目(windows也好 OS也好)的小夥伴有須要儘管拿去。工具

先看一下維基百科對ico格式的解釋:學習

一個圖標文件能夠同包含多個格式,所以在不一樣的文件視圖下可能顯示徹底不一樣的圖案。這些格式能夠被壓縮以節約儲存空間。圖標被顯示時,系統會自動根據要顯示的大小和當前系統的顏色深度從最接近的格式中選擇一個顯示。測試

好了,從中,咱們明確獲得一個最基本的概念以下:操作系統

一個ico圖標文件能夠包含不少組圖標,能夠是一個集合,而不是一個單一尺寸的圖標。設計

這就和咱們平時最多見的位圖有很大的區別了,衆所周知,位圖的尺寸是惟一的,而神奇的ico告訴咱們, 它不是一我的在戰鬥! 它是一衆小夥伴們的集合體。
專業的圖片天然要交給專業的工具來完成,這裏推薦一個 icofx 。和它齊名的還有另一個軟件 greenfish icon editor ,都算是免費的吧(前者有30天試用期,但網上有破解版)。由於這裏並非作軟件評測對比,因此我只說本身用的icofx就好。
首先,做爲一款專業的圖標設計軟件,除了能夠作windows圖標,亦可作Mac圖標,亦可作鼠標的指針Cursor(包括動效),icofx也提供了很強大的設計功能,能夠直接在畫布上進行設計,包括圖形的建立和各類圖層效果。但對於廣大的非專職圖標設計師小夥伴而言,不須要耗費過多的精力去學習一款新軟件,那這裏就只說用到的功能。指針

從現有的圖片建立一個ico圖片集合

在這個案例中,咱們僅須要的功能只有一個,極其簡單, 「Windows Icon from Image」 ,從圖片建立windows圖標。如今,能夠導入咱們用任意其餘做圖工具製做的圖標了。cdn

軟件會自動幫咱們生成一些其餘尺寸與色深的圖片。其中,32位色深是對透明度支持最好的,而Windows XP僅支持24位色深,這裏由於僅僅須要的是程序圖標,先和開發人員確認一下軟件的運行環境,由於畢竟涵蓋的格式越多,圖片越大,打包進去的程序體積也會所以變大。確認後能夠刪除其餘不須要的格式。除了格式,若是尺寸問題也須要和開發人員確認一下,或者,從256×256-16×16直接補全。較舊的操做系統不支持超過128×128的圖標,因此向舊的操做系統的圖標文件中添加大圖標沒有意義。 而後,保存成*.ico格式。好了,能夠把圖標丟過去了。

????完了????
對,你須要的僅僅是瞭解icon的特殊性及一款專業軟件,僅此而已。其實大多數狀況下,桌面端的開發人員會了解相關知識,圖片交付後,能自行處理,但偶爾,我是說偶爾,做爲設計師,也要具有豐富的專業擴展從而從容應對這樣的問題。交互設計也好,UI設計也好,或許最重要的不只是技術,更是解決問題的能力,就醬,共勉之。blog

相關文章
相關標籤/搜索