前端ps切圖，圖文教程，詳細。

阿新 • • 發佈：2019-01-20

寫在前面：本文主要內容是目前我所知道的切圖技巧結合網上的資料，寫出來分享一波。圖文教程，多圖！！

BB：很多人都會說，切圖這個活倒底分給UI還是分給前端。雖然好的UI會給我們把圖切好，但是他們切的圖不一定百分之百符合我們的需求，所以我一直都覺得這是頁面仔必須要會的一項技能，因為只有你自己才會知道怎麼切合適。況且這項技能根本一點都不難，所以還是自己動手豐衣足食比較好。

1.下載

我現在使用的版本號：PS-CS6，網上很多破解版本的自行搜尋下載。

2.安裝好PS之後，先要調整工作區域的佈局。

1.選擇“視窗”——把“資訊”，“圖層”，“歷史記錄”，“顏色”面板開啟，其他的可以先關閉了，在切圖的工作中其他的基本用不到，這個很簡單的，打幾個勾就可以了

，如下圖所示：

Paste_Image.png

工作區的內容

2.調整好面板之後，選擇“視窗”——“工作區”——“新建工作區”，將當前的工作佈局儲存起來，並命個名，之後下次開啟的時候就會直接出現你調整好的工作佈局，否則的話你每次重新開啟ps的時候都要重新設定。

ps：就算有別人弄亂了你的面板也可以直接通過“視窗”——“工作區”——選擇你之前儲存的工作佈局。

3.切圖

切圖需求：

這是我們需要切的圖

切圖步驟見圖

切圖步驟1.

選擇圖層的時候要先按住alt不放，然後再按滑鼠右鍵。

Paste_Image.png

　隱藏圖層。

Paste_Image.png

效果：

Paste_Image.png

　連續操作隱藏圖層(背景圖要隱藏乾淨)：

效果，以及接下的步驟（切線就是一根根淡藍色的線）

Paste_Image.png

儲存切片1

Paste_Image.png

儲存切片2

Paste_Image.png

儲存切片3

Paste_Image.png

被侷限的方法（原理是一樣的）：

這有侷限

踩坑經歷：

網上很多教程都說使用png格式就可以，卻並沒有說png-8或者是png-24，甚至有些教程告訴我使用png-8！在這裡分享一波，儲存切片必須使用png-24，因為我踩過坑了（/(ㄒoㄒ)/~~）

切出來的圖片對比：

Paste_Image.png

網頁效果對比：

後話：其實能把圖片切出來，能夠使用就可以了，這些都是小技能學會用了就可以了，不打緊的。明天寫一篇關於雪碧圖的合成方法，以及關於切圖的一些東西。

最後又到了觀眾朋友們最喜歡的求贊求關注環節：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援，感激不盡！
ps：如果希望我寫哪方面的文章可以在底下評論，或者是私信我，雖然寫的不好，但我就當這是記錄自己成長的一種方式咯。（前提是我會了，如果不會我也會記下來，等會了的時候再更出來。）
**簡書主頁連結，

前端ps切圖，圖文教程，詳細。

1.下載

2.安裝好PS之後，先要調整工作區域的佈局。