靈活運用PS切圖技巧

時間 2019-11-05

標籤靈活運用技巧简体版

原文原文鏈接

系列

靈活運用CSS開發技巧(66個實用技巧) 請戳這裏，持續更新
靈活運用JS開發技巧(65個實用技巧) 請戳這裏，持續更新
靈活運用PS切圖技巧(11個實用技巧) 請戳這裏，持續更新

前言

話說，之前的前端工程師在入行時都當過切圖仔或切圖女。曾經，切圖做爲前端一門基礎且必備的技能，不知什麼時候開始已經再也不提起。不少面試官在招聘時都忽略了PS的存在，其實在國外一位優秀的前端工程師是包攬設計工做的，PS玩得可溜呢。html

如今大部分的前端工程師都說，這個圖讓設計師去切吧，這個圖標這樣這樣切，那個背景圖抽離出來，要這層不要那層。說多了感受會被設計師拿刀砍死，就像下面那樣。。。前端

有時候設計師切出來的效果多是下圖左邊醬紫的，可是你指望的切圖效果可能又是下圖右邊醬紫的。爲何會存在這種差別呢，我曾經當過大半年的UI設計師，從設計師的角度來看，沒有過多考慮代碼對切圖的加成和代碼實現佈局的影響。node

例如輪廓outline、外邊距margin、內邊距padding、圓角border-radius、 盒子陰影box-shadow、濾鏡filter、行高line-height、文字陰影text-shadow等CSS屬性在PS上的表現仍是會存在差別的，標準不一，設計師沒法理解代碼裏的規範，開發者沒法理解設計裏的規範，再加上各類圖層疊加效果以及融合變化，因此很難分離出開發者想要的效果。因此只有熟練操做PS才能分離出開發者想要的圖層及其效果，爲切圖規範標準化。git

爲何今天我要把這個話題提出來呢，我只想說明有時候本身切出來的圖纔是本身想要的。若是不想像下面這樣，仍是趕忙必備下幾個經常使用的切圖小技能吧。本身動手，豐衣足食，無可奉告，一邊玩去。github

熱鍵

貼下切圖經常使用的快捷鍵，我對這些快捷鍵操做進行了分類，方便記憶，只需記住如下經常使用快捷鍵便可。面試

文件快捷鍵segmentfault

退出程序：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` `)()
複製代碼