ps切片工具怎么用

最近很多人問(wèn)到切片時(shí)為什么會(huì)切出分隔符，要不要管它，怎樣切才不會(huì)出現(xiàn)分隔符，于是特意去各種百度了一下，有的人說(shuō)分隔符是其骨架，當(dāng)你切復(fù)雜了就會(huì)出現(xiàn)，無(wú)法避免，有的說(shuō)是因?yàn)榍衅瑳](méi)對(duì)齊沒(méi)切好才產(chǎn)生的，然后我去實(shí)驗(yàn)了一下，得出結(jié)論：就是你門丫沒(méi)切好嘛。。。。
長(zhǎng)話短說(shuō)，簡(jiǎn)單介紹一下切片要注意的地方和技巧，再分享幾個(gè)切片的方法和與其相關(guān)的代碼問(wèn)題。
看到?jīng)]，簡(jiǎn)單粗暴的切片神器

1先在你要切的地方拉好參考線

2切換到“切片工具”

3毫不客氣的點(diǎn)擊它一下

切好了，有木有，有的同學(xué)會(huì)問(wèn)，其中有的我不想切開(kāi)呀，怎么辦？

切換到“切片選擇工具”選中你要的合并的切片，選擇組合切片

想怎么合就怎么合，切出來(lái)的就是沒(méi)有分隔符

然后選擇存儲(chǔ)為WEB格式，高版本的ps在這沒(méi)有全選功能了，但可以縮小后拉框選中全部，此時(shí)再看一眼格式是不是你想要的，jpg格式品質(zhì)60差不多就可以了，牌一個(gè)畫質(zhì)好，體積又小的臨界點(diǎn)

接著，你可能會(huì)遇到以下問(wèn)題：
問(wèn)：我圖片大，要切的很多呀，這要是一個(gè)一個(gè)點(diǎn)選去組合，那不是要了親命嘛！
答：對(duì)于切片太多的問(wèn)題，由于ps的切片選擇工具不能框選，那我們可以將其存為psd格式，然后用AdobelmageReady 打開(kāi)
底版本ps有一鍵轉(zhuǎn)移功能，大致在這個(gè)位置 切好后再轉(zhuǎn)回ps保存為WEB格式（注imageready只能保存為GIF格式）
問(wèn)：我圖片復(fù)雜的要命呀，有的已經(jīng)變態(tài)到無(wú)法下手的地步了-,-
答：針對(duì)于這種變態(tài)的布局，我們的方法是：。。。。。用熱點(diǎn)。
問(wèn)：我圖片又大又用熱點(diǎn)影響加載速度呀喂??！
答：規(guī)矩的，簡(jiǎn)單的，切幾刀，然后再加熱點(diǎn)。。。
問(wèn)：我不會(huì)這些基礎(chǔ)代碼呀，怎么辦？
答：學(xué)
然后，分享幾個(gè)高級(jí)刀法：
嵌套刀法：適用于而已看似無(wú)規(guī)律實(shí)則有規(guī)律自己惶恐規(guī)律
如瀑布流，發(fā)現(xiàn)豎向是統(tǒng)一的，橫向錯(cuò)開(kāi)了，那我們可以先不管橫向，先把豎向切成六大塊，保存為HTML格式，再橫向分六次依次把圖片切開(kāi)，然后將此次切開(kāi)的TABLE標(biāo)簽里的內(nèi)容放入第一次豎向切好的對(duì)應(yīng)TR標(biāo)簽里，用這種嵌套的方法可以化繁為簡(jiǎn)而且絕對(duì)不會(huì)出現(xiàn)擾人的分隔符。

隨意落刀法：適合有個(gè)別圖片相互錯(cuò)開(kāi)但整體不太亂的布局
不必被圖片的邊框拘泥，我們只是要把圖片切開(kāi)以便上鏈接，那一刀下去不小心把另一張圖片給切了一點(diǎn)也無(wú)妨，只要不太影響另一張圖片的點(diǎn)擊即可，如果那張圖片壓根就不用上鏈接的話，那就肆無(wú)忌憚的切切切吧
管你三七二十一刀法：適合亂到?jīng)]節(jié)操，節(jié)操粉碎性骨折永久性脫落的布局
太亂了就沒(méi)必要切了，加熱點(diǎn)吧，如果圖片太大就切幾刀規(guī)則的把它切小點(diǎn)再DW里添加熱點(diǎn)。

最后，再分享一個(gè)貫穿全文的小技巧
在做一些不是太大的圖片的時(shí)候，我們可以不需要把圖片切開(kāi)，例如做淘寶帶導(dǎo)航的店招時(shí)，很多同學(xué)會(huì)把導(dǎo)航每個(gè)分類都切一下，然后再用表格或者DIV框起來(lái)。
這種方法切的小圖整體加起來(lái)的體積其實(shí)是大于切豐一起的體積的，而且如果在加載的過(guò)程中有一張圖片破了，那將會(huì)影響整體布局，客戶體驗(yàn)度將大打折扣
所以我們的方法是將圖片在ps里畫好切片后，選中所有切片框，右鍵點(diǎn)擊：編輯切片選項(xiàng)。

切片類型選擇：無(wú)圖像

然后在文本中敲上幾個(gè)空格，務(wù)必做這一步否則將出現(xiàn)分隔符

然后我們選擇保存為HTML格式，選擇圖像和HTML的話也只產(chǎn)生一個(gè)HTML文件，然后把這個(gè)HTML文件用DW打開(kāi)，你將得到一個(gè)沒(méi)有圖片的表格框架，如下圖


接著我們給這個(gè)TABLE加一張背景圖片，就是我們剛剛沒(méi)有切開(kāi)的那張圖片

最后在設(shè)計(jì)模式里鼠標(biāo)占先中對(duì)應(yīng)要添加鏈接的那個(gè)框框，然后到代碼模式，鼠標(biāo)就選中了其相對(duì)代碼所在的位置，接著把鏈接地址復(fù)制進(jìn)去就行了。

大家如果仔細(xì)觀察就會(huì)發(fā)現(xiàn)，很多大型網(wǎng)站就是用這種方法做的，將一些零散的小圖片放在同一張圖片里，再用CSS定位顯示，可以提高頁(yè)面的加載速度，提高客戶體驗(yàn)，如下圖

以不變應(yīng)萬(wàn)變，找到最適合自己的方法，往往能事半功倍。