1. 程式人生 > >前端工程師必備的PS技能——切圖篇(筆記)

前端工程師必備的PS技能——切圖篇(筆記)

新建設定

自定義:(可儲存為預設)
寬度 1920畫素
高度 2000畫素(可改)
解析度 72畫素/英寸
顏色模式 RGB顏色
背景內容 透明

檢視設定

檢視-顯示-智慧參考線
檢視-標尺
視窗-關閉庫、顏色
視窗-資訊、字元

移動工具

選中某圖層後,可用來移動圖層。

勾上自動選擇,並選中圖層,可更加方便移動已有圖層。

按住ctrl鍵,在圖層上單擊滑鼠左鍵,可直接定位到選中的圖層。

選中一個圖層後,按住ctrl鍵,可再選中其它圖層,這樣,同時選中多個圖層,利用屬性欄中的設定進行設定。

矩形選框工具

ctrl+shift+alt+e:蓋印可見圖層。

工具的操作都是針對選區的內部。

選中矩形選框工具後,按住shift鍵,再點選滑鼠進行選區,可使區域變為正方形。
選中橢圓選框工具後,按住shift鍵,再點選滑鼠進行選區,可使區域變為圓形。
(一定要先放開滑鼠,再放開shift鍵才成立。)
滑鼠放在一點處,按住alt鍵可確定圓心再選擇橢圓區域或圓形區域。(選中橢圓選框工具+alt+shift,便可得到確定圓心的圓形區域。)

已經選中一個區域之後,按住shift鍵,再用滑鼠進行選區,會自動預設為增加選區。(先放開滑鼠,再放開shift鍵。)
按住alt鍵,再用滑鼠進行選區,便是減掉選區。(通用)

按住shift鍵,再按m,會在矩形選框工具的擴充套件中輪流切換。

套索工具

ctrl++:放大
ctrl+-:縮小
按住空格鍵,滑鼠可拖動圖片。

可進行不規則形狀的選區。

多邊形套索工具:通過滑鼠單擊來確定多邊形的每條邊。在多邊形沒有閉合之前雙擊滑鼠,便可自動使其閉合。
磁性套索工具:在選區時,它會根據顏色來進行一定的判斷,會盡量把選區的線吸附到顏色的色差之間。(對於摳不規則圖形比較方便)

快速選擇工具

單擊時,它會把相同顏色的部分選擇出來(可拖動)。

左右中括號或大括號可縮小放大工具。

選中區域後,右擊-填充-使用:內容識別-確定,便可使選中區域消失。

裁剪工具

框中某區域後,點選屬性欄中的對勾符號,(或者直接按回車鍵)便可使介面中只剩下框出來的部分。

用選區工具選中一定區域之後,再單擊裁剪工具,會圍繞選區選出一個最小的矩形(可包含選區內的所有畫素的最小矩形)。

關閉蓋印圖層,用選擇工具選擇圖層,再用滑鼠單擊所在圖層目錄部分,便可直接選中畫素,此時已經有選區,再用裁剪工具裁剪完成後,按住alt鍵,單擊圖層目錄部分的眼睛,會把其他圖層全部隱藏,只留下單獨一個圖層的顯影模式。

吸管工具

單擊圖片某處,便可檢視該部分的前景色。

汙點修復畫筆工具

在蓋印圖層當中進行。

可直接抹掉不想要的部分。

修復畫筆工具:直接點的時候,會要求我們找一個圓。按住alt鍵,在圖片某部分單擊之後,再放開alt鍵,移動滑鼠,便會發現在圈內會有剛剛選中的一小部分,將畫筆放大,點選滑鼠移動便可複製圈內那一小部分所屬的圖層,但鬆開滑鼠後,會給顏色一個羽化值,與原圖並不是完全相同。

修補工具
將要抹掉的部分框起來(可用上面的選區工具),然後按住滑鼠左鍵,往某個地方拖動,便可很融合的將要抹掉的部分用所拖動到的地方的圖補掉。

畫筆工具

可設定前景色,用畫筆塗成所需要的顏色,此時畫出的邊緣是融合的。
屬性欄中可調節畫筆的大小的硬度,當硬度調為100%時,畫出的邊緣就是很生硬的。

仿製圖章工具

按住alt鍵,在想要複製的圖層的中心單擊,然後在按住滑鼠左鍵畫,便可複製成功,這裡的複製,鬆開滑鼠後會與原圖完全相同。

圖案圖章工具:圖案就是ps中的一個庫,在屬性欄中可進行選擇。

歷史記錄畫筆工具

對一張圖進行一定處理之後,歷史記錄面板當中就會有一個個的歷史記錄。
將畫筆的源記錄到處理的某一步,再回到一開始的那一步,然後用歷史記錄的畫筆開始抹,畫過的地方都會進入到剛才歷史記錄畫筆源的那一部分,沒有畫到的地方就會保留之前的那一部分。

橡皮擦工具

顧名思義。
背景橡皮擦工具:可以把背景圖擦掉。
魔術橡皮擦工具:可以一下子擦掉一整塊。

漸變工具

在屬性欄中可以取顏色,修改漸變方式。

漸變的顏色順序是順時針的,把反向勾上就可改成逆時針。

模糊工具

將圖變模糊,更多用於照片修復。

銳化工具:會將圖變得很乾燥。

塗抹工具:例如,在睫毛上塗抹,可使睫毛變長。

減淡工具

將顏色減淡。
加深工具:將顏色加深。
海綿工具:相當於把顏料潑在了圖上,用海綿去吸。

傳統切圖

點選裁剪工具下的切片工具,選中一部分,便可使整個畫布變成兩個切片,可將切片拖動形成新的切片。
灰色部分是被動的切片,藍色的是我們主動拉出來的切片。
切片選擇工具:選擇已有切片,拖動切片。可做一些細調。

選中移動工具,可增加參考線,可選中圖層,拖動參考線的時候,會自動吸附上去。新增完參考線之後,再選擇切片工具,點選屬性欄中的,基於參考線的切片,就會自動變成切片,可將不需要的切片刪除。

可先用裁剪工具裁剪出來,再進行切片。

切好之後,匯出:檔案-儲存為web應用格式,就會生出一個模型,可選擇匯出哪種型別的圖片(用的比較多的是PNG-24),點選儲存,儲存,視窗消失就說明已經匯出完成。再去檢視匯出的資料夾,就可以看到匯出的所有切片。

精準切圖

利用Photoshop的指令碼,可進行一種計算機自動運算來切圖(自動化切圖),尺寸更加精確。

檔案-指令碼-將圖層匯出到檔案,可選擇不同的檔案型別,並且勾上透明區域,交錯,裁剪圖層。單擊執行,就可以自動裁剪圖層並匯出。

開啟資料夾可以檢視,會保留下陰影,每個裁剪下的圖層會自動命名,名字剛好就是圖層的名字。

自動切圖

編輯-首選項-增項工具,勾上啟用生成器(更改在下一次啟動Photoshop 時才會生效)。
檔案-生成-影象資源,會多出一個資料夾。選中某塊圖層後,給logo重新命名,若要匯出jpg格式的圖片,就在文字的後面.jpg,(jpg會預設為最佳品質,jpg8是80%的品質,以此類推)此時再去開啟剛剛多出的那個資料夾,就會發現我們需要的那一部分已經出現了,而且會把陰影那一部分全部裁剪出來。

抽出資源

首先找到logo。然後檔案-抽出資源,可以找到我們所需要的圖層,自己選擇想要抽出的格式。

複製CSS

外部引用的物件不能被複制。

圖層-複製CSS。開啟sublime,新建,貼上,便可將圖片的CSS程式碼複製過來。