怎么使用PS切圖？PS切圖后怎么保存到本地？

　　怎么使用PS切圖？使用PS切圖的目的其實就是將大的設(shè)計圖分割成多個小圖片，通過網(wǎng)頁代碼定位后臺相冊的照片來顯示前端網(wǎng)頁的效果，當(dāng)然，在處理某X寶的圖片的時候也是可以使用該方法的，具體見下文怎么使用PS切圖的。

　　早年間我學(xué)切圖的時候，網(wǎng)上就沒看到過什么教程的，只能靠自己摸索學(xué)習(xí)，挺簡單的東西還是繞了點彎子。這次寫出來應(yīng)該會幫助其他人學(xué)會切圖的。

　　教程中使用的軟件、工具：

　　Dreamweaver CS6 下載

　　怎么使用PS切圖？

　　1、先說下軟件，我用的是PhotoShop CS5 這個版本，你要用其他版本也行，反正對切圖這個功能影響不大。

　　2、如上圖紅框所示，我們要用到的切圖工具有兩個，一個是切片工具，另一個是切片選擇工具。左邊有個小按鈕，你按住它這三個選項就會顯示出來。

上圖是我等下用做示范的圖片

　　4、在切圖之前有一點需要說明的是，如果你需要輔助切圖，你可以先添加參考線。在PS上方的菜單欄，你可以在視圖里找到新建參考線選項。如上圖，我已經(jīng)添加兩條參考線，因為參考線在鼠標(biāo)靠近的時候有吸附功能，所以切圖不容易切錯位置。

　　5、好了現(xiàn)在我們開始切圖，我用切圖工具先裁一個框出來，我們可以看到圖片上已經(jīng)有01的框，但是右邊02顯示為灰色。

　　6、我繼續(xù)用切圖工具裁第二個框，記住01和02的框一定要貼合，否則會出現(xiàn)一個03的框。如果你這次切圖位置沒切對，可能給后面帶來麻煩的是換圖片會比較麻煩。這個時候切圖的框是可以移動的，你可以把鼠標(biāo)放在邊框上試著移動下，看下效果。你只能移動02，不能移動01。

　　7、當(dāng)我發(fā)現(xiàn)切圖的位置出現(xiàn)錯誤，開始調(diào)整，剛才我把02位置往右挪好，它從02變成了03。

　　8、然后我用切圖選擇工具選擇01，這樣我就能把01的位置調(diào)整正確了。

　　PS切圖后怎么保存到本地？

　　1、切好圖之后就到最重要的步驟了，如上圖所示，選擇文件下面的存儲為WEB和設(shè)備所用格式，最好能記住快捷鍵。

　　2、圖片格式為JPEG，它就是JPG，一樣的。關(guān)鍵是品質(zhì)的設(shè)定，我們都知道如果一張圖片越大它在網(wǎng)上打開的速度就越慢，當(dāng)我們把圖片的品質(zhì)設(shè)的越小，它的大小就越小，但是如果品質(zhì)太差，圖片會變模糊，所以一般情況下如果是網(wǎng)上使用的圖片，品質(zhì)可以設(shè)置60，既保證圖片較小也不會模糊。這個數(shù)值由你自己設(shè)置，是大是小，具體看你的要求，試試就知道了。這里有個問題是你只是對其中一個切片設(shè)置品質(zhì)，其他切片又要重新設(shè)置，所以存的時候最好檢查一下。

　　3、前面設(shè)置好后點擊存儲會顯示以上界面。格式選項選擇HTML和圖像，默認(rèn)是圖像的，這樣我們就能得到網(wǎng)頁代碼了。

　　4、存好后得到一個圖片文件夾和一個網(wǎng)頁，你看到的網(wǎng)頁圖標(biāo)可能跟我這個不一樣，這個沒有關(guān)系，因為我們的瀏覽器不一樣。

　　用DreamWeaver軟件打開這個網(wǎng)頁看到如上界面，我們需要的就是大紅框中<table...</table>這段代碼，待會拷貝到網(wǎng)頁的后臺里去的。拷貝之前要先把圖片地址換一下，先把剛才那個images文件夾里的圖片上傳到網(wǎng)頁后臺圖片空間里去，再復(fù)制圖片的網(wǎng)絡(luò)地址替換上圖小紅框里的那個地址。替換的原因是，PS存的圖片地址是你電腦上的，在網(wǎng)絡(luò)上無法使用，只有你把圖片上傳到網(wǎng)上別人才會看的到。

　　以上便是教用戶怎么使用PS切圖的教程，各類網(wǎng)頁在制作之前，一般都需要使用切圖操作，切圖的目的也就是更加精確的進(jìn)行網(wǎng)頁布局。