第一次寫(xiě)技術(shù)博客，有不盡如人意的位置，還請見(jiàn)諒和指正。
為什么想整理這方面的類(lèi)容，我覺(jué)得就像油畫(huà)家要了解他的顏料和畫(huà)布、雕塑家要了解他的石材一樣，作為網(wǎng)頁(yè)設計師也應該對圖片格式的特性有必定了解，這樣才能更好的表達你的創(chuàng )意和想法。
除此之外，我們在平淡工作中也會(huì )碰到許多與圖片格式相關(guān)的問(wèn)題。比如設計師會(huì )奇怪為什么有些頁(yè)面的產(chǎn)出物總是沒(méi)法到達設計稿那樣的品質(zhì)和效果，什么樣的設計才更適合Web頁(yè)面；頁(yè)面重構師和前端工程師則想知道在切圖的時(shí)候應采用什么圖片格式、如何進(jìn)行參數設置才能到達品質(zhì)和性能的最優(yōu)化。
有時(shí)候我們可能會(huì )因為一張格式不正確的圖片而導致設計品質(zhì)的下降以及頁(yè)面性能的低落。了解圖片格式的特性就是為解答這些狐疑從而讓我們設計的產(chǎn)品更好、更快。
本文主要包括以下幾方面內容： 1、基本概念矢量圖與位圖
有損壓縮與無(wú)損壓縮
2、現實(shí)應用什么時(shí)候應該使用PNG
什么時(shí)候應該使用JPG
總結
3、思考與實(shí)踐什么樣的設計更適合Web頁(yè)面？
我們還可以做些什么？
4、附錄-Photoshop中各種參數的含義及設置技巧要了解圖片格式的特性，對于photoshop自學(xué)教程。首先得從一些基本概念開(kāi)始。這部分外容讀起來(lái)可能會(huì )斗勁單調，但若是你耐著(zhù)性子讀完它，自信會(huì )獲益匪淺。
矢量圖是通過(guò)組成圖形的一些基本元素，如點(diǎn)、線(xiàn)、面，邊框，填充色等信息通過(guò)計算的方式來(lái)顯示圖形的。就好比我們在幾何學(xué)里面描述一個(gè)圓可以通過(guò)它的圓心位置和半徑來(lái)描述，當然還可以通過(guò)邊框的粗細、顏色以及填充的顏色等數據去描述它的形狀。而電腦在顯示的時(shí)候則通過(guò)這些數據去繪制出我們定義的圖像。
矢量圖的優(yōu)點(diǎn)在于文件相對較小，并且縮小縮小不會(huì )失真。紕謬則是這些完美的幾何圖形很難表現自然度高的寫(xiě)實(shí)圖像。
需要夸誕講明的是我們在web頁(yè)面上所使用的圖像都是位圖，即便有些稱(chēng)為矢量圖形（如矢量icon等）也是指通過(guò)矢量工具進(jìn)行繪制然后再轉成位圖格式在web上使用的（區別于像素繪制的圖形）。 位圖又叫像素圖或柵格圖，它是通過(guò)紀錄圖像中每一個(gè)點(diǎn)的顏色、深度、透明度等信息來(lái)存儲和顯示圖像。我不知道圖像文件。一張位圖就好比一幅大的拼圖，只不過(guò)每個(gè)拼塊都是一個(gè)純色的像素點(diǎn)，當我們把這些不同顏色的像素點(diǎn)遵循必定秩序排列在所有的時(shí)候，就變成了我們所看到的圖像。所以當我們縮小一幅像素圖時(shí)，能看到這些拼片一樣的像素點(diǎn)（如下圖）。
位圖的優(yōu)點(diǎn)是利于顯示顏色層次豐富的寫(xiě)實(shí)圖像。紕謬則是文件大小較大，縮小和縮小圖像會(huì )失真。
盡管我們在web頁(yè)面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是通過(guò)紀錄像素點(diǎn)的數據來(lái)保存和顯示圖像，但這些不同格式的圖像在紀錄這些數據時(shí)的方式卻不一樣，這就是涉及到有損壓縮和無(wú)損壓縮的區別。 遵循我的理解有損壓縮就是在存儲圖像的時(shí)候并不完全切實(shí)的紀錄圖像上每個(gè)像素點(diǎn)的數據信息，它會(huì )根據人眼觀(guān)察現實(shí)世界的特性（人眼對光線(xiàn)的遲鈍度比對顏色的遲鈍度要高，生物實(shí)驗證明當顏色缺失時(shí)人腦會(huì )哄騙與附近最接近的顏色來(lái)自動(dòng)填補缺失的顏色）對圖像數據進(jìn)行處理，去掉那些圖像上會(huì )被人眼紕漏的細節，然后使用附近的顏色通過(guò)漸變或其他形式進(jìn)行填充。這樣既能大大低落圖像信息的數據量，又不會(huì )影響圖像的還原效果。
JPG是我們最常見(jiàn)的采用有損壓縮對圖像信息進(jìn)行處理的圖片格式。JPG在存儲圖像時(shí)會(huì )把圖像明白成8*8像素的柵格（如上圖），然后對每個(gè)柵格的數據進(jìn)行壓縮處理，當我們縮小一幅圖像的時(shí)候，就會(huì )發(fā)現這些8*8像素柵格中很多細節信息被去除，圖片處理。而通過(guò)一些特殊算法用附近的顏色進(jìn)行填充（為了讓大家看得更清楚我將圖像的壓縮比率調到很低）。這也是為什么我們用JPG存儲圖像有時(shí)會(huì )產(chǎn)生塊狀模糊的原因。 相對有損壓縮而言無(wú)損壓縮則會(huì )切實(shí)的紀錄圖像上每個(gè)像素點(diǎn)的數據信息，但為了壓縮圖像文件的大小會(huì )采取一些特殊的算法。無(wú)損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不同的，然后把這些相同的數據信息進(jìn)行壓縮紀錄，（例如一片藍色的天際之需要紀錄起點(diǎn)和止境的位置就可以了），保存。而把不同的數據另外保存（例如天際上的白云和漸變等數據）。
PNG是我們最常見(jiàn)的一種采用無(wú)損壓縮的圖片格式。無(wú)損壓縮在存儲圖像前會(huì )先判斷圖像上哪些位置是相同的哪些位置是不同的，為此需要對圖像上所有出現的顏色進(jìn)行索引（如上圖），我們把稱(chēng)這些顏色稱(chēng)為索引色。索引色就好比繪制這幅圖像的“調色版”，PNG在顯示圖像的時(shí)候則會(huì )用“調色版”上的這些顏色去填充相應的位置。 這里大家可能會(huì )疑惑既然PNG采用的是無(wú)損壓縮為什么我們保存的PNG格式圖片還會(huì )有失真呢？這是因為無(wú)損壓縮只是說(shuō)它的壓縮方式會(huì )盡可能切實(shí)的還原圖像，但從它的壓縮原理我們可以知道它是通過(guò)索引圖像上相同區域的顏色進(jìn)行壓縮和還原的，這就意味著(zhù)只有在圖像上出現的顏色數量小于我們可以保存的顏色數量時(shí)，我們才能切實(shí)的紀錄和還原圖像，否則就會(huì )喪失一些圖像信息（PNG8最多只能索引256種顏色，所以對于顏色較多的圖像不能切實(shí)還原；PNG24則可以保存1600多萬(wàn)種顏色，基本能夠切實(shí)還原我們人類(lèi)肉眼所可以分別的所有顏色；PNG格式最多可以保存48位顏色通道）。而對于有損壓縮來(lái)說(shuō)，不管圖像上的顏色多少，都會(huì )損失圖像信息。 關(guān)于JPG和PNG的基本信息先容這里就不贅述了，有興趣完全實(shí)在了解的同學(xué)可以去這里：
什么是JPG、什么是PNG。另外這里我們也不對GIF進(jìn)行討論，是因為PNG就是為取代GIF而生的，而且PNG的壓縮算法也要優(yōu)于GIF，所以只要不是需要動(dòng)畫(huà)效果的位置劇烈倡議都采用PNG格式圖片。聽(tīng)說(shuō)采用。
這里我們不妨把JPG和PNG的一些特性進(jìn)行一個(gè)簡(jiǎn)單對比：
格式 壓縮模式 交織支持 透明支持 動(dòng)畫(huà)支持
JPG 有損壓縮 支持 不支持 不支持
PNG 無(wú)損壓縮 支持 支持 不支持
1、支持攝影圖像或寫(xiě)實(shí)圖像的高級壓縮，并且可哄騙壓縮比例限制圖像文件大小。
2、有損壓縮會(huì )使圖像數據質(zhì)量下降，并且在編輯和重新保存JPG格式圖像時(shí)，這種下降損失會(huì )累積。
3、JPG不適用于所含顏色很少、具有大塊顏色相近的區域或亮度分別十分明顯的較簡(jiǎn)單的圖片。
1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。聽(tīng)說(shuō)圖片處理。
2、PNG用來(lái)存儲灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道數據。png8。
3、對于需要高保真的較復雜的圖像，PNG固然能無(wú)損壓縮，但圖片文件較大，不適合應用在Web頁(yè)面上。
提到PNG格式就不得不提到PNG8和PNG24，這種叫法并非官方定義，不過(guò)由于普遍使用已經(jīng)被大家廣大收受接管了。通過(guò)后面的先容我們知道PNG采用無(wú)損壓縮是通過(guò)索引色去存儲和還原圖像的，PNG8和PNG24反面的數字則是代表這種PNG格式最多可以索引和存儲的顏色值?！?″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬(wàn)色。 不單如此，PNG8還支持1位的布爾透明通道，聽(tīng)聽(tīng)
photoshop自學(xué)教程。圖片處理。所謂布爾透明指的是要么完全透明要么完全不透明。而PNG24則支持8位（256階）的alpha dog通道透明，也就是說(shuō)可以存儲從完全透明到完全不透明一共256個(gè)層級的透明度（即所謂的半透明）。 格式 最高支持顏色通道 索引色編輯支持 透明支持
PNG8 256色 支持 支持布爾透明
PNG24 約1600萬(wàn)色 不支持 支持8位（256階）alpha dog透明
可能通過(guò)以上特性的對比大家還不能很直觀(guān)的理解在現實(shí)應用中畢竟因該選擇什么格式的圖片文件，我們不妨結合上面的基本概念通過(guò)幾個(gè)例子去給大家講明。 下圖是淘寶網(wǎng)最常見(jiàn)的一個(gè)圖片即“立時(shí)采辦”按鈕，這里我嘗試用JPG和PNG8格式分別進(jìn)行保存，可以看到保存的結果有兩個(gè)值得留意的位置： 1、JPG保存的文件大小是PNG保存的文件大小的2倍
2、JPG不單文件更大并且還出現了噪點(diǎn)（如圖中紅色方框標注的）那么是什么原因造成這樣的分別呢？
首先我們可以看出“立時(shí)采辦”這個(gè)按鈕是在photoshop中用矢量工具繪制出來(lái)的，其漸變填充是非常規則的線(xiàn)性漸變，我不知道photoshop自學(xué)教程。文字顏色和描邊等都是采用純色，所以這個(gè)圖像所包含的顏色信息非常有限。根據后面我們先容的無(wú)損壓縮的特性，當用PNG存儲這個(gè)圖像時(shí)，只需要保存很少的顏色信息就可以切實(shí)還原這個(gè)圖像。photoshop圖片處理教程。而對于JPG格式來(lái)說(shuō)大小主要決議確定于圖像的顏色層次，所以在這種顏色較少但對比劇烈的情況下，反而不能很好的壓縮文件大小。
另外根據有損壓縮的壓縮算法JPG會(huì )在圖像中通過(guò)漸變或其他方式填充一些被刪除的數據信息來(lái)對圖像進(jìn)行壓縮，圖中紅色和紅色的位置由于色差較大，JPG在壓縮歷程中就會(huì )填充一些額外雜色進(jìn)去，事實(shí)上而采用PNG8進(jìn)行保存時(shí)圖像文件大小更大。反而影響的圖像的質(zhì)量。這也是為什么JPG晦氣于存儲大塊顏色相近區域以及亮度分別十分明顯的圖像的原因。 我們再來(lái)看另外一個(gè)應用場(chǎng)景，下圖是在淘寶彩票頁(yè)面使用的一個(gè)Banner圖像。同樣用PNG8和JPG進(jìn)行了保存，可以發(fā)現當用PNG8保存時(shí)不單保證了圖像的質(zhì)量且圖像文件的大小僅有8.3K，而當用JPG 100%保存時(shí)文件大小則增加到44.2K，若是不經(jīng)縮小可能還看不出完全實(shí)在的分別，但現實(shí)和后面一樣也會(huì )出現不用要的噪點(diǎn)。若是我們要到達PNG8的壓縮率采用JPG 45%進(jìn)行保存，則圖像會(huì )出現較要緊的失真。
由此我們可以得出結論，齊備以下條件的圖像更適合用PNG8格式進(jìn)行存儲： 1、圖像上顏色較少，并且主要以純色或者平滑的漸變色進(jìn)行填充。
2、齊備較大亮度分別以及劇烈對比的簡(jiǎn)單圖像（如“立刻采辦”按鈕中的背景和文字）。
根據經(jīng)驗齊備上述條件的圖像一般是使用photoshop或其他軟件中的矢量工具進(jìn)行繪制然后再保存成位圖的圖像。 從JPG的特性先容我們知道JPG更適合用來(lái)存儲攝影或寫(xiě)實(shí)圖像，所以我們不妨先拿一張攝影作品做嘗試。 下圖是一副巴士車(chē)的照片，我們嘗試用JPG 60%（左上）、PNG8 256色 無(wú)仿色（右上）、PNG8 256色 擴散仿色（左下）、PNG32（右下）分別進(jìn)行了存儲?？梢钥闯霎斢肑PG存儲圖像時(shí)不單能夠到達最大的壓縮率，photoshop 調色。也能盡量保證原圖的還原效果。而采用PNG8進(jìn)行保存時(shí)圖像文件大小更大，失真也較要緊。只有在PNG24的格式下才能保證品質(zhì)，然而文件大小卻比JPG要大很多。 產(chǎn)生這種結果的原因也與JPG和PNG各自的壓縮算法有關(guān)。
對于攝影或者寫(xiě)實(shí)作品，由于受環(huán)境光線(xiàn)的影響，圖像上的顏色層次十分豐富。比如巴士車(chē)上的紅色區域由于反光、暗影以及透視效果會(huì )變成明暗、深淺各異的區域，若是用PNG去保存，則需要不同明暗度的紅色去存儲這個(gè)區域。對于整張圖片來(lái)說(shuō)，photoshop入門(mén)培訓。PNG8的256色無(wú)法完全索引圖像上出現的所有顏色，于是在存儲時(shí)就會(huì )喪失許多顏色而產(chǎn)生失真。若是要保證圖像的效果，則需要顏色界限更廣的PNG24進(jìn)行存儲，相應的文件大小也會(huì )增加。
而JPG的壓縮算法則更利于對切實(shí)世界中這些復雜的顏色變化進(jìn)行壓縮處理，從而在盡量壓縮文件大小的情況下斗勁好的還原圖像的視覺(jué)效果。
那么是不是只有在存儲照片的時(shí)候才需要用到JPG呢？我們不妨來(lái)看另外一個(gè)例子。更大。 下圖是最近斗勁火爆的某微博頁(yè)面，在這里我們可以選擇不同的品格，每種品格都會(huì )有一個(gè)非常有特色的背景圖片。我們嘗試用不同圖片格式對背景進(jìn)行保存時(shí)可以發(fā)現：當用JPG進(jìn)行保存時(shí)（直接背景另存為）文件大小僅36.3K；而用PNG8 256色無(wú)仿色去保存時(shí)大小增加到57.7K，不單如此由于顏色的缺失在圖像上還出現了一些帶鋸齒的色塊；為了低落這些色塊對圖像質(zhì)量的影響我們對PNG8增加了擴散仿色的效果，此時(shí)文件大小到達了156.3K；而當采用PNG24完全不失真的保存時(shí)文件大小是231.9K。 盡管這幅背景圖也是通過(guò)photoshop制作，但我們可以發(fā)現由于在圖像上采用了很多的切實(shí)素材（比如白云、螞蟻、綠葉等），而這些切實(shí)素材和攝影圖像一樣也會(huì )存在非常豐富的顏色層次，所以也不適合用PNG格式進(jìn)行保存。這個(gè)時(shí)候我們就應該采用JPG格式。
由此我們可以得出結論：對于寫(xiě)實(shí)的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能到達最佳的壓縮效果。
根據經(jīng)驗我們在頁(yè)面中使用的商品圖片、采用人像或者實(shí)物素材制作的廣告Banner等圖像更適合采用JPG的圖片格式保存。 由此可見(jiàn)在存儲圖像時(shí)采用JPG還是PNG主要依據圖像上的顏色層次和顏色數量進(jìn)行選擇。一般層次豐富顏色較多的圖像采用JPG存儲，而顏色簡(jiǎn)單對比劇烈的則需要采用PNG。但也會(huì )有一些特殊情況，學(xué)習而采用PNG8進(jìn)行保存時(shí)圖像文件大小更大。例如有些圖像盡管顏色層次豐富，你看
photoshop圖片處理教程。但由于圖片尺寸較小，上面包含的顏色數量有限時(shí)，也可以嘗試用PNG進(jìn)行存儲。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會(huì )變成豐富的顏色層次，這個(gè)時(shí)候就需要采用JPG進(jìn)行存儲了。
另外還有一個(gè)原則就是用于頁(yè)面構造的基本視覺(jué)元素，
圖片處理 photoshop圖片處理教程_圖片處理
如容器的背景、按鈕、導航的背景等應該盡量用PNG格式進(jìn)行存儲，這樣才能更好的保證設計品質(zhì)。我不知道photoshop圖片處理教程。而其他一些內容元素，如廣告Banner、商品圖片等對質(zhì)量要求不是特別苛刻的，則可以用JPG去進(jìn)行存儲從而低落文件大小。 Web2.0時(shí)期網(wǎng)頁(yè)設計的一大趨勢就是越來(lái)越“輕”。除了對那些高光和圓角效果的審美勞累之外，設計師們也開(kāi)始意識到好的設計應該是內容與形式的完美結合，而非形式的堆砌。所以設計師在應用那些較“重”的視覺(jué)效果時(shí)，必定要想清楚這樣做的目的和意義，以及是否與產(chǎn)品的特性和受眾的氣質(zhì)相相符。
“輕量“設計一個(gè)斗勁典型的例子就是國內某著(zhù)名網(wǎng)站，幾乎沒(méi)有采用任何需要圖片的視覺(jué)元素，而是通過(guò)簡(jiǎn)單的CSS形狀去實(shí)現，這樣不單能夠突出內容，更能提升頁(yè)面的調查速度。所以我十分劇烈的倡議視覺(jué)設計師也掌握必定的html和css知識（尤其是CSS3實(shí)現了很多過(guò)去需要圖片才能實(shí)現的效果，例如圓角和漸變），這樣在做設計的時(shí)候能夠所有的去考慮產(chǎn)品效果。
下面這個(gè)電子商務(wù)網(wǎng)站則采用過(guò)多無(wú)意義的視覺(jué)元素堆砌，不單沒(méi)有實(shí)現很好的設計效果，反而由于需要太多的圖片元素而影響了頁(yè)面的性能。
若是由于產(chǎn)品需要在設計中不得不使用較”重“的視覺(jué)元素，我們也可以根據圖片格式的特性選擇合適的表現形式以到達更好的效果。
例如在下面這個(gè)例子中，第一個(gè)Banner應用了更適合PNG格式的設計品格（較多純色和簡(jiǎn)單漸變的應用）不單能到達熱烈、突出的視覺(jué)效果，在保證圖片質(zhì)量的同時(shí)也更好的壓縮了文件大??；而第二個(gè)Banner由于應用了過(guò)于復雜的漸變色和劇烈對比，并且在局部區域采用太多的高光和暗影效果，導致圖片的顏色層次過(guò)多，不論采用PNG還是JPG格式保存都無(wú)法實(shí)現圖像質(zhì)量和文件大小的最優(yōu)化。
當然舉這個(gè)例子并不是要設計師在做設計的時(shí)候過(guò)分考慮頁(yè)面性能問(wèn)題，photoshop 調色。而是要清楚不同設計形式的效果和實(shí)現成本，在設計歷程中多問(wèn)自己為什么要這樣做？ 對于一些斗勁夸誕視覺(jué)效果的特殊產(chǎn)品，比如活動(dòng)推行頁(yè)面或Mini Site。我們也可以哄騙圖片格式和一些前端知識對設計進(jìn)行優(yōu)化，斗勁常用的一種設計方法就是內容和形式的分離。
如下面一些國外斗勁流行的設計品格，以及后面提到的微博網(wǎng)站，都是通過(guò)大幅的背景圖去進(jìn)行意境的傳達和氛圍的渲染。
充氣娃娃的聲音。這樣做的一個(gè)克己就是能把需要用到圖片的視覺(jué)元素進(jìn)行集中的壓縮優(yōu)化，同時(shí)又不會(huì )由于加載太慢而影響用戶(hù)的調查速度（前端實(shí)現時(shí)一般會(huì )用相近的背景色先進(jìn)行填充，然后在逐步顯示背景圖）。
私人認為好的視覺(jué)設計最重要是意境傳達和氛圍渲染，使用高光、暗影等濾鏡效果的目的也僅僅是為了到達質(zhì)感上的同一從而更好的去傳達意境和渲染氛圍，所以切忌為了質(zhì)感而質(zhì)感。即便是為了體現設計品質(zhì)也不必定非要使用炫麗的濾鏡，相較而言?xún)?yōu)美的布局和靈活的構造才是體現品質(zhì)的關(guān)鍵！ 有時(shí)候為了提升頁(yè)面的加載速度到達更好的用戶(hù)體驗，photoshop 調色。不得不對設計進(jìn)行優(yōu)化。這個(gè)時(shí)候哄騙我們對圖片格式知識掌握就可以更有目的性的去進(jìn)行優(yōu)化。
例如下圖是淘寶“雙十一”大促活動(dòng)的一個(gè)頁(yè)頭設計，由于頁(yè)面調查量非常大并且要使用較多的商品圖片，不得不對頁(yè)頭設計進(jìn)行優(yōu)化以提升性能。這個(gè)時(shí)候我們就可以去掉一些不太重要的高光、漸變和暗影效果，從而大大低落文件大小。
由于目前國內很多互聯(lián)網(wǎng)公司沒(méi)有頁(yè)面重構師這一職位，所以頁(yè)面切圖和靜態(tài)代碼實(shí)現基本都是前端工程師去完成。為進(jìn)步頁(yè)面性能目前普遍采用的實(shí)現方式是將與頁(yè)面構造相關(guān)的需要用到圖片的視覺(jué)元素集中在一個(gè)PNG圖片上，然后通過(guò)CSS形狀將其應用到頁(yè)面中，我們稱(chēng)這個(gè)圖片為Sprite圖片。png。由于這個(gè)圖片上常常要集中較多的視覺(jué)元素，在用PNG格式存儲時(shí)難免會(huì )產(chǎn)生失真而影響圖片質(zhì)量。這個(gè)時(shí)候就需要視覺(jué)設計師扶植前端開(kāi)發(fā)工程師對Sprite圖片進(jìn)行優(yōu)化，這樣做的克己是不單能提升圖片質(zhì)量，還能到達減小文件大小的效果，可謂一舉兩得。
下圖是一個(gè)優(yōu)化前的Sprite圖片，由于視覺(jué)元素過(guò)多PNG8無(wú)法切實(shí)保存所有的顏色信息，于是便會(huì )產(chǎn)生顏色的缺失和雜色的產(chǎn)生（如局部縮小圖所示）。
在前端工程師完成頁(yè)面的靜態(tài)代碼之后，視覺(jué)設計師可以將定位好的Sprite圖片進(jìn)行像素級的優(yōu)化，你看
然后合并兩個(gè)動(dòng)感模糊層(CTRL+E)去掉不用要的雜色，并且用已存在的索引色對缺失的位置進(jìn)行補充，這樣不單能壓縮文件大小，還能提升設計品質(zhì)。
Sprite圖片的優(yōu)化方式有很多種，比如通過(guò)索引色排序進(jìn)行顏色的刪減和調換，或是直接通過(guò)像素描寫(xiě)進(jìn)行優(yōu)化。設計師可以根據完全實(shí)在的場(chǎng)景進(jìn)行選擇和處理。
以上設計和優(yōu)化的方法只是我在工作中一些經(jīng)驗的堆集和總結，私人感覺(jué)每一個(gè)點(diǎn)展開(kāi)來(lái)都有很多值得研究和討論的位置，限于篇幅有限不能繼續長(cháng)遠。關(guān)于圖片優(yōu)化的高級技巧有兩篇斗勁典范的文章推薦給大家：Clever PNG Optimizfromion Techniques、Clever JPEG Optimizfromion Techniques。你知道photoshop 調色。
指定用于生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數量?？梢赃x擇以下減低顏色深度算法之一：看看
在線(xiàn)ps。 1、可感知：通過(guò)為人眼斗勁靈敏的顏色賦以?xún)?yōu)先權來(lái)制造自定顏色表。
2、可選擇：制造一個(gè)顏色表，此表與”可感知”顏色表類(lèi)似，但對大界限的顏色區域和保存 Web 顏色有利。此顏色表通常會(huì )生成具有最大顏色完整性的圖像?！翱蛇x擇”是默認選項。聽(tīng)聽(tīng)平面設計教程。
3、隨樣性：通過(guò)從圖像的主要色譜中提取色樣來(lái)制造自定顏色表。例如，只包含綠色和藍色的圖像產(chǎn)生主要由綠色和藍色組成的顏色表。大多數圖像的顏色集中在色譜的特定區域。
4、受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）調板通用的程序 216 色顏色表。該選項確保當使用 8 位顏色顯示圖像時(shí)，不會(huì )對顏色應用閱讀器仿色。（該調板也稱(chēng)為 Web 安全調板。photoshop 調色。） 使用 Web 調板可能會(huì )制造較大的文件，以是，只有當避免閱讀器仿色是優(yōu)先考慮的因素時(shí)，才倡議使用該選項。
5、自定：使用用戶(hù)制造或改正的調色板。如果打開(kāi)現有的 GIF 或 PNG-8 文件，它將具有自定調色板。使用”存儲為 Web 和設備所用格式”對話(huà)框中的”顏色表”調板可自定顏色查找表。
6、黑白、灰度、Mac OS、Windows使用一組調色板。
倡議：一般情況下默認選擇“可選擇”項即可。
確定應用程序仿色的方法和數量?！狈律笔侵改７掠嬎銠C的顏色顯示體例中未提供的顏色的方法。
較高的仿色百分比使圖像中出現更多的顏色和更多的細節，photoshop 調色。但同時(shí)也會(huì )增大文件大小。為了得到最佳壓縮比，請使用可提供所需顏色細節的最低百分比的仿色。
若圖像所包含的顏色主要是純色，則在不應用仿色時(shí)通常也能一般顯示。包含連續色調（尤其是顏色漸變）的圖像，可能需要仿色以防止出現顏色條帶現象。
可以選擇以下幾種仿色方法之一： 1、擴散：應用與”圖案”仿色相比通常不太明顯的隨機圖案。仿色效果在相鄰像素間擴散。
2、圖案：使用類(lèi)似半調的方形圖案模仿顏色表中沒(méi)有的任何顏色。
3、雜色：應用與”擴散”仿色方法相似的隨機圖案，但不在相鄰像素間擴散圖案。使用”雜色”仿色方法時(shí)不會(huì )出現接縫。
倡議：一般只在圖片顏色過(guò)多產(chǎn)生失真的情況下才需要選擇仿色。倡議選擇擴散仿色，可以合適調動(dòng)仿色的百分比以到達最佳的效果。仿色度越高文件大小也越大。
確定如何優(yōu)化圖像中的透明像素。聽(tīng)說(shuō)文件大小。 1、要使完全透明的像素透明并將部分透明的像素與一種顏色相混合，請選擇”透明度”，然后選擇一種雜邊顏色。
2、要使用一種顏色填充完全透明的像素并將部分透明的像素與同一種顏色相混合，請選擇一種雜邊顏色，然后撤廢選擇”透明度”。
3、要選擇雜邊顏色，請單擊”雜邊”色板，然后在拾色器中選擇一種顏色?；蛘?，也可以從”雜邊”菜單中選擇一個(gè)選項：”吸管”（使用吸管樣本框中的顏色）、”前景色”、”背景色”、”紅色”、”黑色”或”其它”（使用拾色器）。
倡議：劇烈倡議由視覺(jué)設計師根據現實(shí)應用場(chǎng)景在保存之前就處理好透明圖像的背景。
PNG、GIF這兩種圖像格式都提供了一種功能，讓圖像能夠更快地顯示。圖像可以以一種特殊方式存儲，顯示時(shí)先大概顯示圖像的草圖，當文件全部下載后再填充細節。這起到一種很存心義的心理效果，因為這樣使人們有東西可看，聽(tīng)聽(tīng)photoshop自學(xué)教程。而不用坐著(zhù)干等大型圖像緩慢顯示在屏幕上。
倡議：對于尺寸和文件大小相對較大的圖片倡議勾選此項。
從”品質(zhì)級別”菜單中選取一個(gè)選項，或者在”品質(zhì)”文本框中指定一個(gè)值?！逼焚|(zhì)”設置越高，壓縮算法保存的細節越多。但是，使用高”品質(zhì)”設置比使用低”品質(zhì)”設置生成的文件大。查看幾種品質(zhì)設置下的優(yōu)化圖像，我不知道進(jìn)行。確定品質(zhì)和文件大小之間的最佳平衡點(diǎn)。 1、不要存100%品質(zhì)的JPG格式圖片。因為100%并不必定是最高的品質(zhì)，而是一個(gè)優(yōu)化算法的極限值，所以會(huì )增加不用要的文件大小。倡議存儲95%品質(zhì)的圖片就可以最大限度的低落失真。
2、謹慎使用50%品質(zhì)以下的壓縮率。使用50%以下品質(zhì)存儲時(shí)會(huì )采用額外的壓縮算法而導致圖片失真更要緊，尤其是對于有高對比度的圖片。
選擇”優(yōu)化”制造文件大小稍小的增強型 JPEG。倡議使用”優(yōu)化 JPEG”格式以得到最大文件壓縮量；但是，一些較舊的閱讀器不支持此特性。
倡議：倡議勾選此項，目前基本已經(jīng)不存在不支持改功能的閱讀器。 選擇”連續”制造在 Web 閱讀器中連續顯示的圖像。圖像將顯示為一系列的疊加，使查看者在整個(gè)圖像下載完畢之前，能夠看到圖像的低辨別率版本。連續 JPEG 需要更多的內存用于查看，一些閱讀器不支持該選項。
倡議：勾選此項在某些情況下可壓縮文件大?。▓D片大小大于10k時(shí)），某些情況下會(huì )增大文件大小，倡議在保存是根據現實(shí)情況決議確定。不過(guò)IE6及更早版本的IE閱讀器不支持JPG連續顯示，而是在圖片完全加載后一次成像，用戶(hù)體驗上可能還不如不使用連續的逐步成像要好，所以倡議慎選此項。 指定應用于圖像的模糊量?！蹦：边x項應用與”高斯模糊”濾鏡相同的效果，并允許進(jìn)一步壓縮文件以得到更小的文件大小。倡議使用 0.1 到 0.5 之間的設置。 選擇”ICC 配置文件”將圖片的 ICC 配置文件與文件保留在所有。ICC 配置文件由某些閱讀器用于顏色校正。（請參閱Photoshop中設置顏色管理。） 指定原稿圖像中透明像素的填充色：點(diǎn)按”雜邊”色板，然后在拾色器中選擇一種顏色。從”雜邊”菜單中選取選項。原稿圖像中完全透明的像素由選中的顏色填充，原稿圖像中部分透明的像素與選中的顏色相混合。
Photoshop教程:繪制非常性子油畫(huà)效果照片_Photoshop教程
Photoshop鼠繪教程:時(shí)裝美女頭像_Photoshop教程
Photoshop實(shí)例教程:入時(shí)的淡藍色圖片_Photoshop教程
Photoshop魔術(shù)棒和急迅蒙版芭蕾女孩摳圖_Photoshop教程
Photoshop教程:夢(mèng)幻的水晶文字殊效_Photoshop教程
