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