Web前端學習筆記——CSS之Photoshop切圖
Photoshop基本使用
PS介面組成:
ctrl + r 顯示隱藏標尺 右擊 標尺 — 把裡面的單位一律改為畫素
ctrl+ d 取消選區
選單欄、選項欄、工具欄、浮動面板(拖拽名稱,可單獨操作面板)、繪圖視窗 視窗選單,可顯示隱藏所有面板
工作區:(新建)
調整浮動面板
圖層操作(重點)
圖層面板快捷鍵 F7 其實圖層就是一張張透明的紙 可以實現疊加問題。
圖層選擇: 使用移動工具V
1、圖層縮覽圖判斷
2、按住CTRL,在目標影象上單擊
3、將游標放置在目標影象上右鍵,選擇圖層名稱
圖層面板中加選圖層:
1、按SHIFT,單擊另一目標圖層 中間所有圖層被選中
2、按CTRL,單擊另一目標圖層 只選中目標圖層
複製圖層:選中目標圖層後(移動工具狀態下)
1、按ALT拖拽影象
2、CTRL+J (重合)
圖層編組
選中目標圖層,CTRL+G
取消編組:CTRL+SHIFT+G
雙擊圖層名稱可重新命名
雙擊組名稱,可命名組
移動工具V選擇組或圖層時,需設定選項欄
圖層上下位置移動
1、選中目標圖層,在圖層面拖拽
2、CTRL+] 向上移動圖層 CTRL+[ 向下移動圖層
3、CTRL+SHIFT+] 圖層置頂 CTRL+SHIFT+[ 圖層置底
移動選區或影象時:
移動過程中,沒釋放滑鼠,按住SHIFT,可同一水平線、同一垂線、45度移動。
ps中的撤銷操作是:
ctrl+z 撤銷一步
ctrl+alt+z 撤銷多步
Photoshop 切圖
PS切圖 可以 分為 手動 利用切片切圖 以及 利用PS的外掛快速切圖
切片工具
-
利用切片工具手動劃出
-
圖層選單—新建基於圖層的切片
-
利用標尺 基於參考線的切片 (選擇切片工具)
-
先選個一個整個的切片, 切片選擇工具-- 屬性面板中有 “劃分” --可以等分數平分切圖
匯出切片: 檔案-- 儲存為web裝置所用格式
輔助線和切片使用及清除
檢視選單-- 清除 輔助線/ 清除切片
切圖外掛
Cutterman是一款執行在photoshop中的外掛,能夠自動將你需要的圖層進行輸出, 以替代傳統的手工 “匯出web所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。 它支援各種各樣的圖片尺寸、格式、形態輸出,方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則,純點選操作,方便、快捷,易於上手。
注意: cutterman外掛要求你的ps 必須是完整版,不能是綠色版,所以大家需要從新安裝完整版本。