前言
很多圈友最近圍在一圈討論一個話題——切圖。那什么是切圖？切圖對美術(shù)和程序有什么關(guān)系？怎么切圖？切圖有哪些方法？切圖要注意什么？帶著這些問題，我們一起看下去。（咩~~~杭杭這次來把切了兩年圖的經(jīng)驗分享給大家，干活哦親們。）
首先我們先了解什么是切圖？
對于切圖，杭杭也沒法回答一個具體的定義，姑且以我的理解來說吧。
切圖是指把所做的圖行界面分散導出，并經(jīng)過程序?qū)崿F(xiàn)實際效果。如下圖一款棋牌game界面，他的界面分解出來就是下面那堆小圖。
從上圖可以看出，切圖其實就是把一個界面分解成若干元素來。這個過程就是切圖。是不是很容易理解。（就是這么簡單，沒那么難難理解啦，我在寫的時候也查閱了網(wǎng)上的資料，說的都太復雜了，另外杭杭這里說的只是關(guān)于游戲切圖的一個例子，網(wǎng)頁切圖，屏幕切圖，手機應用切圖都有所不同，但是基本都差不多，后面會講到一些準對的區(qū)別。）
切圖對美術(shù)和程序有什么關(guān)系？
切圖是為了方便圖片內(nèi)容的加速加載。比如，下載一張色彩豐富，并且有操作按鈕的界面用30秒，當把一張大圖分為若干模塊從不同地方和區(qū)域進行載入那么就會很快。這個理解來源于杭杭上半年看的紀錄片《互聯(lián)網(wǎng)時代》中。另外也是為了讓程序?qū)崿F(xiàn)功能所必經(jīng)的過程。如果沒有切圖，整張圖去加載和做出來的效果是非常難看和不合理的。此處不做過多文字說明請看下圖
還是解釋下把，圖截得不好。從上到下，從左到右。第一張和第二張是沒有切圖直接一張圖交給程序運行，程序需要在可操作去做點擊區(qū)域，所以只能以程序的角度來隨便拖了張透明色塊來提示你這里點中了。當然除了杭杭模擬的效果外或許還有其他更多不完善的顯示方式呈現(xiàn)。下面兩張，左為正常情況，又為點擊時是縮小的，而不會另外加其他色塊來表現(xiàn)是點中?？瓷先ナ潜容^完美噠。這就是為什么切圖。（其實杭杭這里感覺還是沒解釋太清楚，不過從圖應該大家能看懂些東西把。~.~。）
怎么切圖呢，求解？
杭杭上面說了一些簡單的身世和背景。對于切圖其實很簡單，之前也說道，切圖是指把所做的圖行界面分散導出。
首先我們先了解切圖所用到的工具，如下圖，Photoshop工具列表裁剪工具子按鈕下的切片工具和切片選擇工具。
1.切片工具主要是框選所要切圖的區(qū)域。
2.切片選擇工具主要是選擇當前選擇好的切片區(qū)域可拖到移動位置和重新定切片區(qū)域。
接下來杭杭要把他的嘴巴切出來。如下圖。
現(xiàn)在我們選擇Photoshop工具列表裁剪工具子按鈕下的切片工具。畫出如下圖.
橘色框為要切的區(qū)域，此處注意嘴巴的像素是否在框內(nèi)，所以要放到很大的界面檢查下避免圖片切出不完整返工。不要多切也不要少切。（要養(yǎng)成檢查的習慣啂親*.*）
當圖片區(qū)域框選好以后接下來導出。這里的導出并不像平時我們流程那樣去保存。此處用切圖導出方式。
平時保存流程：文件/儲存為
切圖導出方式：文件/儲存為Web所用格式…（快捷鍵：Ait+Shift+Ctrl+s）
點開后出現(xiàn)如下圖，此處注意將切圖保存PNG24。在視圖去選擇需要切圖的區(qū)域，然后點擊保存。
然后彈出如下面板，這里注意確認圖的格式【僅限圖像】，和切出動作選為【選中切片】。然后命名為你的名字后保存，切片就切出來了。
以上過程為總結(jié)一下兩個字就是——切圖?，F(xiàn)在看到這里不知道你對切圖有沒有更深刻的了解了呢，呵呵，其實沒那么難啦。然并卵。切圖切久了感覺每次都這么切，杭杭心都累了，于是杭杭和廣大伙伴們一樣尋找神一樣的利器，于是杭杭也鳥槍換大炮。終于找到了一些切圖軟件（下圖是這些軟件重點某一款）。此處例舉軟件。這這些軟件確實很強大的，但是后來杭杭發(fā)現(xiàn)一個嚴重的問題，他們不能保證切出來的圖是雙像素。導致那段時間我的工作量突然大增，大多都是返工重新切圖。到后來不得不回到原地重新切。
大人們總說‘失敗是成功的母親’。經(jīng)過長達兩年的切圖經(jīng)驗。杭杭也自己研究了屬于自己的一套切圖流程。切圖成功率幾乎在90%以上，10%是程序臨時來說此處特別做法需要重新修改。我現(xiàn)在基本一整套游戲資源，小的半小時搞定，中等的兩道三小時搞的，大的一上午搞定。就是這么快，這就是手速。好吧我把過程用快捷鍵的方式分享大家：
1.將需要的圖層選擇并且合并,此處用到快捷鍵Ctrl+e
2.選擇PS矩形選框工具，此處用到快捷鍵M，并且復制要切的圖ctrl+c
3.新建畫布，此處用到快捷鍵Ctrl+n(默認大小就可以)
4.畫布創(chuàng)建好后快捷鍵Ctrl+v念頭(同時檢查圖是否單雙像素快捷鍵Ctrl+Alt+c,如果是單像素，那么要加1px的透明像素。如圖為6*9，那么改為6*10)
5.開始保存，Ait+Shift+Ctrl+s，然后兩次回車保存完成。
以上用到7個快捷鍵，第一次需要設(shè)置相關(guān)參數(shù)和剛剛開始用這套切圖方式會慢很多，當你只會且習慣了，手指就像風火輪一樣在鍵盤敲擊出一段美麗的音樂。
其實大家很一問下面這么多快捷鍵，上面只是簡單幾步，為什么說下面快捷鍵會更準確呢，其實細心看的話或者有同樣困擾的朋友會知道用切片工具去對像素是多么鬧心。這就是杭杭方式切圖流程。
切圖有哪些方法？
切圖方法說完，不知道您是否受益了呢。那么你現(xiàn)在的煩惱是程序總會找到你說這張圖太大，你要給我做小，減少資源，不然項目運行會有問題。于是最長出現(xiàn)如下對話。
‘
為了更好的顯示和視覺效果，就整張圖用吧，不用這樣的圖界面不好看的。’
‘
不行，不行，圖太大，后臺走出來太耗費性能了，我們項目耗不起啊，不行你就重新作圖把，該簡單些?！?/p>
‘
不行，圖肯定不能改了，改也來不及拉?！?/p>
‘
我不管你那么多，你要把圖給我減小’
‘
… …’
辣么，表急，我們要解決這種問題，首先要從根本出發(fā)。杭杭從其他游戲的資源和切圖經(jīng)驗總結(jié)了下有以下幾種解jie牛tu刀qie法fa：
1.【整切】耗費性能大，資源大。
2.【對半切法】想對耗費性能少。
3.【拼合切法】耗費資源小
4.【切邊法】資源耗費小。
5.【九宮切法】耗費資源小。
6.【填補法】耗費資源較小。
解惑：
【整切】:把一個資源整個切除，適合紋理復雜的圖如下
【對半切法】:將可對稱的圖，切一般，利用程序水平翻轉(zhuǎn)。如下圖
【拼合切法】：適合數(shù)字等小素材拼合，包括動態(tài)幀圖等。如下圖
【切邊法】:適合邊框不規(guī)則，中心規(guī)則的圖切法，(把不規(guī)則的邊切除來,把規(guī)則的內(nèi)容留下來做動作，如下圖就利用了上面說道的對半切法。不同圖不同組合刀法，舉一反三)如下圖
【九宮切法】:適合不規(guī)則圖，某部為規(guī)則圖，然后利用程序按固定的點拉伸。此處不做過度解釋，如果不懂可以像程序請教，他們會很樂意告訴你自己的知識噠。如下圖：
【填補法】:用于DW網(wǎng)頁開發(fā)，和手機APP工具開發(fā)，如QQ，微信等軟件。基于設(shè)置好的布局直接給到程序相關(guān)的參數(shù)填充（此處以QQ界面做示范）。如下圖
（以上是杭杭整理出來的一些切法，和分解效果，如果大家還有更好的方法，和不對的地方可以在評論留言告知。）
切圖要注意什么？
了解了切圖的概念和實際操作，不知道您是不是受益匪淺呢。表急，你會切了，但你知道切圖需要注意哪些嗎？
‘不就切個圖，有什么好主意噠~~~’
對于這句話，我們不急著回答。前面大家在切圖模塊也看到杭杭反復提示單雙像素問題。那么何為單像素？何為雙像素？其實也很好理解，就是1px 3px 5px … …單數(shù)單像素。反之2px 4px 6px … …等的雙數(shù)為雙像素。game方面或許根據(jù)公司的不同要求有謹慎的，有不謹慎的。在APP應用方面根據(jù)杭杭寫這邊文章前確是要求比較嚴格的。所以，作為設(shè)計者的你，也要嚴格針對每張圖。點像素理解范疇請看下圖
從上圖可以看出，如果你在作圖和切圖時不注意單雙像素的結(jié)果就是導致你的切圖在實時運行后出現(xiàn)界面不清晰的結(jié)果。淡然，有些程序也是完全兼容單像素的存在。不過我有強迫癥，嚴格要求自己不犯錯才能減少返工。大概切圖上需要注意的就這一點。干貨不是天天有。趕快收藏吧。
最后感謝大家觀看本文章，字寫的多，累了把。休息下眼睛，么么噠~
