作者：JowayYoung
倉庫：Github、CodePen
博客：掘金、思否、知乎、簡書、頭條、CSDN
公衆號：IQ前端
聯繫我：關注公衆號後有我的微信喲
特別聲明：原創不易，未經授權不得對此文章進行轉載或抄襲，否則按侵權處理，如需轉載或開通公衆號白名單可聯繫我，希望各位尊重原創的知識產權
系列
前言
話說，以前的前端工程師在入行時都當過切圖仔或切圖女。曾經，切圖作爲前端一門基礎且必備的技能，不知何時開始已經不再提起。很多面試官在招聘時都忽略了PS的存在，其實在國外一位優秀的前端工程師是包攬設計工作的，PS玩得可溜呢。
現在大部分的前端工程師都說，這個圖讓設計師去切吧，這個圖標這樣這樣切，那個背景圖抽離出來，要這層不要那層。說多了感覺會被設計師拿刀砍死，就像下面那樣。。。
有時候設計師切出來的效果可能是下圖左邊醬紫的，但是你期望的切圖效果可能又是下圖右邊醬紫的。爲什麼會存在這種差異呢，我曾經當過大半年的UI設計師，從設計師的角度來看，沒有過多考慮代碼對切圖的加成和代碼實現佈局的影響。
例如輪廓outline、外邊距margin、內邊距padding、圓角border-radius、 盒子陰影box-shadow、濾鏡filter、行高line-height、文字陰影text-shadow等CSS屬性在PS上的表現還是會存在差異的，標準不一，設計師無法理解代碼裏的規範，開發者無法理解設計裏的規範，再加上各種圖層疊加效果以及融合變化，所以很難分離出開發者想要的效果。所以只有熟練操作PS才能分離出開發者想要的圖層及其效果，爲切圖規範標準化。
爲什麼今天我要把這個話題提出來呢，我只想說明有時候自己切出來的圖纔是自己想要的。如果不想像下面這樣，還是趕緊必備下幾個常用的切圖小技能吧。自己動手，豐衣足食，無可奉告，一邊玩去。
熱鍵
貼下切圖常用的快捷鍵，我對這些快捷鍵操作進行了分類，方便記憶，只需記住以下常用快捷鍵即可。
文件快捷鍵
- 退出程序：
ctrl/cmd + q - 打開文件：
ctrl/cmd + o - 關閉文件：
ctrl/cmd + w - 新建文件：
ctrl/cmd + n - 保存文件：
ctrl/cmd + s - 保存副本：
ctrl/cmd + alt + s - 保存其他：
ctrl/cmd + shift + s - 保存切圖：
ctrl/cmd + shift + alt + s
工具快捷鍵
- 移動工具：
v - 選框工具：
m - 套索工具：
l - 魔棒工具：
w - 切片工具：
c - 吸管工具：
i - 修復工具：
j - 畫筆工具：
b - 圖章工具：
s - 歷史工具：
y - 橡皮工具：
e - 漸變工具：
g - 減淡工具：
o - 鋼筆工具：
p - 文字工具：
t - 路徑工具：
a - 矩形工具：
u - 抓手工具：
h - 縮放工具：
z
編輯快捷鍵
- 複製：
ctrl/cmd + c - 剪切：
ctrl/cmd + x - 粘貼：
ctrl/cmd + v - 撤銷：
ctrl/cmd + z - 向後撤銷：
ctrl/cmd + alt + z - 向前撤銷：
ctrl/cmd + shift + z - 合併複製：
ctrl/cmd + shift + c - 原位粘貼：
ctrl/cmd + shift + v
選擇快捷鍵
- 全部選擇：
ctrl/cmd + a - 取消選擇：
ctrl/cmd + d - 重新選擇：
ctrl/cmd + shift + d - 反向選擇：
ctrl/cmd + shift + i - 羽化選擇：
ctrl/cmd + alt + d
視圖快捷鍵
- 放大視圖：
ctrl/cmd + + - 縮小視圖：
ctrl/cmd + - - 滿屏顯示：
ctrl/cmd + 0 - 實際顯示：
ctrl/cmd + 1 - 顯示隱藏標尺：
ctrl/cmd + r - 顯示隱藏網格：
ctrl/cmd + " - 顯示隱藏參考線：
ctrl/cmd + : - 顯示隱藏選擇區域：
ctrl/cmd + h
圖層快捷鍵
- 複製圖層：
ctrl/cmd + j - 合併圖層：
ctrl/cmd + e - 變換圖層：
ctrl/cmd + t - 新建圖層：
ctrl/cmd + shift + n - 查找圖層：
ctrl/cmd + alt + shift + f - 選擇全部圖層：
ctrl/cmd + alt + a
備註
- 每次切圖操作開始時，使用
ctrl/cmd + +/-縮放到想要的視圖大小 - 每次切圖操作執行時，使用
c切片工具對目標進行裁剪 - 每次切圖操作結束時，使用
ctrl/cmd + shift + alt + s保存切圖 - 很多切圖技巧都是靠平時積累，快捷鍵靠多記多用，用得多自然會順手
- 遇到難以分離的圖層，最好問問設計師實現原理是怎樣的，再一步一步解鎖圖層
- 不要老是吐槽設計師切得不好切成自己不想要的，想要規範的切圖自己動手來切
- 切圖需要細心，1px都要切好，不要隨便切切，細節決定成敗，也是體現工作質量的表現
- 每次切圖完成都不要保存，可通過歷史記錄回到文件打開的最初狀態，重新裁剪下一個切片
- 以下技巧裏提到的元素通通指一個切片集合(可由單個圖層、多個圖層、單個圖層部分、多個圖層部分組成)
技巧
快速選擇單個圖層
- 場景：單個元素選擇(單圖層組成的圖標、按鈕、背景圖)
- 準備：首次使用時先配置
- 移動工具(v) → 勾選
自動選擇→ 選擇圖層
- 移動工具(v) → 勾選
- 步驟
- 選擇目標：
alt+ 左擊目標 (移步到圖層視圖，此時已選中所需圖層) - 隱層圖層：
alt+ 左擊當前圖層的顯示圖標(此時已在透明前景色顯示目標)
- 選擇目標：
快速選擇複合圖層
首次使用時需配置：同上
- 場景：複合元素選擇(多圖層組成的圖標、按鈕、背景圖)
- 準備：首次使用時先配置
- 移動工具(v) → 勾選
自動選擇→ 選擇圖層
- 移動工具(v) → 勾選
- 步驟
- 選擇目標：
alt+ 左擊目標 (移步到圖層視圖，此時已選中所需圖層) - 選擇圖層：
ctrl/cmd+ 左擊圖層 (選中所有需要合併的圖層) - 合併圖層：
ctrl/cmd + e(生成新的目標圖層) - 隱層圖層：
alt+ 左擊當前圖層的顯示圖標(此時已在透明前景色顯示目標)
- 選擇目標：
快速複製切片副本
- 場景：同尺寸元素收集
- 步驟
- 複製切片：
alt+ 左擊切片 (拖動切片副本到下一個目標上)
- 複製切片：
快速微調切片位置
- 場景：切片位置錯位需糾正
- 步驟
- 1px微調：方向鍵
- 10px微調：
shift+ 方向鍵
快速均分等量切片
- 場景：精靈圖均分、大尺寸圖片均分
- 步驟
- 劃分切片：右擊切片 → 選擇
劃分切片 - 調整網格：輸入水平/垂直劃分數量
- 劃分切片：右擊切片 → 選擇
快速讀取樣本顏色
- 場景：顏色獲取
- 步驟
- 打開吸管工具：
i(點擊需要獲取顏色的位置) - 切換色彩面板：
F6(色彩面板已打開可忽略此步驟) - 獲取顏色：左擊前景色 (直接複製粘貼)
- 打開吸管工具：
快速讀取文字信息
- 場景：文字信息獲取
- 步驟
- 打開文字工具：
t - 定位文字：左擊文字 (點擊時需要點中文字中間的位置，否則可能生成新的文字圖層)
- 切換文字面板：
F6(文字面板已打開可忽略此步驟)
- 打開文字工具：
快速取消圖層關聯
- 場景：圖層關聯起來無法單獨分離
- 步驟
- 定位圖層：鼠標挪到目標圖層和關聯圖層的中間 (移步到圖層視圖中處理)
- 取消關聯：
alt+ 左擊兩圖層中間 (出現解鎖關聯圖標時點擊)
快速自動切取圖標
- 場景：大量圖標分離
- 準備：首次使用時先配置
- 編輯 → 首選項 → 增效工具 → 勾選
啓用生成器 - 重啓PS
- 文件 → 生成 → 圖像資源
- 以後步驟命名圖層/組後自動生成切片(無需理會)
- 編輯 → 首選項 → 增效工具 → 勾選
- 步驟
- 自動保存JPG：圖層/組使用
xxx.jpg命名(調整圖片質量需在後綴加上數字，如60%質量的切片命名爲xxx.jpg6) - 自動保存PNG：圖層/組使用
xxx.png8或xxx.png24命名 - 自動保存SVG：圖層/組使用
xxx.svg命名 - 自動保存倍數圖：圖層/組使用
[email protected]、[email protected]命名
- 自動保存JPG：圖層/組使用
快速批量處理圖片
- 場景：大批量無腦操作圖片處理
- 準備：首次使用時先記錄動作樣本
- 動作面板(
F9) → 新建動作 → 錄製動作(操作一波切圖流程) → 停止記錄
- 動作面板(
- 步驟
- 選擇批處理：
文件→自動→批處理 - 選擇處理動作：1
- 選擇源文件：2
- 選擇輸出文件：3
- 選擇批處理：
[圖片上傳失敗...(image-9c2a3f-1576203938389)]
快速扣取毛髮背景
- 場景：包含毛髮的背景分離
- 步驟：稍微複雜，直接貼教程
注意
Photoshop儘量使用CC版本才能享受以上全部技巧，新版本可通過Adobe Creative Cloud來進行管理(安裝和更新)，還可以配合其他Adobe軟件一起使用。安裝和破解的教程就不出了，網上一搜一大堆，都是傻瓜式的安裝和破解。
在這裏推薦一個PS第三方增強工具：像素大廚(必須下載了PS才能使用)，如果不需要切圖只需要量取一些標註信息，使用它更快更方便，輕量級的應用，值得一用！
總結
寫到最後總結得差不多了，如果後續我想起還有哪些遺漏的PS切圖技巧，會繼續在這篇文章上補全。
最後送大家一個鍵盤！
(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["Bs","Tab","Caps","Enter"][p++]||'Shift',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)()
結語
❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創作更好的文章
關注公衆號IQ前端，一個專注於CSS/JS開發技巧的前端公衆號，更多前端小乾貨等着你喔
- 關注後回覆
關鍵詞免費領取視頻教程 - 關注後添加
我微信拉你進技術交流羣 - 歡迎關注
IQ前端，更多CSS/JS開發技巧只在公衆號推送
