HTML+CSS+PS
開始之前……
這篇文章并不是教你如何美化圖片的，它針對前端開發的圖片操作。這篇文章注重細節，像是工具類文章。所以需要耐心讀下去，耐心練習。這算是一篇課程筆記前端切圖是什么意思，來自網易前端開發微專業，所以難免遇到一些細節問題。這篇文章特點是涉及多個概念，比如單獨圖層，說這個的目的是我在文中并沒有解釋，需要自己查閱學習。
一般在互聯網公司里面，都會有專業的設計師產出設計稿，交給前端開發工程師，那么，前端工程師拿到設計稿之后，會對這個設計稿進行切圖工作，之后才開始進行下一步的編碼。下面就是我們要進行的切圖學習……
文章目錄
什么是切圖？（What?）
切圖是指將設計稿切成便于制作成頁面的圖片，并完成HTML+CSS布局的靜態頁面。通俗來講，就是把一張設計圖利用切片工具，把自己所需要的效果切成一張張小圖，然后用DIV+CSS完成靜態頁面書寫，完成CSS布局。
為什么需要切圖？（Why?）
給網頁提供圖片素材。有時候要實現網頁上的特殊效果，但是依靠HTML+CSS很難實現那種效果，就算實現也很難做到兼容。所以這個時候可以引用圖片資源的方式來實現這些效果。接下來，我們就開始進行學習吧……
使用PS工具測量 、取色
打開設計稿，獲取信息,這些信息都能對應到CSS 。
哪些要測量？
標簽的寬度、高度、內邊距、邊框、定位、文字大小、行高、背景圖位置等等，凡是需要數值型，都要進行測量。
測量需要用到？
矩形選框工具&信息面板。需要注意的是要把畫布盡量放大，來減少我們測量的誤差。
操作演示
下面我們專門講講如何測量文字大小，有兩種情況：
1：第一種是單獨圖層，我們直接用文字工具
操作演示
2：第二種情況是，你的文字被合并在背景圖中。
這里我們還要用到的是矩形選框工具，進行測量。首先用矩形選框工具把要測量的字進行框住，然后在信息面板上，我們就會看到“H”高度后邊的數字，那就是字體大小了。
操作演示
其它操作也是要用到矩形選框工具……
取色
哪些要取色？凡是顏色都要取色。具體有邊框色、背景色、文字色。
工具：拾色器&吸管工具。
工具演示
如果我們想知道文字的顏色，和上面的測量文字一樣，如果是獨立圖層，我們直接在選區上，就能看到文字顏色了。同樣的，如果你的文字被合并在背景圖當中，首先我們要把畫布放大，然后用吸管工具，點擊要取色的文字，我們就看到文字顏色了。
這里會有另外一種情況，比如我們選中的文字是一個獨立的圖層，當我們選中時，我們就會在選區面板看到文字的顏色，可是卻和我們實際看到的顏色大相徑庭，比如我們看到的是黃色，但是選區面板卻給我們呈現的是鮮艷的紅色。這是怎么回事呢？因為這個文字圖層下面有一些疊加的效果。對于這種情況，用文字工具獲取顏色就不適用了。我們還是選擇用取色器進行取色，記得要把畫布放大哦。
取色工具巧用
用取色工具確定背景是否為純色。
操作演示
我們憑肉眼看過去，它就是一種紅色，但是當我們用取色器點擊這個紅色區域時，顏色是不停變化的。
切圖
在切圖之前，我們需要明確哪些是需要切出來的？
網頁中的圖片可以分為兩類，一類是修飾性圖片，一般用于CSS當中的屬性上面，主要有一些圖標、網站的Logo,還有一些特殊效果的按鈕、文字等以及非純色的背景。另外一類是內容性的圖片，內容性的圖片一般我們應用在HTML標簽 img 上,比如網站上的廣告圖片以及一些網站文章中的配圖……
下面，我們以設計稿為例，哪些東西是需要切出來的？
操作演示
我們看到這張設計稿當中，用紅線框中的，有網站的Logo、有小圖標，以及我們看到的純色的背景，這些都是需要我們切出來的。這張設計稿當中還有很多內容性的圖片，就是用黑線框中的。在這個項目里面，這些內容性的圖片是從服務器端加載過來數據，所以是不需要切圖操作的。
在我們了解了哪些內容需要切圖操作之后，我們進行下一步驟：切出來的圖片，存為哪種類型？
請記住下面幾條切圖原則：
內容性的圖片顏色比較豐富，那我們存為JPG格式情況比較多，必要的話要做一下壓縮，保證圖片不要太大。
對于修飾性的圖片我們一般保存為PNG24格式或者是PNG8格式，兩種格式都支持全透明，但是PNG24格式支持半透明的 ，PNG8不支持 。
切圖主要步驟：
隱藏文字只留背景
隱藏前
那么，我們為什么要把文字隱藏掉呢？因為文字是作為網頁內容需要寫到HTML標簽里面的。除非是一些特殊情況的文字，比如文字上面有一些特殊的效果，我們是沒有辦法用代碼來實現，這個時候，我們才需要把文字切成圖片。如何隱藏文字，分為兩種情況。
第一種是情況是若文字為獨立圖層，解決方案是隱藏文字圖層。
首先找到文字圖層，然后去掉眼睛圖標。這樣就會把文字給隱藏掉了。
第二種情況是文字和背景合并。這里又分為兩種情況，如果你的背景是可以平鋪的 ，解決方案是平鋪背景覆蓋文字。
首先用到矩形選框工具在這個背景上畫一個矩形框，然后在編輯下面選擇自由變換（Ctrl+T）,進行拉伸，在操作完成后，雙擊拉伸后的區域，就可以了。
如果你的背景圖不適合拉伸，判斷是否適合拉伸要看圖片的特性。比如一張紋理特性的圖片，我們進行以上操作后，圖片不像使我們要的，那么這個時候就不適用了。和上面步驟有些不一樣，也是先選用矩形選框工具，然后畫一個矩形框，使用移動工具+Alt，進行間歇式拉伸，有紋理的圖片才是我們想要的效果，
隱藏后
隱藏文本結束后，我們要把自己進行修改后的文件重新放到新的文件里。在圖層面板找到圖層右擊復制圖層，然后在文檔框選擇新建，填好名稱后。我們就會看到一個新的文件了。
以上操作是單獨圖層情況下，假如我們所需要的效果分布在多個圖層上，這個時候要進行第二部操作，就是把需要的圖層進行一個合并。我們以回到頂部圖層為例：
操作演示
我們看到一個回到頂部的圖層，當我們動態的點擊箭頭時，它是一個獨立的圖層，點擊藍色條時，它也是一個單獨的圖層。實際項目開發中，我們需要的是看到的整個圖層。我們在圖層面板看到，這是一列列圖層列表。我們要找到這個層級的父節點，然后右擊合并圖層，最后進行同樣的復制操作。以上是保存為png24格式的具體操作。
切圖png8格式
這里主要是帶背景切，因為png8格式不支持半透明效果。像有些小圖標有很多半透明的像素點，這個時候我們需要帶著背景切。
可平鋪背景的切圖
這種切圖方式主要針對CSS里面 - 這個屬性的切圖方式，步驟分為兩步：
操作當中需要注意的是，如果你平鋪內容是沿x軸平鋪的，那么你需要把平鋪的內容充滿你的文件的寬，如果是沿著 y 軸平鋪的，那么就充滿文件的高，什么意思呢？看具體演示。
操作演示
切片工具
適用于一刀切的應用場景，比如我們將要講到的活動頁。具體步驟如下：
操作演示
還是不會？沒事，下面我們重點用文字描述一下具體步驟。我們看到了PS當中有一張活動頁；
保存
我們從設計稿里面切出我們需要的圖片后，如何保存呢？前面我們已經零零散散的進行了保存操作，下面專門說說保存。保存分為兩個步驟：
保存為哪種格式？
我們切出來的圖片是不是要保存為統一的類型呢，比如都保存為JPG格式，答案是否定的，因為我們需要根據圖片本身的一些特點以及項目實際情況，對圖片進行一個保存。
當圖片色彩豐富無透明要求時，建議保存為JPG格式并選擇合適的品質。有一點需要提及的是圖片品質的選擇，如果品質值越大，相當于這個圖片的質量就越高。相應的，圖片文件也就越大。我們設置圖片的原則是不要設置為100。因為設置為100，就相當于圖片沒有任何壓縮。我們切出來的圖片，最終是要用到網絡中的，所以必須要考慮網絡傳輸問題。一般80的品質已經是相當高的質量了。
操作演示
當圖片色彩不太豐富時無論有無透明要求，建議保存為PNG8格式。PNG8格式一個特點是只有256種顏色，所以它的文件都會比較小，是比較適合網絡傳輸的。另外保存為PNG8格式時前端切圖是什么意思，要進行一些設置。主要設置雜邊（選擇無），無仿色兩項就可以了。
操作演示
當圖片有半透明要求，建議保存為PNG24格式。特點是對圖片不進行壓縮，所以文件比較大。采用默認設置就可以。
操作演示
為了保證圖片質量，在實際項目中，都會對我們使用的這份文件保留一份PSD，后面任意的修改都是在PSD上進行修改的。這樣做的好處是PSD源文件是可以保留圖層的，也就是可以保存一個個單獨的圖層，這對于后期的維護，是相當方便的。
操作演示
五 ： 修改、維護
當我們需要新的功能時，需要加一些圖標，改一些圖片效果，這個時候我們又該如何操作呢？通常有以下幾種情況：
在選項面板選擇圖像下面的畫布大小，會彈出一個窗口。
操作演示
有一個需要注意的地方，就是要把定位選在左上角。這樣做的好處是使得已經存在的圖片，在CSS里面保持位置不變。
若圖標為獨立圖層，則用移動工具拖動即可。若圖標為非獨立圖層，首先用選區工具選中圖標區域，然后用移動工具拖動圖標。
一開始，我們可能會把畫布設置的特別大，后面有了明確的需求后，就不需要這么大的畫布，這個時候我們就要進行畫布的裁剪操作了。首先用矩形選框工具選定選區，在圖像菜單下，找到裁剪按鈕，然后制作你想要的大小。
圖片優化與合并
在前面的操作中，我們已經把需要的內容進行切圖操作，保存成了一份文件。那么，到底如何在我們的代碼中使用我們切出來的圖片呢？
使用背景圖
/*按鈕背景是單獨圖片情況下，直接引用圖片*/
.u-btn{background:url(images/btn.png)no-repeat 0 0;}
/*按鈕圖標和別的圖標合并在一起，需要設置圖標定位*/
.u-btn{background:url(images/sprite.png)no-repeat 0 -50px;}
** 圖片合并方案**
一個頁面上往往有很多張圖片，實際項目開發中并不會把每個圖片切出來保存為單獨的一份文件。而是把這些圖片合并在同一份文件里面來使用。
什么是拼圖？為什么要拼圖？
簡單說就是把設計稿里面的每一個小圖標拼合到同一張圖片上，然后使用的時候引用這張圖片。本來我們可以把這些小圖標單獨保存為一份文件，單獨引用圖片。但是實際我們并不會這么做，而是把它們拼合在一起，然后在代碼中使用。因為這樣會減少網絡請求，提升網頁加載速度。多張圖片的加載速度是會大于我們拼合之后的圖片加載速度的。另外瀏覽器對并行的請求是有個數限制的。所以實際項目中都是對圖片進行合并的。進行圖片的合并中，有一些我們要遵循的原則。
一 ：大小質量
在進行圖片優化的時候，需要平衡取舍圖片的大小與質量，如果想要很高的圖片質量，勢必會導致圖片文件會比較大，不利于網絡傳輸。同樣，如果過分對圖片進行壓縮，就會導致我們的圖片失真。最終需要根據你的項目實際需求來做合適的調整。我推薦使用兩款壓縮工具，一種是無損，對圖片的大小壓縮是比較不明顯的。另外一種是有損，它對圖片的影響是很大的，也就是說，通過有損壓縮，會把圖片壓縮的比較小。開發中，可以使用這兩種工具來輔助開發。
二 ：** 合并**
圖片合并需要遵循的一個原則是圖片之間必須保留空隙，主要是考慮到圖片的容錯性和可維護性。
（1）排列
排列從方向上有橫向排列和縱向排列兩種
操作演示
（2）分類
圖片分類合并遵循的原則：
操作演示
操作演示
操作演示
操作演示
（1）只本頁用到的圖片合并
（2）有狀態的圖標合并（有很多小圖標是有交互狀態的，比如鼠標Hover上去，圖標顏色會變化）
最后
到了這里，前端開發之 切圖就講完了，我們需要做的就是熟悉切圖的幾種操作即可。這些技術可以更好的輔助我們前端開發。
明日預告：開發、調試工具。