網(wǎng)頁(yè)設計中圖片格式的選擇技巧
網(wǎng)頁(yè)設計中,切圖輸出是指設計師將手邊繪制完成的原始圖稿轉換成網(wǎng)頁(yè)用的圖片格式、并交由下一位人員網(wǎng)頁(yè)排版的重要步驟。選擇適合的圖片格式不但可以將讓設計得到合理的顯示效果、甚至還可以有效的控制圖檔的檔案大小,節省下載時(shí)間、有效的減少服務(wù)器的負擔。
以設計師最常用的Photoshop以及Illustrator為例,都提供了「儲存為網(wǎng)頁(yè)用…」的功能。與默認的存盤(pán)模式不同,在這個(gè)模式中,軟件提供了仿真圖文件輸出的質(zhì)量調整、檔案大小控制等針對網(wǎng)頁(yè)圖文件需求的選項:
相信許多人都知道網(wǎng)頁(yè)設計中最常用的格式不外乎JPG、GIF、PNG等格式,但并非所有的人都知道他們之前的實(shí)際差別跟到底何時(shí)該選擇何種格式。經(jīng)常發(fā)生的情況是,選擇GIF后的輸出結果看起來(lái)變得很糟,于是PNG(24)似乎突然間風(fēng)行了起來(lái),不論圖檔尺寸是不是因此多了好幾倍。
JPEG
由于舊型計算機系統以及文件系統的限制,計算機檔案文件名與擴展名被規定為8.3的格式,因此JPEG的附檔名被縮寫(xiě)為.JPG。JPEG可以說(shuō)是人們最熟悉的圖檔格式了,相信在數字相機普及的現在,幾乎每臺數字相機、照相手機都可以(甚至只能)輸出JPEG格式的圖檔。JPEG是一種很典型的使用破壞性壓縮(lossycompression)的圖檔格式,也就是說(shuō)使用者每次進(jìn)行JPEG的存檔動(dòng)作后,圖檔的內容都會(huì )遭到破壞,這個(gè)特性在肉眼辨識下并不明顯,但卻可以有效的降低圖檔的檔案大小。
就如這些使用JPEG的設備一樣,JPEG非常適合作為儲存像素色彩豐富的圖片、例如照片等等,這些圖片即使有些微的失真也不容易輕易的察覺(jué):而反過(guò)來(lái)說(shuō)JPEG并不適合用來(lái)儲存線(xiàn)條圖、圖標或文字等等有清晰邊緣的圖片
多次重復進(jìn)行JPEG的圖檔的儲存將會(huì )永久性地破壞圖片中的細節。
GIF
Gif在許多特性與表現上都與JPEG有著(zhù)相對的特性。GIF使用無(wú)損壓縮格式(LosslessCompression),但卻限制了色彩表現能力、能夠有效地節省檔案尺寸。GIF只擁有8位的顏色深度信息,所謂的8位是指2的8次方也就是256色,當你的圖片中出現的色彩在256色以?xún)葧r(shí),使用GIF可以得到相當好的輸出質(zhì)量、同時(shí)兼顧了檔案大小。因此GIF非常適合用來(lái)表現圖標、UI接口、線(xiàn)條插畫(huà)、文字等部分的輸出。
另外GIF同時(shí)還支持透明背景、以及動(dòng)畫(huà)圖檔格式,并且幾乎不用擔心支持性的問(wèn)題:幾乎100%的瀏覽器都支持它。
由于JPEG與GIF有著(zhù)如此不同的特性,因此我們可以很輕易的選擇何時(shí)該用哪一種格式來(lái)輸出我們需要的圖檔。
當圖片是擁有明確邊緣的線(xiàn)條圖、沒(méi)有使用太多色彩、甚至可能需要透明背景時(shí),GIF是很完美的選擇,檔案小、畫(huà)質(zhì)又精美。
PNG
PNG最初的開(kāi)發(fā)目的是為了作為GIF的替代方案的,作為做新開(kāi)發(fā)的影像傳輸文件格式,PNG同樣使用了無(wú)損壓縮格式,事實(shí)上PNG的開(kāi)發(fā)就是因為GIF所使用的無(wú)損壓縮格式專(zhuān)利問(wèn)題而誕生的。
PNG分為PNG-8以及PNG-24兩種格式,PNG-8的特性很接近GIF,支持256色以及透明背景的特性。而PNG-24則支持了多達160萬(wàn)個(gè)色彩。
雖然PNG不支持動(dòng)畫(huà),但是PNG-24支持了Alpha透明效果,這可以說(shuō)是PNG-24最令人眼睛一亮的地方了。也就是說(shuō)使用PNG輸出圖檔時(shí),可以有效的支持不同的透明度效果了。這對網(wǎng)頁(yè)設計師來(lái)說(shuō)無(wú)疑是一個(gè)好消息,像這張圖片其實(shí)是使用了三張PNG-24的圖片在網(wǎng)頁(yè)中排版出來(lái)的效果:
在大部分的情況下,設計師必須根據圖片需求來(lái)選擇不同的圖檔格式,并且對其做適當的調整。雖然PNG-24看起來(lái)很完美,但是相應的當然就是檔案大小的增加。另外還有就是瀏覽器支持度的問(wèn)題,雖然現在幾乎大部分的瀏覽器都支持了PNG-24格式,但不幸的是IE6是不支持透明PNG圖檔的,現在依然有相當的使用者在使用IE6或更早的版本,雖然比例會(huì )越來(lái)越少,但是設計師多少必須將其考慮其內,是否考慮使用GIF替代,或是在程序端透過(guò)script的方式來(lái)支持透明PNG格式。
<< 上一篇:如何制作網(wǎng)頁(yè)設計中的滾動(dòng)字條? | >> 下一篇:網(wǎng)頁(yè)設計中的人文情懷有哪些? |
- 2015-09-01如何制作網(wǎng)頁(yè)設計中的滾動(dòng)字條?
- 2015-08-31室內設計室內裝修方式選擇
- 2015-08-26平面設計中字體選擇的15個(gè)技巧
- 2015-08-25室內設計師實(shí)戰談單技巧
- 2015-08-24室內設計師必備的談單報價(jià)技巧
- 2015-08-24平面設計師面試中自我介紹的技巧和攻略
- 2015-08-22一個(gè)合格的網(wǎng)頁(yè)設計師的標準
- 2015-08-22怎么才算達到一個(gè)網(wǎng)頁(yè)設計師的標準
- 2015-08-20Banner廣告設計的技巧
- 2015-08-209個(gè)海報設計的技巧
- 2015-08-17Photoshop使用必須知道的十個(gè)技巧
- 2015-08-17平面設計提升視覺(jué)沖擊力的八個(gè)技巧
- 2015-08-14選擇清新教育,從零開(kāi)始學(xué)習平面廣告設計課程
- 2015-08-12AI軟件的學(xué)習入門(mén)技巧有哪些
- 2015-08-10鄭州學(xué)習網(wǎng)頁(yè)設計去哪里好
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16