前端開發人員也要會的切圖技巧(一)

UI給我們設計圖的時候都會有一份設計原稿psd檔案，有的公司可能UI會把需要的圖示給切好，更多時候是需要我們自己來切的。而且，有的時候可能需要的東西UI沒有切出來，你就要去是去找UI切好了再發給我們，這個過程就變得很麻煩，所以不如自己學一些切圖方法

沒有psd檔案的，我這裡準備了一份，需要的可以去下載

psd練習檔案

http://pan.baidu.com/s/1pL2dwL1

工具：一、二是用photoshop cs6演示的，三是用photoshop cc 2015演示的，一二中的方法兩個版本的軟體都可以實現，三中的方法cc才能實現，所以建議大家下載photoshop cc 2015

沒有photoshop，這裡準備了photoshop cc 2015的安裝包和破解工具，具體安裝和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT

---

開始

一、傳統的切圖方法

我們先介紹一個傳統的切圖方法
使用範圍：需要切多張圖，帶背景的

---

1.開啟下載的psd檔案

出現下面沒關係，直接點確定即可

開啟後，因為檔案比較長所以看不清細節，所以我們要放大圖片到合適的大小。
放大圖片：”CTRL” +“+”
縮小圖片：“CTRL”+ “-”

然後我們來認識下photoshop中的一些工具

---

2.修改參考線

我們可以看到我們的圖片中很多條藍色的參考線，這些線是設計人員用來設計用的，有的檔案中的線會直接把我們需要切的東西給包裹出來，但是像我們練習的這個檔案中的參考線特別的多，特別的密集，很多我們都不需要，所以我們先把這些參考線都清除掉。

刪除參考線：選擇移動工具，然後把要刪除的參考線往標尺上拖，往上或者往左都可以

沒有參考線的可能是參考線被隱藏了，通過“CTRL”+ “；”就可以顯示出來
（製圖軟體所以滑鼠沒有變，自己操作的時候滑鼠會變成黑色的）

我們只要把擋住圖示的參考線給刪除就可以

---

3.選擇要切的圖示

這裡我們就切幾個頁面上的圖示，文字部分我們都可以通過程式碼來實現，所以就不切了。

①選擇工具欄第一個“移動工具”

②然後檢視上面選項欄“自動選擇”有沒有被選中，沒有被選中點選選中，將它旁邊的“組”改為“圖層”，這樣我們點選圖示的時候，右下角的圖層皮膚就能自動的選中對應的圖層

③點選我們要切的圖示，然後到右下角的圖層皮膚，點選當前選中的這個圖層旁邊的小眼睛來隱藏當前圖層，通過顯隱來確定是不是我們要切的圖示

④確認了我們要切的圖示後，分別從水平標尺和豎直標尺的地方拉取參考線來把圖示給包裹住。因為我們當前選中的就是我們要切的圖層，所以當參考線拖過去的時候會自動吸附到圖示的邊緣。

⑤用同樣的方法把圖示都用參考線包裹出來，最下面一排，要把圖示切成一樣高的才好，所以以第一個的上邊界和下邊界為基準。

---

4.切片需要的圖示

現在，我們已經用參考線把我們的圖示給包裹出來了，下面，我們要用切片工具來切出我們的圖示

①選擇切片工具，左邊工具欄從上往下數第五個，然後右鍵就可以找到，然後選中

②然後找到我們剛才用參考線包裹的圖示，從左上角一直拖到右下角，因為有參考線的幫助，所以軟體能夠自動吸附到參考線上，所以只要大概找準左上角和右下角就可以選取出來

③用同樣的方法把剩下的都選取出來

---

5.將切片儲存為圖片

①選擇 “檔案”=》“儲存為Web所用格式”

②調整縮放比例，讓圖片能完整的在視窗顯示

③在視窗中，從左上角一直拖到右下角，選中所有切片，這樣我們才能把切片都儲存為我們想要的格式

④儲存為png-24格式，png-24格式的圖片質量比較高

⑤儲存，選擇使用者所有切片可以只儲存我們自己切出來的切片

⑥然後檢視儲存的檔案裡面就多了一個images資料夾，裡面就是我們切出來的圖片

---

但是這樣做會發現png格式的背景還是有的，而且如果只是需要一張圖的時候，還要這樣切就會比較麻煩，所以(二)中會介紹一些切一兩個小圖示的方法