工具

這裡使用Photoshop ,當然你可以用firework這些，就是操作有些區別；

技巧一，直接複製新建裁切

這種適合用於有單獨圖層的圖片，可以很快的生成切圖出來的效果；

技巧二，參考圖+切圖工具

這種就是各位小夥伴基本都用的，先劃好參考線，再用切圖工具切，然後匯出；這裡選擇部分割槽域來演示

這種技巧比較強大，可以更加細緻的定製

1. 先用參考下圈出你要切圖的區域
2. 然後用選區工具建立選區，防止切出外面
3. 若是需要編輯連結什麼，可以直接編輯切片【以前常用，現在很少】，都是前端拿圖片自己寫
4. 匯出圖片有幾種格式，若是透明的考慮PNG，半透GIF，常規圖JPG，至於大小壓縮，根據需求來調整，不要因為大小而導致失真嚴重，那就不是要的效果了
5. 可以單純匯出圖片或者圖片加生成的靜態頁面！！看需求了

技巧三：不規則圖形切圖
這個怎麼說，需要一定的PS基礎；
簡單的來說，就是摳圖；工具不限，選區，魔棒，橡皮擦，印章，修復等

因為CSDN圖片限制在2M，GIF錄製不了太長，演示不了，，，就單純文字介紹了；

針對水印

有時候需要自己去找素材的！！而網上的素材有些有水印，第一步就是清除水印了；

顏色對比強烈的水印–這個好辦，直接通道加深這塊區域，然後選區，刪除就行了。。

半透明的水印 – 這個最快的方法是檢視附近區域，若是背景是紋理，可以選擇用修復工具，取附近的紋理來填充。

坑爹的巢狀水印【水印和圖形混合的】，這個沒有快速技巧，只能放大，藉助各種工具來慢慢抹除；

針對一些常用的水印，也可以使用濾鏡來加快處理【演算法雖好，但不是萬能的】，部分割槽域還是自己折騰

圖形條理分明的圖

1. 用鋼筆畫路徑，生成選區
2. 或者用魔棒【若是顏色對比不強烈，不大適用，愣是要用就需要自己去增強對比了】

顏色對比強烈的圖

比如動漫！黑色背景+人物。。。這種魔棒一圈就出來了

總結

• 對於需要縮放的圖片，應該都轉為智慧物件，減小縮小放大失真嚴重的情況
• 對於前端來說，切圖分兩種情況考慮，低階瀏覽器【ie9-】和高階瀏覽器【chrome】，針對低階瀏覽器可以切出一切所有需要的圖片；而對於高階瀏覽器來說，能用CSS3實現的，就不應該切出來了【比如搜尋框！從維護和效能上考慮】，還有一些要考慮適配多種瀏覽器的複雜圖片，應該考慮SVG，減少功能工作量；不然就要出現一張圖片，2倍圖，4倍圖，來適應retina顯示器這些
• 切圖不是前端開發的必備技能，但是會總比不會好；