PS·web前端切圖（詳細）

記錄一下切圖的過程，主要分為兩部分。

• 切普通的圖片
• 切logo圖片

一、切普通的圖片

1.UI將設計圖給我們，設計圖的格式一般為psd。

2.開啟ps軟體–開啟–我們要切圖的psd檔案。

3.一般開啟psd檔案的時候，會有很多藍色的這種分割線，可以找到選單欄的檢視–清除參考線，之後藍色的分割線就消失了。

4.找到左側的鋼筆一樣的工具，右鍵點選，會出現四個選項，我們選擇切片工具選項，然後我們把圖片放大，可以按住alt,然後滾動滑鼠的滾動輪，實現變大還有變小。（放大圖片快捷鍵ctrl + =，縮小圖片快捷鍵是ctrl±），選擇我們要切圖的區域。

6.我們現在已經大概選擇好了我們要的區域了，再接著放大圖片，仔細看上下左右四條邊是不是都貼合著圖片的四邊，進行調整。
接著我們需要切這個psd檔案的另一區域的圖怎麼辦？
按住shift鍵再用同樣的方法去選擇另一部分，記住在大概選擇區域後，一定要放大圖片，仔細看邊緣是不是貼合。

7.現在我們選好我們需要的兩個區域了，現在需要儲存下來，選擇選單欄的檔案–儲存為Web所用格式（這裡一定要選對哦）
8.之後我們要選中我們剛才切圖兩個區域，點選選擇第一張，之後按住shift,再選擇第二張，然後右上角選擇自己需要的圖片格式，我這裡選擇的是png8格式的，現在選好了，選擇下面的儲存。

9.之後進入儲存的介面，選擇儲存切圖的位置，名稱，之後很重要的是最下面的切片選項，一定要選擇的是所選中的切片，不然的話就會有很多其他不需要的圖片也出現了。

10.現在已經完成了，我是儲存在桌面上，開啟桌面的images資料夾就可以看到我們切好的圖片了。

二、切logo圖片
切logo圖片和普通圖片基本是沒有什麼區別的，就是注意在切logo圖片之前要把背景去掉,怎麼去掉背景那，找到右面的圖層—最下面的背景，將小眼睛點掉，就是關掉了，然後會發現背景已經沒有了，因為logo我們是不要背景的，這個時候就可以去切logo了。