1. 程式人生 > >Web前端—前端高效開發之“一鍵切圖”教程

Web前端—前端高效開發之“一鍵切圖”教程

            作為一名Web前端人員,工作中難免都會要接觸切圖這一塊,那麼如何把圖快速切好且又不浪費時間呢?相信很多人切圖都是先把圖片放大再使用矩形工具或切片工具來切圖,這樣其實好麻煩且有時不一定切得精準,下面筆者將介紹兩種快速切圖的方法—— “一鍵切圖”。

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

方法二:如果你的photoshop版本是CS6,那麼可以在你的photoshop中載入“一鍵切圖”的動作,讓你選中圖片後只需輕輕一按F2,圖片就快速精準的切好了。

   思路:將你複雜的操作流程記錄為一個簡單的photoshop‘動作’。

下載地址:一鍵切圖

演示:

1:載入動作

步驟:選單—視窗—動作

   按上述步驟開啟動作面板,點選右上角(圖中1),出現下拉選單,選擇載入動作(圖中二),將下載的“一鍵切圖”動作載入。

  

2:一鍵切圖

目標:將圖中的“日曆”小圖示切出

步驟:①點選“移動工具”,將“自動選擇”勾選並選擇“圖層”(見下圖步驟1)。

      ②點選圖中的日曆小圖示,右下角(圖中步驟2)可以看到已經選中圖層了,再點選圖層上的“小眼睛”,檢視日曆圖示是否隱藏,用來確定我們是否選中了圖示。

      ③按下鍵盤“F2”(圖中步驟3),這樣就完成了切圖,具體如下:


  最後,點選選單選擇“儲存為Web格式”,或同時按下鍵盤“ctrl+shift+alt+s”把圖片儲存起來,當然,你也可以根據筆者的思路來把這個流程操作儲存為“動作”,然後一鍵搞定。