別的設計師都下班擼串去了，你卻還在右擊另存為？

本期推薦一個非常好用的 Chrome 插件 —— CSS Peeper。

在之前，你需要摳取某個網頁上的圖片，或許是會直接右擊保存圖片。

高級一點的，想要查看某個網站的字體、背景顏色、行間距等，或許是右鍵選擇 「Inspect」 審查元素來查看。

我們以 Element UI 的網站為示例：

右擊滑鼠審查網頁元素

這種方法固然可行，但是需要大量作業時，效率就太低啦。

那我們下面就看看 CSS Peeper 可以為設計師們做什麼呢。

1 安裝Chrome插件

到官網 http://csspeeper.com 點擊 "GET IT NOW" ，或者直接到 Chrome 的插件市場，搜索找到 CSS Peeper，進入插件下載頁面。

插件加入到 Chrome 工具欄上後，便會出現這個 "P" 字的小標誌。

2 查看基本信息

我們點擊它後，就會看到網頁的右側多了一個如下的工具。可以看到頁面的基本信息。

我們隨意點擊網頁上的一個元素，工具欄的界面如下所示。可以看出更詳細的間距、字體、顏色等信息。

3 查看配色信息

如果點開工具的第二個顏色的圖標，則可以看到網頁的所有配色信息。滑鼠懸浮到顏色上，可以快速複製顏色的 Hex 值。

4 下載網頁所有圖片

最振奮人心的部分到了，點開第三個相機按鈕時，你可以看到許多圖片。

一般圖片是背景圖時，也會無法右擊保存，但 CSS PEEPER 卻可以載入出所有的圖片資源。滑鼠懸浮上會出現圖片的基本信息。

我們點擊 "EXPORT"（導出），圖片即開始被下載。以後不管多難右擊另存為的圖，你都可以輕鬆收入囊中啦。

當然，這麼好用的東西，不要忘記去告訴前端小哥哥、或者運營小姐姐襖。

更多精彩內容，下期再見。

西瓜設計研究所

UI素材 | 網站設計 | 開發資源 | 教程

未經允許請勿轉載，煩請留言獲取授權

? 西瓜設計研究所