1. 程式人生 > >ps-前端切圖

ps-前端切圖

ps兩條參考線之間的距離

1:選中工具欄上的”選區工具“。(圖片為參考)


2:直接畫出一個參考線距離大小的選框即可知道距離 。

補充:W為寬度,也就是距離,英文是:width


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

一、ps新建介面設定

1. 建立操作頁面設定ctrl+N(注意WH1920*1080的單位為畫素)


2. 移動工具設定(左側工具欄中的第一個;主要操作圖層)


注意這裡的選項設定(一定要為圖層)

Ctrl+圖層 ;滑鼠按在所要移動的圖層上就可移動圖層,並在右側視窗區可顯示所選的圖層

ctrl+t;全選圖層可檢視圖層的寬高

右側導航欄可看到我們選擇的圖層

ctrl+j;複製圖層

在圖層上右鍵-->圖層快速匯出為png就可以得到我們想要的圖片

3. 檢視設定

在最上面導航欄中有檢視按鈕:除了預設的以外還需要操作最重要的兩個

    1.     檢視-->顯示-->智慧參考線

    2.     檢視-->標尺(ctrl+r)會在我們的操作區出現像尺子一樣的刻度

4.視窗對右側區域顯示的勾選

              主要(可將這些新增到右側視窗區,直接點選移動即可):

                    1.     視窗-->資訊

                    2.     視窗-->字元

                    3.     視窗-->歷史記錄

     

設定完資訊之後(所選區域的寬高ctrl+t)

5.編輯設定

編輯-->首選項-->單位與標尺

二、psd練習檔案

圖片:https://pan.baidu.com/s/1ZysEVEPF3UviCrpr-6JfEw

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

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

https://pan.baidu.com/s/1CMtTdeuCMcKkdE4l9gWB4Q

開始(直接將我們的.psd圖在ps中開啟)

一、傳統的切圖方法

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


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

縮小圖片:“CTRL”+ “-”

標尺線:ctrl+r

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

2.修改參考線

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

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

沒有參考線的可能是參考線被隱藏了,通過“CTRL”+ “;”就可以顯示出來

(製圖軟體所以滑鼠沒有變,自己操作的時候滑鼠會變成黑色的)


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

3.選擇要切的圖示

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


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

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

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

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

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


4.切片需要的圖示

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

圖示的切出需要將除了圖示外的其他圖層都為透明


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

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

左上角為藍的的為:使用者切片(我們需要的)

左上角為暗色的為:非使用者切片

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

5.將切片儲存為圖片

①選擇 “檔案”-->“匯出”-->“儲存為Web所用格式”

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


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

或shift+選擇我們所需要的切片


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


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

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

匯出切片的三種格式使用說明:

png :支援背景透明(需要對圖片背景操作可用此,較小)

jpg:一般的常用圖片

gif:動態圖(顏色較單一)

三、ps的基本操作

1.移動工具

對圖層對齊方式的操作視窗區域中ctrl+選擇多個圖(在右側層可看到圖層的對齊的效果)

2.選取工具 快捷鍵M

Shift+M;矩形與圓形選區工具的切換。Shift增加選取,alt減少選取

按住shift選擇區域所選的區域將變成正方形/圓型(注意先放滑鼠鍵再放shift),alt滑鼠所在的位置為圓心,shift+alt以滑鼠所在的位置為圓心選擇圓形選擇區

3.套索工具也是選取工具(不規則選取)快捷鍵L

4.快速選取工具快捷鍵W

5.裁剪工具快捷鍵C

快速裁剪選取:移動工具ctrl+點選圖層;在視窗欄所選圖層上面的文字區ctrl+左鍵;在裁剪,就可將我們所需要的裁剪下來

6.汙點修復畫筆工具快捷鍵J

顏色填充alt+delete

背景色填充ctrl+delete


如有不足請多多指教!希望給您帶來幫助!