開始之前……
- 這篇文章并不是教你如何美化圖片的吐葱，它針對前端開發(fā)的圖片操作第喳。
- 這篇文章注重細節(jié)糜俗，像是工具類文章。所以需要耐心讀下去曲饱，耐心練習悠抹。
- 這算是一篇課程筆記，來自網易前端開發(fā)微專業(yè)扩淀，所以難免遇到一些細節(jié)問題楔敌。
- 這篇文章特點是涉及多個概念，比如單獨圖層驻谆，說這個的目的是我在文中并沒有解釋卵凑，需要自己查閱學習庆聘。
一般在互聯網公司里面，都會有專業(yè)的設計師產出設計稿勺卢，交給前端開發(fā)工程師伙判，那么，前端工程師拿到設計稿之后黑忱，會對這個設計稿進行切圖工作宴抚，之后才開始進行下一步的編碼。下面就是我們要進行的切圖學習……
文章目錄
- 基礎 ：使用PS工具
- 進階： 測量杨何、取色
- 核心： 切圖
- 收獲： 保存
- 后期： 修改酱塔、維護
- 后期： 圖片優(yōu)化與合并
什么是切圖？（What?）
切圖是指將設計稿切成便于制作成頁面的圖片危虱，并完成HTML+CSS布局的靜態(tài)頁面羊娃。通俗來講，就是把一張設計圖利用切片工具埃跷，把自己所需要的效果切成一張張小圖蕊玷，然后用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局弥雹。
為什么需要切圖垃帅？（Why?）
給網頁提供圖片素材。有時候要實現網頁上的特殊效果剪勿，但是依靠HTML+CSS很難實現那種效果贸诚，就算實現也很難做到兼容。所以這個時候可以引用圖片資源的方式來實現這些效果厕吉。接下來酱固，我們就開始進行學習吧……
使用PS工具
ps首選項設置
編輯 > 首選項 > 單位與標尺 > 把文字和標尺設置成像素單位 > 確定-
面板
在“窗口”菜單開啟：
工具、選項头朱、信息（F8）运悲、圖層（F7）、歷史記錄 项钮。
工作區(qū)
這些開啟之后班眯，就要保存下來。**窗口 > 工作區(qū) > 新建工作區(qū) > 保存 **
下次進來烁巫，就可以在這個工作區(qū)進行操作署隘。
工具
切圖常用工具：
移動工具、矩形選框工具亚隙、魔棒工具磁餐、裁剪工具+切片工具、縮放工具 恃鞋、取色器崖媚。輔助視圖
在“視圖”菜單下開啟：
對齊、標尺（Ctrl+R）恤浪、顯示 > 參考線（Ctrl + 畅哑；）
注意一點是需要勾選顯示額外內容，才會顯示參考線水由。
測量 荠呐、取色
打開設計稿，獲取信息,這些信息都能對應到CSS 砂客。
- 尺寸信息
測量獲得：width:200px; - 顏色信息
取色獲得 ： color:#fff;
哪些要測量泥张？
標簽的寬度、高度鞠值、內邊距媚创、邊框、定位彤恶、文字大小钞钙、行高、背景圖位置等等声离，凡是需要數值型芒炼，都要進行測量。
測量需要用到术徊？
矩形選框工具&信息面板本刽。需要注意的是要把畫布盡量放大，來減少我們測量的誤差赠涮。
下面我們專門講講如何測量文字大小子寓，有兩種情況：
1：第一種是單獨圖層，我們直接用文字工具
2：第二種情況是世囊，你的文字被合并在背景圖中别瞭。
這里我們還要用到的是矩形選框工具，進行測量株憾。首先用矩形選框工具把要測量的字進行框住蝙寨，然后在信息面板上，我們就會看到“H”高度后邊的數字嗤瞎，那就是字體大小了墙歪。
其它操作也是要用到矩形選框工具……
取色
哪些要取色？凡是顏色都要取色贝奇。具體有邊框色虹菲、背景色、文字色掉瞳。
工具：拾色器&吸管工具毕源。
如果我們想知道文字的顏色浪漠，和上面的測量文字一樣，如果是獨立圖層霎褐，我們直接在選區(qū)上址愿，就能看到文字顏色了。同樣的冻璃，如果你的文字被合并在背景圖當中响谓，首先我們要把畫布放大，然后用吸管工具省艳，點擊要取色的文字娘纷，我們就看到文字顏色了。
這里會有另外一種情況跋炕，比如我們選中的文字是一個獨立的圖層赖晶，當我們選中時，我們就會在選區(qū)面板看到文字的顏色辐烂，可是卻和我們實際看到的顏色大相徑庭嬉探，比如我們看到的是黃色，但是選區(qū)面板卻給我們呈現的是鮮艷的紅色棉圈。這是怎么回事呢涩堤？因為這個文字圖層下面有一些疊加的效果。對于這種情況分瘾，用文字工具獲取顏色就不適用了胎围。我們還是選擇用取色器進行取色，記得要把畫布放大哦德召。
取色工具巧用
用取色工具確定背景是否為純色白魂。
我們憑肉眼看過去，它就是一種紅色上岗，但是當我們用取色器點擊這個紅色區(qū)域時福荸，顏色是不停變化的。
切圖
在切圖之前肴掷，我們需要明確哪些是需要切出來的敬锐？
網頁中的圖片可以分為兩類，一類是修飾性圖片呆瞻，一般用于CSS當中的background屬性上面台夺，主要有一些圖標、網站的Logo,還有一些特殊效果的按鈕痴脾、文字等以及非純色的背景颤介。另外一類是內容性的圖片，內容性的圖片一般我們應用在HTML標簽 img 上,比如網站上的廣告圖片以及一些網站文章中的配圖……
下面，我們以設計稿為例滚朵，哪些東西是需要切出來的冤灾？
我們看到這張設計稿當中，用紅線框中的辕近，有網站的Logo瞳购、有小圖標，以及我們看到的純色的背景亏推，這些都是需要我們切出來的。這張設計稿當中還有很多內容性的圖片年堆，就是用黑線框中的吞杭。在這個項目里面，這些內容性的圖片是從服務器端加載過來數據变丧，所以是不需要切圖操作的芽狗。
在我們了解了哪些內容需要切圖操作之后，我們進行下一步驟：切出來的圖片痒蓬，存為哪種類型童擎？
請記住下面幾條切圖原則：
內容性的圖片顏色比較豐富，那我們存為JPG格式情況比較多攻晒，必要的話要做一下壓縮顾复，保證圖片不要太大。
對于修飾性的圖片我們一般保存為PNG24格式或者是PNG8格式鲁捏，兩種格式都支持全透明芯砸，但是PNG24格式支持半透明的 ，PNG8不支持 给梅。
切圖主要步驟：
- 隱藏文字只留背景
那么假丧，我們?yōu)槭裁匆盐淖蛛[藏掉呢？因為文字是作為網頁內容需要寫到HTML標簽里面的动羽。除非是一些特殊情況的文字包帚，比如文字上面有一些特殊的效果，我們是沒有辦法用代碼來實現运吓，這個時候渴邦，我們才需要把文字切成圖片。如何隱藏文字拘哨，分為兩種情況几莽。
第一種是情況是若文字為獨立圖層，解決方案是隱藏文字圖層宅静。
首先找到文字圖層章蚣，然后去掉眼睛圖標。這樣就會把文字給隱藏掉了。
第二種情況是文字和背景合并纤垂。這里又分為兩種情況矾策，如果你的背景是可以平鋪的 ，解決方案是平鋪背景覆蓋文字峭沦。
首先用到矩形選框工具在這個背景上畫一個矩形框贾虽，然后在編輯下面選擇自由變換（Ctrl+T）,進行拉伸，在操作完成后吼鱼，雙擊拉伸后的區(qū)域蓬豁，就可以了。
如果你的背景圖不適合拉伸菇肃，判斷是否適合拉伸要看圖片的特性地粪。比如一張紋理特性的圖片，我們進行以上操作后琐谤，圖片不像使我們要的蟆技，那么這個時候就不適用了。和上面步驟有些不一樣斗忌，也是先選用矩形選框工具质礼，然后畫一個矩形框，使用移動工具+Alt织阳，進行間歇式拉伸眶蕉，有紋理的圖片才是我們想要的效果，
隱藏文本結束后唧躲，我們要把自己進行修改后的文件重新放到新的文件里妻坝。在圖層面板找到圖層右擊復制圖層，然后在文檔框選擇新建惊窖，填好名稱后刽宪。我們就會看到一個新的文件了。
以上操作是單獨圖層情況下界酒，假如我們所需要的效果分布在多個圖層上圣拄，這個時候要進行第二部操作，就是把需要的圖層進行一個合并毁欣。我們以回到頂部圖層為例：
我們看到一個回到頂部的圖層庇谆，當我們動態(tài)的點擊箭頭時，它是一個獨立的圖層凭疮，點擊藍色條時饭耳，它也是一個單獨的圖層。實際項目開發(fā)中执解，我們需要的是看到的整個圖層寞肖。我們在圖層面板看到，這是一列列圖層列表。我們要找到這個層級的父節(jié)點新蟆，然后右擊合并圖層觅赊，最后進行同樣的復制操作。以上是保存為png24格式的具體操作琼稻。
切圖png8格式
這里主要是帶背景切吮螺，因為png8格式不支持半透明效果。像有些小圖標有很多半透明的像素點帕翻，這個時候我們需要帶著背景切鸠补。
- 首先把文件進行合并（合并可見圖層）
- 矩形選框工具選擇內容
- 然后用魔棒工具去除多余部分（從選區(qū)減去：按住Alt）
可平鋪背景的切圖
這種切圖方式主要針對CSS里面 background-repeat 這個屬性的切圖方式，步驟分為兩步：
- 用矩形選框工具選取需要區(qū)域
- 復制粘貼到新文件中
操作當中需要注意的是嘀掸，如果你平鋪內容是沿x軸平鋪的紫岩，那么你需要把平鋪的內容充滿你的文件的寬，如果是沿著 y 軸平鋪的横殴，那么就充滿文件的高，什么意思呢卿拴？看具體演示衫仑。
切片工具
適用于一刀切的應用場景，比如我們將要講到的活動頁堕花。具體步驟如下：
- 根據需要的區(qū)域文狱，分別拉參考線；
- 選擇切片工具
- 點擊“基于參考線的切片”按鈕
- 保存 （全選切片缘挽，統(tǒng)一設置存儲格式）
還是不會瞄崇？沒事，下面我們重點用文字描述一下具體步驟壕曼。我們看到了PS當中有一張活動頁苏研；
- 首先拉參考線到我們需要獨立成圖的區(qū)域，像上面演示一樣腮郊，我們總共拉了3條參考線摹蘑；
- 接著我們在工具面板選擇切片工具，然后點擊選項面板的“基于參考線的切片”轧飞；
- 接著點擊切片工具層級下面的選擇切片的工具衅鹿，然后分別雙擊要獨立成圖的活動頁，設置名稱过咬；
- 最后就是點擊文件大渤，選擇存儲為Web所用格式。這里要注意的是選擇JPEG格式進行保存掸绞。因為這張活動頁色彩比較鮮艷泵三。
保存
我們從設計稿里面切出我們需要的圖片后，如何保存呢？前面我們已經零零散散的進行了保存操作切黔，下面專門說說保存砸脊。保存分為兩個步驟：
- 第一步：如果是獨立圖層，采用復制（Ctrl+C）纬霞、新建（Ctrl +N）凌埂、粘貼（Ctrl+V）或者直接將內容拖至新文件。如果是背景合并在一起的圖層诗芜，我們采用三個快捷鍵連用的方式進行保存瞳抓。
- 第二步：存儲為Web所用格式（Alt+Shift+Ctrl+S)
保存為哪種格式？
我們切出來的圖片是不是要保存為統(tǒng)一的類型呢伏恐，比如都保存為JPG格式孩哑，答案是否定的，因為我們需要根據圖片本身的一些特點以及項目實際情況翠桦，對圖片進行一個保存横蜒。
- 保存類型一
當圖片色彩豐富無透明要求時，建議保存為JPG格式并選擇合適的品質销凑。有一點需要提及的是圖片品質的選擇丛晌，如果品質值越大，相當于這個圖片的質量就越高斗幼。相應的澎蛛，圖片文件也就越大。我們設置圖片的原則是不要設置為100蜕窿。因為設置為100谋逻，就相當于圖片沒有任何壓縮。我們切出來的圖片桐经，最終是要用到網絡中的毁兆，所以必須要考慮網絡傳輸問題。一般80的品質已經是相當高的質量了阴挣。
- 保存類型二
當圖片色彩不太豐富時無論有無透明要求荧恍，建議保存為PNG8格式。PNG8格式一個特點是只有256種顏色屯吊，所以它的文件都會比較小送巡，是比較適合網絡傳輸的。另外保存為PNG8格式時盒卸，要進行一些設置骗爆。主要設置雜邊（選擇無），無仿色兩項就可以了蔽介。
- 保存類型三
當圖片有半透明要求摘投，建議保存為PNG24格式煮寡。特點是對圖片不進行壓縮，所以文件比較大犀呼。采用默認設置就可以幸撕。
- 保存類型四
為了保證圖片質量，在實際項目中外臂，都會對我們使用的這份文件保留一份PSD坐儿，后面任意的修改都是在PSD上進行修改的。這樣做的好處是PSD源文件是可以保留圖層的宋光，也就是可以保存一個個單獨的圖層貌矿，這對于后期的維護，是相當方便的罪佳。
五 ： 修改逛漫、維護
當我們需要新的功能時，需要加一些圖標赘艳，改一些圖片效果酌毡，這個時候我們又該如何操作呢？通常有以下幾種情況：
- 放更多圖片蕾管？更改畫布大小
在選項面板選擇圖像下面的畫布大小，會彈出一個窗口娇掏。
有一個需要注意的地方勋眯，就是要把定位選在左上角。這樣做的好處是使得已經存在的圖片客蹋，在CSS里面保持位置不變。
- 移動圖標
若圖標為獨立圖層讶坯，則用移動工具拖動即可。若圖標為非獨立圖層辆琅，首先用選區(qū)工具選中圖標區(qū)域，然后用移動工具拖動圖標婉烟。
- 減小畫布到指定區(qū)域
一開始娩井，我們可能會把畫布設置的特別大，后面有了明確的需求后似袁，就不需要這么大的畫布洞辣，這個時候我們就要進行畫布的裁剪操作了咐刨。首先用矩形選框工具選定選區(qū)，在圖像菜單下扬霜，找到裁剪按鈕定鸟，然后制作你想要的大小。
圖片優(yōu)化與合并
在前面的操作中著瓶，我們已經把需要的內容進行切圖操作联予，保存成了一份文件。那么蟹但，到底如何在我們的代碼中使用我們切出來的圖片呢躯泰？
使用背景圖
<button class="u-btn">點我</button>
/*按鈕背景是單獨圖片情況下，直接引用圖片*/
.u-btn{background:url(images/btn.png)no-repeat 0 0;}
/*按鈕圖標和別的圖標合并在一起华糖，需要設置圖標定位*/
.u-btn{background:url(images/sprite.png)no-repeat 0 -50px;}
** 圖片合并方案**
一個頁面上往往有很多張圖片麦向，實際項目開發(fā)中并不會把每個圖片切出來保存為單獨的一份文件。而是把這些圖片合并在同一份文件里面來使用客叉。
什么是拼圖诵竭？為什么要拼圖？
簡單說就是把設計稿里面的每一個小圖標拼合到同一張圖片上兼搏，然后使用的時候引用這張圖片卵慰。本來我們可以把這些小圖標單獨保存為一份文件，單獨引用圖片佛呻。但是實際我們并不會這么做裳朋，而是把它們拼合在一起，然后在代碼中使用吓著。因為這樣會減少網絡請求鲤嫡，提升網頁加載速度。多張圖片的加載速度是會大于我們拼合之后的圖片加載速度的绑莺。另外瀏覽器對并行的請求是有個數限制的暖眼。所以實際項目中都是對圖片進行合并的。進行圖片的合并中诫肠，有一些我們要遵循的原則栋豫。
一 ：大小質量
在進行圖片優(yōu)化的時候丧鸯，需要平衡取舍圖片的大小與質量骡送，如果想要很高的圖片質量，勢必會導致圖片文件會比較大虐先，不利于網絡傳輸蛹批。同樣腐芍，如果過分對圖片進行壓縮猪勇，就會導致我們的圖片失真泣刹。最終需要根據你的項目實際需求來做合適的調整。我推薦使用兩款壓縮工具寡键，一種是無損Minimage西轩，對圖片的大小壓縮是比較不明顯的固灵。另外一種是有損TinyPng劫流，它對圖片的影響是很大的祠汇，也就是說可很，通過有損壓縮我抠，會把圖片壓縮的比較小。開發(fā)中菜拓，可以使用這兩種工具來輔助開發(fā)瓣窄。
二 ：** 合并**
圖片合并需要遵循的一個原則是圖片之間必須保留空隙从诲，主要是考慮到圖片的容錯性和可維護性贱鄙。
（1）排列
排列從方向上有橫向排列和縱向排列兩種
（2）分類
圖片分類合并遵循的原則：
- 把同屬于一個模塊的圖片進行合并
- 把大小相近的圖片進行合并
- 把色彩相近的圖片進行合并
- 綜合以上方式合并
- 合并推薦
（1）只本頁用到的圖片合并
（2）有狀態(tài)的圖標合并（有很多小圖標是有交互狀態(tài)的，比如鼠標Hover上去氯迂，圖標顏色會變化）
最后
到了這里言缤，前端開發(fā)之PhotoShop 切圖就講完了管挟，我們需要做的就是熟悉切圖的幾種操作即可导帝。這些技術可以更好的輔助我們前端開發(fā)穿铆。
明日預告：開發(fā)荞雏、調試工具凤优。
