前言
很多圈友最近圍在一圈討論一個(gè)話(huà)題——切圖毅哗。那什么是切圖听怕？切圖對(duì)美術(shù)和程序有什么關(guān)系？怎么切圖虑绵？切圖有哪些方法尿瞭？切圖要注意什么？帶著這些問(wèn)題翅睛，我們一起看下去声搁。（咩~~~杭杭這次來(lái)把切了兩年圖的經(jīng)驗(yàn)分享給大家，干活哦親們宏所。）
首先我們先了解什么是切圖酥艳？
對(duì)于切圖，杭杭也沒(méi)法回答一個(gè)具體的定義爬骤，姑且以我的理解來(lái)說(shuō)吧充石。
切圖是指把所做的圖行界面分散導(dǎo)出，并經(jīng)過(guò)程序?qū)崿F(xiàn)實(shí)際效果霞玄。如下圖一款棋牌game界面骤铃，他的界面分解出來(lái)就是下面那堆小圖。
從上圖可以看出坷剧，切圖其實(shí)就是把一個(gè)界面分解成若干元素來(lái)惰爬。這個(gè)過(guò)程就是切圖。是不是很容易理解惫企。（就是這么簡(jiǎn)單撕瞧，沒(méi)那么難難理解啦，我在寫(xiě)的時(shí)候也查閱了網(wǎng)上的資料狞尔，說(shuō)的都太復(fù)雜了丛版，另外杭杭這里說(shuō)的只是關(guān)于游戲切圖的一個(gè)例子，網(wǎng)頁(yè)切圖偏序，屏幕切圖页畦，手機(jī)應(yīng)用切圖都有所不同，但是基本都差不多研儒，后面會(huì)講到一些準(zhǔn)對(duì)的區(qū)別豫缨。）
切圖對(duì)美術(shù)和程序有什么關(guān)系？
切圖是為了方便圖片內(nèi)容的加速加載端朵。比如好芭，下載一張色彩豐富，并且有操作按鈕的界面用30秒冲呢，當(dāng)把一張大圖分為若干模塊從不同地方和區(qū)域進(jìn)行載入那么就會(huì)很快栓撞。這個(gè)理解來(lái)源于杭杭上半年看的紀(jì)錄片《互聯(lián)網(wǎng)時(shí)代》中。另外也是為了讓程序?qū)崿F(xiàn)功能所必經(jīng)的過(guò)程。如果沒(méi)有切圖瓤湘，整張圖去加載和做出來(lái)的效果是非常難看和不合理的瓢颅。此處不做過(guò)多文字說(shuō)明請(qǐng)看下圖
還是解釋下把，圖截得不好弛说。從上到下挽懦，從左到右。第一張和第二張是沒(méi)有切圖直接一張圖交給程序運(yùn)行木人，程序需要在可操作去做點(diǎn)擊區(qū)域信柿，所以只能以程序的角度來(lái)隨便拖了張透明色塊來(lái)提示你這里點(diǎn)中了。當(dāng)然除了杭杭模擬的效果外或許還有其他更多不完善的顯示方式呈現(xiàn)醒第。下面兩張渔嚷，左為正常情況，又為點(diǎn)擊時(shí)是縮小的稠曼，而不會(huì)另外加其他色塊來(lái)表現(xiàn)是點(diǎn)中形病。看上去是比較完美噠霞幅。這就是為什么切圖漠吻。（其實(shí)杭杭這里感覺(jué)還是沒(méi)解釋太清楚，不過(guò)從圖應(yīng)該大家能看懂些東西把司恳。~.~途乃。）
怎么切圖呢，求解扔傅？
杭杭上面說(shuō)了一些簡(jiǎn)單的身世和背景耍共。對(duì)于切圖其實(shí)很簡(jiǎn)單，之前也說(shuō)道猎塞，切圖是指把所做的圖行界面分散導(dǎo)出试读。
首先我們先了解切圖所用到的工具，如下圖邢享，Photoshop工具列表裁剪工具子按鈕下的切片工具和切片選擇工具鹏往。
1.切片工具主要是框選所要切圖的區(qū)域淡诗。
2.切片選擇工具主要是選擇當(dāng)前選擇好的切片區(qū)域可拖到移動(dòng)位置和重新定切片區(qū)域骇塘。
接下來(lái)杭杭要把他的嘴巴切出來(lái)。如下圖韩容。
現(xiàn)在我們選擇Photoshop工具列表裁剪工具子按鈕下的切片工具款违。畫(huà)出如下圖.
橘色框?yàn)橐械膮^(qū)域，此處注意嘴巴的像素是否在框內(nèi)群凶，所以要放到很大的界面檢查下避免圖片切出不完整返工插爹。不要多切也不要少切。（要養(yǎng)成檢查的習(xí)慣啂親*.*）
當(dāng)圖片區(qū)域框選好以后接下來(lái)導(dǎo)出。這里的導(dǎo)出并不像平時(shí)我們流程那樣去保存赠尾。此處用切圖導(dǎo)出方式力穗。
平時(shí)保存流程：文件/儲(chǔ)存為
切圖導(dǎo)出方式：文件/儲(chǔ)存為Web所用格式…（快捷鍵：Ait+Shift+Ctrl+s）
點(diǎn)開(kāi)后出現(xiàn)如下圖，此處注意將切圖保存PNG24气嫁。在視圖去選擇需要切圖的區(qū)域当窗，然后點(diǎn)擊保存。
然后彈出如下面板寸宵，這里注意確認(rèn)圖的格式【僅限圖像】崖面，和切出動(dòng)作選為【選中切片】。然后命名為你的名字后保存梯影，切片就切出來(lái)了巫员。
以上過(guò)程為總結(jié)一下兩個(gè)字就是——切圖。現(xiàn)在看到這里不知道你對(duì)切圖有沒(méi)有更深刻的了解了呢甲棍，呵呵简识，其實(shí)沒(méi)那么難啦。然并卵救军。切圖切久了感覺(jué)每次都這么切财异，杭杭心都累了，于是杭杭和廣大伙伴們一樣尋找神一樣的利器唱遭，于是杭杭也鳥(niǎo)槍換大炮戳寸。終于找到了一些切圖軟件（下圖是這些軟件重點(diǎn)某一款）。此處例舉軟件拷泽。這這些軟件確實(shí)很強(qiáng)大的疫鹊，但是后來(lái)杭杭發(fā)現(xiàn)一個(gè)嚴(yán)重的問(wèn)題，他們不能保證切出來(lái)的圖是雙像素司致。導(dǎo)致那段時(shí)間我的工作量突然大增拆吆，大多都是返工重新切圖。到后來(lái)不得不回到原地重新切脂矫。
大人們總說(shuō)‘失敗是成功的母親’枣耀。經(jīng)過(guò)長(zhǎng)達(dá)兩年的切圖經(jīng)驗(yàn)。杭杭也自己研究了屬于自己的一套切圖流程庭再。切圖成功率幾乎在90%以上捞奕，10%是程序臨時(shí)來(lái)說(shuō)此處特別做法需要重新修改。我現(xiàn)在基本一整套游戲資源拄轻，小的半小時(shí)搞定颅围，中等的兩道三小時(shí)搞的，大的一上午搞定恨搓。就是這么快院促，這就是手速筏养。好吧我把過(guò)程用快捷鍵的方式分享大家：
1.將需要的圖層選擇并且合并,此處用到快捷鍵Ctrl+e
2.選擇PS矩形選框工具，此處用到快捷鍵M常拓，并且復(fù)制要切的圖ctrl+c
3.新建畫(huà)布渐溶，此處用到快捷鍵Ctrl+n(默認(rèn)大小就可以)
4.畫(huà)布創(chuàng)建好后快捷鍵Ctrl+v念頭(同時(shí)檢查圖是否單雙像素快捷鍵Ctrl+Alt+c,如果是單像素，那么要加1px的透明像素弄抬。如圖為6*9掌猛，那么改為6*10)
5.開(kāi)始保存，Ait+Shift+Ctrl+s眉睹，然后兩次回車(chē)保存完成荔茬。
以上用到7個(gè)快捷鍵，第一次需要設(shè)置相關(guān)參數(shù)和剛剛開(kāi)始用這套切圖方式會(huì)慢很多竹海，當(dāng)你只會(huì)且習(xí)慣了慕蔚，手指就像風(fēng)火輪一樣在鍵盤(pán)敲擊出一段美麗的音樂(lè)。
其實(shí)大家很一問(wèn)下面這么多快捷鍵斋配，上面只是簡(jiǎn)單幾步孔飒，為什么說(shuō)下面快捷鍵會(huì)更準(zhǔn)確呢，其實(shí)細(xì)心看的話(huà)或者有同樣困擾的朋友會(huì)知道用切片工具去對(duì)像素是多么鬧心艰争。這就是杭杭方式切圖流程坏瞄。
切圖有哪些方法？
切圖方法說(shuō)完甩卓，不知道您是否受益了呢鸠匀。那么你現(xiàn)在的煩惱是程序總會(huì)找到你說(shuō)這張圖太大，你要給我做小逾柿，減少資源缀棍，不然項(xiàng)目運(yùn)行會(huì)有問(wèn)題。于是最長(zhǎng)出現(xiàn)如下對(duì)話(huà)机错。
‘
為了更好的顯示和視覺(jué)效果爬范，就整張圖用吧，不用這樣的圖界面不好看的弱匪∏嗥伲’
‘
不行，不行萧诫，圖太大斥难，后臺(tái)走出來(lái)太耗費(fèi)性能了，我們項(xiàng)目耗不起啊财搁，不行你就重新作圖把蘸炸，該簡(jiǎn)單些躬络〖獗迹’
‘
不行，圖肯定不能改了，改也來(lái)不及拉提茁⊙秃蹋’
‘
我不管你那么多，你要把圖給我減小’
‘
… …’
辣么茴扁，表急铃岔，我們要解決這種問(wèn)題，首先要從根本出發(fā)峭火。杭杭從其他游戲的資源和切圖經(jīng)驗(yàn)總結(jié)了下有以下幾種解jie牛tu刀qie法fa：
1.【整切】耗費(fèi)性能大毁习，資源大。
2.【對(duì)半切法】想對(duì)耗費(fèi)性能少卖丸。
3.【拼合切法】耗費(fèi)資源小
4.【切邊法】資源耗費(fèi)小纺且。
5.【九宮切法】耗費(fèi)資源小。
6.【填補(bǔ)法】耗費(fèi)資源較小稍浆。
解惑：
【整切】:把一個(gè)資源整個(gè)切除载碌，適合紋理復(fù)雜的圖如下
【對(duì)半切法】:將可對(duì)稱(chēng)的圖，切一般衅枫，利用程序水平翻轉(zhuǎn)嫁艇。如下圖
【拼合切法】：適合數(shù)字等小素材拼合，包括動(dòng)態(tài)幀圖等弦撩。如下圖
【切邊法】:適合邊框不規(guī)則步咪，中心規(guī)則的圖切法，(把不規(guī)則的邊切除來(lái),把規(guī)則的內(nèi)容留下來(lái)做動(dòng)作益楼，如下圖就利用了上面說(shuō)道的對(duì)半切法歧斟。不同圖不同組合刀法，舉一反三)如下圖
【九宮切法】:適合不規(guī)則圖偏形，某部為規(guī)則圖静袖，然后利用程序按固定的點(diǎn)拉伸。此處不做過(guò)度解釋?zhuān)绻欢梢韵癯绦蛘?qǐng)教俊扭，他們會(huì)很樂(lè)意告訴你自己的知識(shí)噠队橙。如下圖：
【填補(bǔ)法】:用于DW網(wǎng)頁(yè)開(kāi)發(fā)，和手機(jī)APP工具開(kāi)發(fā)萨惑，如QQ捐康，微信等軟件∮拱基于設(shè)置好的布局直接給到程序相關(guān)的參數(shù)填充（此處以QQ界面做示范）解总。如下圖
（以上是杭杭整理出來(lái)的一些切法，和分解效果姐仅，如果大家還有更好的方法花枫，和不對(duì)的地方可以在評(píng)論留言告知刻盐。）
切圖要注意什么？
了解了切圖的概念和實(shí)際操作劳翰，不知道您是不是受益匪淺呢敦锌。表急，你會(huì)切了佳簸，但你知道切圖需要注意哪些嗎乙墙？
‘不就切個(gè)圖，有什么好主意噠~~~’
對(duì)于這句話(huà)生均，我們不急著回答听想。前面大家在切圖模塊也看到杭杭反復(fù)提示單雙像素問(wèn)題。那么何為單像素马胧？何為雙像素哗魂？其實(shí)也很好理解，就是1px 3px 5px … …單數(shù)單像素漓雅。反之2px 4px 6px … …等的雙數(shù)為雙像素录别。game方面或許根據(jù)公司的不同要求有謹(jǐn)慎的，有不謹(jǐn)慎的邻吞。在APP應(yīng)用方面根據(jù)杭杭寫(xiě)這邊文章前確是要求比較嚴(yán)格的组题。所以，作為設(shè)計(jì)者的你抱冷，也要嚴(yán)格針對(duì)每張圖崔列。點(diǎn)像素理解范疇請(qǐng)看下圖
從上圖可以看出，如果你在作圖和切圖時(shí)不注意單雙像素的結(jié)果就是導(dǎo)致你的切圖在實(shí)時(shí)運(yùn)行后出現(xiàn)界面不清晰的結(jié)果旺遮。淡然赵讯，有些程序也是完全兼容單像素的存在。不過(guò)我有強(qiáng)迫癥耿眉，嚴(yán)格要求自己不犯錯(cuò)才能減少返工边翼。大概切圖上需要注意的就這一點(diǎn)。干貨不是天天有鸣剪。趕快收藏吧组底。
最后感謝大家觀看本文章，字寫(xiě)的多筐骇，累了把债鸡。休息下眼睛，么么噠~
