PS切圖

內容：

1.PS安裝與基本使用

2.PS切圖(只介紹最基礎的切圖方法)

 

 

 

參考：https://www.imooc.com/learn/506

 

1.PS安裝與基本設置

(1)什麼是PS

Adobe Photoshop，簡稱「PS」，是由Adobe Systems開發和發行的圖像處理軟件。

Photoshop主要處理以像素所構成的數字圖像。使用其衆多的編修與繪圖工具，能夠有效地進行圖片編輯工做。ps有不少功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及

 

(2)PS破解安裝

安裝包下載：https://pan.baidu.com/s/1VFTaZEtiplVeYC12ypoZsw 密碼：85di

 

(3)基本設置

ps界面設置：

點擊新建，而後選擇以下：

選擇完以後能夠選擇存儲預設(存儲選擇下次直接用)，而後點擊肯定便可 ，以後會出現以下畫面：

而後咱們能夠使用打開，打開一個psd文件，以下所示：

 

移動工具設置：

移動工具就是PS快捷鍵中的第一個工具：

 

視圖設置：

在視圖選項中選擇顯示，而後勾選上智能參考線，另外還要在視圖中勾上標尺

 

其餘設置：

把右上角的一大堆東西關閉只留下如下四個(沒有的在視圖中找)：

設置信息的面板選項，選中信息，點擊右上角，選中面板選項設置以下所示：

設置編輯中的首選項中的單位與標尺中的單位均爲像素：

 

 

2.PS切圖

(1)前端爲何要學切圖

UI給咱們設計圖的時候都會有一份設計原稿psd文件，有的公司可能UI會把須要的圖標給切好，更多時候是須要咱們本身來切的。並且，有的時候可能須要的東西UI沒有切出來，你就要去是去找UI切好了再發給咱們，這個過程就變得很麻煩，因此不如本身學一些切圖方法 

 

(2)切圖的目的

從psd文件中獲取咱們想要的資源

 

(3)選中切圖的目標

刪除多餘的參考線：

上面的圖片中不少條藍色的參考線，這些線是設計人員用來設計用的，有的文件中的線會直接把咱們須要切的東西給包裹出來，可是像咱們練習的這個文件中的參考線特別的多，特別的密集，不少咱們都不須要，因此咱們先把這些參考線都清除掉

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

一次性刪除全部參考線：選擇視圖中的清除參考線選項便可

沒有參考線的多是參考線被隱藏了，經過「CTRL」+ 「；」就能夠顯示出來 

選擇要切的圖標：

①選擇工具欄第一個「移動工具」 

②而後查看上面選項欄「自動選擇」有沒有被選中，沒有被選中點擊選中，將它旁邊的「組」改成「圖層」，這樣咱們點擊圖標的時候，

右下角的圖層面板就能自動的選中對應的圖層 

③點擊咱們要切的圖標，而後到右下角的圖層面板，點擊當前選中的這個圖層旁邊的小眼睛來隱藏當前圖層，經過顯隱來肯定是否是咱們要切的圖標 

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

⑤用一樣的方法把圖標都用參考線包裹出來，最下面一排，要把圖標切成同樣高的纔好，因此以第一個的上邊界和下邊界爲基準

 

(4)切出圖標

如今，咱們已經用參考線把咱們的圖標給包裹出來了，下面用切片工具切出圖標 

①選擇切片工具，左邊工具欄從上往下數第五個，而後右鍵就能夠找到，而後選中其中的切片工具

②而後找到咱們剛纔用參考線包裹的圖標，從左上角一直拖到右下角

由於有參考線的幫助，因此軟件可以自動吸附到參考線上，因此只要大概找準左上角和右下角就能夠選取出來 

 

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

 

(5)保存切圖

①選擇 「文件」=》「存儲爲Web所用格式」 

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

③在窗口中，從左上角一直拖到右下角，選中全部切片，這樣咱們才能把切片都存儲爲咱們想要的格式 

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

 

⑤保存，選擇路徑保存圖片，保存完畢查看圖片，查看保存的文件裏面就多了一個images文件夾，裏面就是咱們切出來的圖片 

保存的設置以下：

保存完查看以下：