1. 程式人生 > >Web前端學習筆記——CSS之Photoshop切圖

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的外掛快速切圖

切片工具

1498466173246

  1. 利用切片工具手動劃出

  2. 圖層選單—新建基於圖層的切片

  3. 利用標尺 基於參考線的切片 (選擇切片工具)

    1498466734205

  4. 先選個一個整個的切片, 切片選擇工具-- 屬性面板中有 “劃分” --可以等分數平分切圖

匯出切片: 檔案-- 儲存為web裝置所用格式

輔助線和切片使用及清除

檢視選單-- 清除 輔助線/ 清除切片

切圖外掛

Cutterman是一款執行在photoshop中的外掛,能夠自動將你需要的圖層進行輸出, 以替代傳統的手工 “匯出web所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。 它支援各種各樣的圖片尺寸、格式、形態輸出,方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則,純點選操作,方便、快捷,易於上手。

注意: cutterman外掛要求你的ps 必須是完整版,不能是綠色版,所以大家需要從新安裝完整版本。