 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈鮮花： 182 |
|
 |
|
|
發(fā)表時間：2015/1/24 10:07:00 |
樓 主 |
|
 |
|
 |
|
網(wǎng)頁設計中圖片格式的選擇技巧
網(wǎng)頁設計中，切圖輸出是指UI設計師將手邊繪制完成的原始圖稿轉(zhuǎn)換成網(wǎng)頁界面設計用的圖片格式、并交由下一位人員網(wǎng)頁排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小，節(jié)省下載時間、有效的減少服務器的負擔。今天藍藍設計就和朋友們分享一下網(wǎng)頁設計中圖片格式的選擇技巧以UI設計師最常用的Photoshop以及Illustrator為例，都提供了「儲存為網(wǎng)頁用…」的功能。與默認的存盤模式不同，在這個模式中，軟件提供了仿真圖文件輸出的質(zhì)量調(diào)整、檔案大小控制等針對網(wǎng)頁圖文件需求的選項：
相信許多人都知道網(wǎng)頁設計中最常用的格式不外乎JPG、GIF、PNG等格式，但并非所有的人都知道他們之前的實際差別跟到底何時該選擇何種格式。經(jīng)常發(fā)生的情況是，選擇GIF后的輸出結(jié)果看起來變得很糟，于是PNG（24）似乎突然間風行了起來，不論圖檔尺寸是不是因此多了好幾倍。
JPEG由于舊型計算機系統(tǒng)以及文件系統(tǒng)的限制，計算機檔案文件名與擴展名被規(guī)定為8.yuhou.JPG。JPEG可以說是人們最熟悉的圖檔格式了，相信在數(shù)字相機普及的現(xiàn)在，幾乎每臺數(shù)字相機、照相手機都可以（甚至只能）輸出JPEG格式的圖檔。JPEG是一種很典型的使用破壞性壓縮（lossycompression）的圖檔格式，也就是說使用者每次進行JPEG的存檔動作后，圖檔的內(nèi)容都會遭到破壞，這個特性在肉眼辨識下并不明顯，但卻可以有效的降低圖檔的檔案大小。就如這些使用JPEG的設備一樣，JPEG非常適合作為儲存像素色彩豐富的圖片、例如照片等等，這些圖片即使有些微的失真也不容易輕易的察覺：而反過來說JPEG并不適合用來儲存線條圖、圖標或文字等等有清晰邊緣的圖片多次重復進行JPEG的圖檔的儲存將會永久性地破壞圖片中的細節(jié)。
GIFGif在許多特性與表現(xiàn)上都與JPEG有著相對的特性。GIF使用無損壓縮格式（LosslessCompression），但卻限制了色彩表現(xiàn)能力、能夠有效地節(jié)省檔案尺寸。GIF只擁有8位的顏色深度信息，所謂的8位是指2的8次方也就是256色，當你的圖片中出現(xiàn)的色彩在256色以內(nèi)時，使用GIF可以得到相當好的輸出質(zhì)量、同時兼顧了檔案大小。因此GIF非常適合用來表現(xiàn)圖標、UI接口、線條插畫、文字等部分的輸出。另外GIF同時還支持透明背景、以及動畫圖檔格式，并且?guī)缀醪挥脫闹С中缘膯栴}：幾乎100％的瀏覽器都支持它。
由于JPEG與GIF有著如此不同的特性，因此我們可以很輕易的選擇何時該用哪一種格式來輸出我們需要的圖檔。當圖片擁有豐富的色彩時，并且沒有明顯銳利反差的邊緣線條時，選擇JPEG可以得到最好的輸出結(jié)果，像是照片就是最好的例子：
?。ㄗ髨D：Photoshop輸出JPEG默認值：品質(zhì)：高，壓縮質(zhì)量60％、優(yōu)化輸出。右圖：Photoshop輸出GIF默認值：256色、擴散性混色）
當圖片是擁有明確邊緣的線條圖、沒有使用太多色彩、甚至可能需要透明背景時，GIF是很完美的選擇，檔案小、畫質(zhì)又精美。
?。ㄉ蠄D：Photoshop輸出GIF：64色、擴散性混色。下圖：Photoshop輸出JPEG默認值：品質(zhì)：高，壓縮質(zhì)量60％、優(yōu)化輸出）
PNGPNG最初的開發(fā)目的是為了作為GIF的替代方案的，作為做新開發(fā)的影像傳輸文件格式，PNG同樣使用了無損壓縮格式，事實上PNG的開發(fā)就是因為GIF所使用的無損壓縮格式專利問題而誕生的。PNG分為PNG-8以及PNG-24兩種格式，PNG-8的特性很接近GIF，支持256色以及透明背景的特性。而PNG-24則支持了多達160萬個色彩。
雖然PNG不支持動畫，但是PNG-24支持了Alpha透明效果，這可以說是PNG-24最令人眼睛一亮的地方了。也就是說使用PNG輸出圖檔時，可以有效的支持不同的透明度效果了。這對網(wǎng)頁設計師來說無疑是一個好消息，像這張圖片其實是使用了三張PNG-24的圖片在網(wǎng)頁中排版出來的效果：
在大部分的情況下，UI設計師必須根據(jù)圖片需求來選擇不同的圖檔格式，并且對其做適當?shù)恼{(diào)整。雖然PNG-24看起來很完美，但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問題，雖然現(xiàn)在幾乎大部分的瀏覽器都支持了PNG-24格式，但不幸的是IE6是不支持透明PNG圖檔的，現(xiàn)在依然有相當?shù)氖褂谜咴谑褂肐E6或更早的版本，雖然比例會越來越少，但是設計師多少必須將其考慮其內(nèi)，是否考慮使用GIF替代，或是在程序端透過script的方式來支持透明PNG格式。 |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|