前端實戰(一)-----用ps把PSD切成HTML能用的圖片

張小凡vip發表於2016-01-26



本章實際操作使用ps來進行切圖,分成四部分來講解:

1.切圖的常規步驟

2.如何只保留某一部分

3.刪除切片

4去掉預設切片線



切圖的常規步驟

我現在有一張登入框的psd,拿到psd後首先要思考怎麼構圖。也就是切圖的思路。我這裡只是演示步驟,所以就不詳細推理了。




在工具欄中選擇切片工具



然後用切片工具畫出三個部分,如果覺得切片工具不好畫的話 可以右鍵切片 編輯切片 直接輸入引數。



點選檔案----》儲存為web和裝置所用格式



這裡可以調節一些引數和圖片格式,或者直接點選儲存並選擇儲存路徑即可。




儲存後到儲存的路徑看到我們的3個切片已經有了





如何只保留某一部分

我們上面已經瞭解了正常的流程,不過有時候我們需要某一部分的圖片,不能一次性全部切好。比如我們需要藍色按鈕單獨作一張圖片。那怎麼單獨切出這個按鈕呢。

步驟如下:

選擇切片工具,畫出按鈕。



檔案--》儲存為web和裝置所用格式,關鍵是在調節頁面的時候 需要點選選中按鈕部分。然後點儲存。



選擇好路徑後 選擇 只輸出 選中切片 也就是隻輸出 按鈕。



結果資料夾中就只輸出了按鈕圖




ps:這裡只是演示步驟,正規流程中 按鈕這些單獨的圖層 最好使用 圖層切片,這樣得到的圖才是最完整無混合邊界的圖。

步驟是 在右側圖層皮膚中選中圖層 ----》選取圖層---》新建基於圖層的切片




刪除切片

在畫切片的時候 經常有畫錯的時候, 除了後退之外我們還可以刪除切片。

對著切片直接右鍵可以看到 刪除切片。 

僅僅是使用者切片才能 使用 刪除切片。

非使用者切片的刪除切片是灰色的。只能先右鍵點選提升為使用者切片之後才能刪除。

所謂的使用者切片就是 我們畫的切片,非使用者切片是我們畫了一部分之後 系統補充的另一部分。






去掉預設切片線

前面我們講到刪除切片 只能刪除使用者切片  那麼系統預設的切片 和 切片線應該怎麼去掉 刪除呢。

檢視-----》清除切片即可。





相關文章