傳統切圖與精準切圖

★  傳統網頁切圖的兩種實現辦法                       

     1.直接利用「切片工具」；

     2.設置「參考線」 → 「切片工具」 → 「基於參考線的切片」；

 

提示 爲了 切圖的 提升速度和準度，通常會將網頁的psd圖片分割成不一樣的部分，而後進行局部劃分切片；

保存：製做好切片以後，ctrl + shift + alt + s （ 快捷鍵 ）「存儲爲Web所用格式」，圖片保存通常選擇「PNG-24」

 

★ 精準切圖                                

△ 方法 1  利用「腳本」

是一種比較快捷準確的切圖方法（PS CS6以上都支持），是將全部圖層中的圖像所有轉儲出 來。（轉儲的圖片格式還能夠是svg，WebP等）

1，自動化切圖，省時省力；2，計算機自動計算，尺寸更準確；

關鍵操做：文件 → 腳本 → 將圖層導出到文件。。。

優勢，能夠一次性地批量將多圖層的psd文件導出，同時可自定義的圖片格式和圖片名稱。

 

△ 方法  2  利用「生成器」生成「圖像資源」

（PS CC 開始支持自動化切圖功能）

關鍵操做（三步走）：

    a.編輯 → 首選項 → 增效工具 → 生成器；

    b. 文件 → 生成 → 圖像資源； 

    c.選中目標圖層 → 更更名稱爲「name.文件格式」就會自動 在assets文件夾內生成該圖層內相關圖片指定格式的文件

完成操做設置之後，咱們回到打開的psd文件所在的文件夾，會發現自動生成了一個assets 文件，該文件就是用來存放自動切圖生成的圖片；

 

 ★  拓展知識                         

「 文件 」選項卡中的「抽出資源」實現svg圖像的導出（PS CC2014之後都支持）；

選中圖層，而後鼠標右擊，選中「複製CSS」將自動抽取指定圖像並自動複製CSS代碼；（生成代碼的class名稱即爲圖層的名稱）

「圖層管理」能夠實現對psd文件中大量圖層進行分類管理；

來自爲知筆記(Wiz)