上一篇文章為:→1.3.0PhotoShop課程介
常用圖片格式
圖片是網(wǎng)頁(yè)制作中很重要的素材，圖片有不同的格式，每種格式都有自己的特性，了解這些特效，可以方便我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)選取適合的圖片格式，圖片格式及特性如下：
1、psd
psd是photoshop的專用格式，UI設(shè)計(jì)師使用photoshop設(shè)計(jì)效果圖，最后會(huì)將psd格式的效果圖交付給前端工程師，這種格式是不壓縮的，而且保留了圖層、透明和半透明等圖片信息，所以這種圖片格式的容量相對(duì)來(lái)說(shuō)是很大的，前端工程師使用這種格式的效果圖來(lái)切圖制作網(wǎng)頁(yè)，但是網(wǎng)頁(yè)中不會(huì)使用這個(gè)格式的圖片，它的作用一是保存圖片的原始數(shù)據(jù)，二是方便圖片的修改。
2、jpg
jpg是一種有損壓縮格式，壓縮效率高，容量相對(duì)來(lái)說(shuō)最小，網(wǎng)絡(luò)傳輸速度快，它不能存為透明背景，在網(wǎng)頁(yè)中應(yīng)用最廣，一般在不需要透明背景的時(shí)候就使用這種圖片。
3、gif
gif是一種無(wú)損壓縮格式的圖片，最多只有256種顏色，顏色豐富的圖片轉(zhuǎn)化為這種格式會(huì)顏色失真。它的背景可以是透明的，但不能是半透明的，透明背景中的圖像，如果邊緣輪廓是曲線的，會(huì)產(chǎn)生鋸齒，它還可以保存為動(dòng)畫(huà)格式。
4、png
png的目的是為了代替gif圖片，無(wú)損壓縮，背景可以是透明或者半透明的，透明圖像邊緣光滑，沒(méi)有鋸齒，網(wǎng)頁(yè)中需要透明或者半透明背景的圖片，首選是png圖片。png也是firework的專用格式，也可以包含圖層信息。firework是另外一款可以和photoshop相比的圖像處理軟件。也有少量的UI設(shè)計(jì)師使用這種軟件來(lái)設(shè)計(jì)網(wǎng)頁(yè)效果圖，他們?cè)O(shè)計(jì)的效果圖就是帶圖層的png格式的，碰到這種設(shè)計(jì)師，如果我們習(xí)慣了photoshop切圖，可以將帶圖層的png效果圖轉(zhuǎn)化成psd圖片再處理。
5、webp
它是由谷歌于2010年推出的新一代圖片格式，在壓縮方面比當(dāng)前jpg格式更優(yōu)越，在質(zhì)量相同的情況下，WebP格式圖像的體積要比jpg格式圖像小40%，不過(guò)這種圖片還沒(méi)有得到廣泛的瀏覽器支持，僅在Chrome和Opera上支持，在其他瀏覽器上需要安裝插件才可以顯示，目前還沒(méi)有大規(guī)模使用。
位圖和矢量圖
位圖也叫點(diǎn)陣圖，是由一個(gè)個(gè)的方形的像素點(diǎn)排列在一起拼接而成的，位圖在放大時(shí)，圖像會(huì)失真。上面講的5種圖像都屬于位圖。
矢量圖和位圖組成圖像的原理不同，它的圖像輪廓是由函數(shù)曲線生成的，當(dāng)放大圖像時(shí)，實(shí)際的原理就是將曲線乘以一個(gè)倍數(shù)，圖像可以輕易地放大，而且不會(huì)出現(xiàn)像素塊，圖像邊緣也不會(huì)出現(xiàn)鋸齒。
svg
svg是一種矢量二維圖形格式，它是基于xml標(biāo)記語(yǔ)言描述的，可以通過(guò)任何文本編輯器創(chuàng)建。它的優(yōu)點(diǎn)是文件容量小，放大不失真，而且背景也可以是透明的。目前大量使用這種格式來(lái)制作網(wǎng)頁(yè)圖標(biāo)或者網(wǎng)頁(yè)地圖，由于它是矢量的，所以在不同終端屏幕上(pc、手機(jī))都有很好的顯示效果。
flash
flash是一種矢量動(dòng)畫(huà)文件格式，曾經(jīng)在網(wǎng)絡(luò)上風(fēng)靡一時(shí)，如今已逐漸退出歷史舞臺(tái)，原因是它的技術(shù)更新跟不上發(fā)展，這種格式既可以是靜態(tài)的圖形，還可以是多媒體動(dòng)畫(huà)，還可以加入用戶交互和數(shù)據(jù)，這是它曾經(jīng)很流行的原因，這種格式名為swf，flash是對(duì)它的統(tǒng)稱。這種格式在網(wǎng)頁(yè)中已經(jīng)很少使用了，它的很多優(yōu)秀特性，可以用HTML5取代。swf文件中衍生出一種視頻格式flv，它是一種流媒體視頻格式，由于它有文件容量小，可以邊下載，邊觀看等優(yōu)點(diǎn)，目前廣泛應(yīng)用在視頻網(wǎng)站中。
總結(jié)
在網(wǎng)頁(yè)制作中，如何選擇合適的圖片格式呢？
1、網(wǎng)頁(yè)制作中，如果要使用不透明背景的圖片，就使用jpg圖片；如果要使用透明或者半透明背景的圖片，就使用png圖片；
2、制作網(wǎng)頁(yè)圖標(biāo)時(shí)候，如果圖標(biāo)含多種顏色，可以使用gif或png圖片；如果圖標(biāo)是單色，而且要求有很好的顯示效果，可以使用svg；如果是動(dòng)畫(huà)圖標(biāo)，可以使用gif。
