裁圖是很多UI設計師的日常工作。 通常設計圖完成后，將設計稿拆分成頁面圖片，并標注規(guī)格和寬度，交付給后臺完成html+css布局的靜態(tài)頁面，有利于能夠互動并產(chǎn)生良好的視覺感。

但也有人認為，后臺最好能自己切圖，不建議把圖片的切圖交給設計師。 這樣中間就會消耗解釋結構的成本（比如網(wǎng)頁層級，詳細的搭建方案等），雖然最后的css是在后端編碼的，但是如何切出最合適的還是必須的自己決定，否則會導致新的問題（設計師一定要抓好切圖考慮施工實施？）。

其實，裁圖對于設計師設計創(chuàng)作、程序員編寫代碼并不難，但即使成為一件苦差事？

UI設計師：“因為不想剪圖，被人事辭退了?！?/p>

程序員：“被人鄙視為乞兔仔，我要怎么挽回……”

聽到這里，小編只想對所有UI設計師和程序員說一句：“你們是切兔子，全家都是切兔子！”

自動切圖有多郁悶？ 小編在網(wǎng)上搜索了一下，發(fā)現(xiàn)傳統(tǒng)的切圖方式是這樣的：

1.打開下載的psd文件

打開后sketch標注插件，由于文件比較長，細節(jié)看不清楚，需要將圖片放大到合適的大小。

2.改變參考線

圖中很多黑色的參考線是設計師設計時用到的，我們不需要的很多，所以先把這些參考線全部去掉。

3.選擇要剪切的圖標

①選擇工具欄中的第一個“移動工具”

②然后查看前面選項欄中的“自動選擇”是否被選中……

...此處省略300字...

4.切割所需的圖標

現(xiàn)在，我們已經(jīng)用引導線包裹了我們的圖標，下面，我們將使用切割工具來切割我們的圖標

① 在右側工具欄中選擇切割工具，從上到下第五個，然后右鍵找到它，然后選擇...

...此處省略300字...

5.將切片保存為圖片

①選擇“文件”=“”另存為網(wǎng)頁格式”

②調整縮放比例欄，使畫面能完整顯示在窗口中...

...此處省略300字...

需要--img

小編很惱火，為什么不用手動裁圖工具呢？

iDoc，一鍵切圖，可接PS等。 從此剪圖只需要兩步！

第一步是安裝并打開插件。

到官網(wǎng)()下載 iDoc插件安裝文件，點擊安裝。 插件安裝完成后打開，在“(Plug-in)”中找到 iDoc插件，選擇并打開。 您可以使用您的 帳戶登錄。

第二步是上傳切圖。

選中需要剪切的視口或組，點擊右下角Make兩邊的減號，完成剪切標記。 無需設置多個切割比例，iDoc 會手動生成不同比例的切割。

點擊下拉框選擇設計稿所屬的項目。

點擊上傳選擇或全部上傳，將設計稿資源一鍵上傳至iDoc。 設計者和開發(fā)者可以登錄Mocka iDoc查看標注、下載摳圖等。

事實上，市場上還有其他圖像切割工具，我向你保證sketch標注插件， iDoc 不是你唯一的選擇，但卻是你最好的選擇！

原因很簡單。 iDoc是一款集手動標注、一鍵裁剪、多種批注、快速交互、全視圖畫板、團隊管理于一體的多功能產(chǎn)品協(xié)作平臺。 從設計到產(chǎn)品再到開發(fā)只需要一個文檔，大大優(yōu)化了工作流程，是一個只能切圖的簡單插件無法比擬的； 其次，與其他多功能平臺相比， iDoc有不少亮點：

如有侵權請聯(lián)系刪除！