前面的話
photoshop是前端工程師無法迴避的一個軟體，這個軟體本身很強大，但我們僅僅需要通過這個工具來完成基本的切圖工作即可。本文將開始photoshop巧用系列的第一篇——準備篇
作用
我們為什麼要去切圖呢？這就需要說到專案流程。一個完整的專案流程是市場進行需求分析，產品做出專案原型，UI根據專案原型出設計圖，前端根據設計圖製作頁面，後端進行資料相關工作，網站經過測試後上線。
我們常說的切圖實際上就是要把UI製作的設計圖切成網頁需要的素材。具體到網頁的哪些地方需要素材呢？主要包括兩類：
【1】HTML中的<img>標籤
<img src="img/xx.jpg" alt="">
【2】CSS中的background-image屬性
{background-image: url(../img/xx.jpg);}
初始化
前端工程師在使用photoshop之前需要進行一些初始化設定，主要包括以下3個
【1】首選項設定 <ctrl+k>
編輯 > 首選項 > 單位與標尺 > 把標尺和文字的單位都改成畫素
【2】皮膚設定(在視窗選單下)
1、工具(可切換兩列或單列布局)
2、選項(與當前選中的工具一一對應)
3、資訊<F8>(顏色、位置、尺寸資訊，一般結合矩形選框工具使用)
4、圖層<F10>(圖層操作)
5、歷史記錄(記錄歷史操作，常用於回退)
【3】輔助檢視(在檢視選單下)
1、對齊<ctrl+shift+;> (開啟對齊後，圖層移動到另一個圖層或參考線或文件邊緣時會有自動吸附功能)
2、標尺<ctrl+R>
3、參考線<ctrl+;>(檢視 > 顯示 > 參考線)
[注意]需勾選顯示額外內容，才能看到畫布裡的參考線和網格
常用工具
【1】移動工具<V>(常用於選擇圖層及移動圖片)
在選區工具中的選項皮膚有圖層和組兩個選項，組一般指的是一個可能包含多個圖層的資料夾，而圖層僅指圖層本身
[注意]移動工具對應的選項皮膚上的自動選擇一定要勾選上
【2】矩形選框工具<M>(常用於選擇一塊區域並配合資訊皮膚檢視資訊)
如果認真觀察，會發現矩形選框工具右下角是有一個小三角的，滑鼠點選後不鬆開會彈出多個選項，包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具4種。
[注意]如果使用矩形選框工具的同時，按住shift按鍵，會生成正方形
一般地，使用矩形選框工具都是為了建立一個新選區，但實際上，也可以對選區進行如下操作
1、新增到選區: shift
2、從選區減去: alt
3、與選區交叉: shift + alt
【3】魔棒工具<W>(摳不規則的圖)
[注意]容差是用來設定顏色取樣時的範圍，容差為0代表只選取當前的顏色值
【4】裁剪工具+切片工具<C>(裁剪圖片)
[注意]裁切工具裁的是工作區，不管是多少圖層都能裁切下來
【5】縮放工具<Z>(縮放畫布)
【tips】常用的縮放快捷鍵
1、放大:
a、ctrl+加號
b、alt+滾輪上滾
2、縮小:
a、ctrl+減號
b、alt+滾輪下滾
3、顯示為100%: ctrl+1
【6】取色器+吸管工具(取色)
1、填充前景色: alt+del
2、填充背景色: ctrl+del
3、切換前景色和背景色: X
4、預設前景色和背景色: D
【7】文字工具<T>(輸入及編輯文字)
【8】抓手工具<空格>(移動可視區域)
抓手工具的實際快捷鍵是H鍵，單擊H鍵，再點選滑鼠左鍵不鬆開，圖片會以適應螢幕大小的形式顯示在螢幕中。當移動滑鼠並鬆開左鍵後，螢幕會放大顯示滑鼠所在的圖片區域
快捷鍵
除了上面提到的一些快捷鍵之後，還有一些常用的快捷鍵也是需要注意的
【1】單步撤銷或前進: ctrl+z
【2】連續撤銷: ctrl+alt+z
【3】回退到某一步: 點選歷史記錄皮膚上相應的步驟
【4】取消選擇: ctrl+d
【5】變形: ctrl+t
【6】儲存: ctrl+shift+alt+s
【7】合併圖層: ctrl+e
【8】蓋印所見圖層: ctrl+shift+alt+e
[注意]對於一些工具來說，需要呼叫工具的尺寸大小，通用的快捷鍵是左中括號[和右中括號]