靈活運用PS切圖技巧

做者：JowayYoung
倉庫：Github、CodePen
博客：官網、掘金、思否、知乎
公衆號：IQ前端
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權

系列

• 靈活運用CSS開發技巧 請戳這裏，持續更新
• 靈活運用JS開發技巧 請戳這裏，持續更新
• 靈活運用PS切圖技巧 請戳這裏，持續更新

前言

話說，之前的前端工程師在入行時都當過切圖仔或切圖女。曾經，切圖做爲前端一門基礎且必備的技能，不知什麼時候開始已經再也不提起。不少面試官在招聘時都忽略了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) → 勾選自動選擇 → 選擇圖層
• 步驟
  • 選擇目標：alt + 左擊目標 (移步到圖層視圖，此時已選中所需圖層)
  • 隱層圖層：alt + 左擊當前圖層的顯示圖標 (此時已在透明前景色顯示目標)

快速選擇複合圖層

首次使用時需配置：同上

• 場景：複合元素選擇(多圖層組成的圖標、按鈕、背景圖)
• 準備：首次使用時先配置
  • 移動工具(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命名
  • 自動保存倍數圖：圖層/組使用xxx@2x.png、xxx@3x.png命名

快速批量處理圖片

• 場景：大批量無腦操做圖片處理
• 準備：首次使用時先記錄動做樣本
  • 動做面板(F9) → 新建動做 → 錄製動做(操做一波切圖流程) → 中止記錄
• 步驟
  • 選擇批處理：文件 → 自動 → 批處理
  • 選擇處理動做：1
  • 選擇源文件：2
  • 選擇輸出文件：3

快速扣取毛髮背景

• 場景：包含毛髮的背景分離
• 步驟：稍微複雜，直接貼教程

注意

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開發技巧只在公衆號推送