準備工作
把Photoshop功能面板設置成我們前端常用的並保存下來，這樣就不用我們每次使用的時候都要花時間再去設置一次了。
1、設置標尺單位
——CSS裏面用的最多的單位是像素(px)，測量和讀取的值也都是以像素爲單位的值）
ps首選項設置：編輯>首選項>單位與標尺——將標尺和文字單位設置爲像素
2、將面板調整爲適合切圖
——其他不經常用的可關閉
在“窗口”菜單下開啓：工具、選項、信息(F8)、圖層(F7)、歷史記錄
3、輔助視圖
在“視圖”菜單下開啓：
1）對齊(在移動圖層的時候當它靠近文檔邊緣或參考線時會有一定的吸附力)、
2）標尺(Ctrl+R)
3）顯示>參考線(Ctrl+;)(需勾選[顯示額外內容])Ctrl+h也可以顯示/隱藏參考線；
【Ctrl+h隱藏選擇區】這項功能是有時候用選取工具選定了選擇區後，但還要在同一圖層完成其它的操作，可以按Ctrl+h進行暫時隱藏，需要時在按一下Ctrl+h就會顯示出來，當你的圖層很多時，要選擇同一樣的選區只需Ctrl+h一次，然後關掉當前操作圖層的眼睛，顯示出下一圖層時，在按Ctrl+h就會顯示出選區，而且選區是一樣的，所以Ctrl+h更適合多圖層進行同一樣的選區操作，另外還可以隱藏和顯示路徑、選區、柵格線、標尺、網格等等。
獲取信息
1、尺寸信息
——測量（寬度、高度、內外邊距、邊框、定位、文字大小、行高、背景圖位置）
方法：矩形選框工具和信息面板結合使用——畫一個矩形框在信息面板中讀取矩形框的寬高(儘可能的將畫布放大以減小誤差)
矩形選框工具
選區相加：按住Shift
選區相減：按注+Alt
選區相交：按住Shift
【！一般設計稿都比較大，當我們要選擇比較大的區域是就會很不方便。這時我們可以先在左側畫一個矩形框，再按住Shift在右側畫一個矩形框。在信息面板中查看它的寬度的值，以同樣的方法查看它的高度】
顏色信息
——取色（邊框色、背景色、文字顏色） ——使用吸管工具或拾色器
1.確定背景是否爲純色——使用取色工具
吸取背景不同位置看顏色是否有變化
2、確定背景是否爲線性漸變——使用魔棒工具
選中圖層，選擇魔棒工具，容差值改低(可直接設置爲0)，用魔棒工具多次擊圖層不同位置，若每次選中的區域爲線性的並且多次點擊域都爲線性並平行，背景色則爲線性漸變。反之則不是。
切圖
切圖之前
1、那些圖片需要切出來？
修飾性（一般用在background屬性）：
圖標、logo
有特殊效果的按鈕、文字等：
非純色的背景
2、內容性的（一般用在img標籤）：
banner、廣告圖片
文章中的配圖
[有些圖片是從服務器拉過來的數據——這些圖片不用切圖 只需用]img標籤佔位就可以了]
3、切出來的圖片存爲哪種類型？
修飾性：
PNG24——支持全透明和半透明（IE6不支持半透明）
PNG8——不支持半透明
內容性的：
一般存爲JPG（有時還要做些壓縮來保證圖片不要太大）
切圖步驟：
1、隱藏文字
文字作爲內容是需要寫道HTML標籤裏的，除非有的文字有一些特殊的效果我們不能用代碼寫出來，這時我們纔會把文字切成圖片
若文字爲獨立圖層——隱藏文字圖層
若文字和背景合併在了一個圖層——平鋪背景覆蓋文字
使用矩形選框工具>自由變換（Ctrl+T）>進行拉伸或使用移動工具+Alt(按住Shift可垂直或水平移動)
切片方法：
使用矩形選框工具：
1、切圖PNG24
移動工具選中所需圖層（按住Ctrl或Shift多選）——需切到一張圖上的多個圖層，合併在一個圖（Ctrl+E）右鍵複製圖層到新文件或直接拖至已有文件
2、PNG8
——帶背景切
合併圖片的（可見）圖層（Shift+Ctrl+E）
矩形選框工具選擇內容
魔棒工具去除多餘部分（減去相減：按住Alt）——適度調整容差值
用移動工具拖至新文件或已有文件
3、可平鋪背景
——主要針對css裏面background-repeat的屬性
用矩形選框工具選區一塊區域——尺寸儘可能小（例如：一個橫向漸變的背景圖片可將圖片切爲高同原圖一致，寬爲一像素的圖片）複製粘貼到新文件中
切片工具——有一定的使用範圍（比較適合可以一刀切的活動頁）
拉參考線
選擇切片工具
點擊選項欄中的“基於參考線的切片”按鈕
保存
存儲
存儲爲Web所用格式——選擇所需要的切片（按住Shift多選）——選擇圖片格式——存儲——選擇（選中切片）
保存：文件>腳本>將圖層導出到文件
保存類型：
1）當圖片色彩豐富且無透明要求時——建議保存JPG格式並選擇合適的品質。
品質越大圖片質量越高圖片文件越大 。
設置圖片的一個原則是：品質不要設置爲100。設爲100相當於沒有對圖片進行任何的壓縮，會使文件相當大。一般60-80就可以了（具體數值根據項目需要）
2）當圖片色彩不太豐富時無論有無透明要求——！保存爲PNG8格式
文件較小、支持透明，但不支持半透明。
PNG8默認索引顏色模式更改時會造成顏色的丟失，因此更改時PNG8格式的圖片時要將顏色改爲RGB格式。
3）當圖片有半透明要求時——！PNG24
支持半透明，並且不對圖片進行壓縮，文件較大。
4）保留一份psd格式
sprite拼圖
圖片精靈（CSS Sprites，又稱css精靈）即把網頁設計圖裏面的小圖標小按鈕合併到同一個文件，命名爲sprite，用的時候引入sprite這個文件，同時通過background-position這個屬性來定位這個文件。利用CSS Sprites最大的優點是能很好地減少了網頁的http請求，從而大大的提高了頁面的性能；並且CSS Sprites能減少圖片的字節。《談談CSS Sprites(css精靈)》http://www.css88.com/archives/756
圖片優化與合併
大小與質量
——平衡和取捨、使用壓縮工具
合併時需遵循的原則
1、合併—排列
1）圖片之間必須保留空隙；
——防止之後有更改圖片大小的需求時，還要去更改css的background-position屬性；有一定的容錯性，防止css寫的不準確時其他不需要的部分顯示出來。
2）圖片排列方式——橫向排列、縱向排列
2、合併—分類
1）把屬於一個模塊的圖片進行合併
2）把大小相進的圖片進行合併
3）把色彩相近的圖片進行合併 可以使文件比較小
4）綜合以上方式合併
3、合併推薦——
1）只本頁用到的圖片合併
2）有狀態的圖標合併（這樣在寫css代碼時狀態的圖標只是x軸或y軸的區別）
此爲我在網易雲課堂上付費教程課堂上的筆記再綜合自己已有的知識所寫。
雲課堂上面有很多這方面的免費教程，裏面的教程相對初學者而言還算可以~此處非廣告的哈~