廢話很少說，Sketch 切圖秒 get！

PxCook x Sketch快速切圖教程：休息不止，知識不停～🐶廢話很少說,Sketch切圖秒get！

● 打開 PxCook 插件 ●

安裝好 PxCook 3.9.4 及以上版本後（下圖右下二維碼長按圖片下最新版 😄）。首次開啓PxCook，即已經爲您安裝好全新的 Flavor 切圖插件。打開 Sketch （若是已開啓，則須要您重啓一下 Sketch ，以確保插件被正確加載。） 插件會出如今 Sketch 的右邊欄，以下圖所示：

● 標記貼圖與尺寸設定 ●

①方法：建立和圖像尺寸一致的切圖

選中想要切圖的 圖層、圖層組 或者 Symbol，而後從界面右下角選擇 Make Exportable

②方法 ：建立自定義尺寸的切圖

選中想要切圖的 圖層、圖層組 或者 Symbol，而後從界面左上角選擇 Slice 或按下快捷鍵 S 激活Slice 功能，在想要切圖的圖像區域，畫出想要的尺寸便可。

若是想要切出的是背景透明的圖層，請將切片和所切圖像的圖層分組在一個文件夾下。同選擇切片並勾選 Export Group Contents Only

● 導出畫板與切圖到 PxCook ●

①設備和分辨率的選擇

在 Sketch 的右側找到 Flavor 插件工具欄，激活第一個導出工具，彈出以下面板：

設備類型和設計稿分辨率的選項，只會決定標記的切圖的生成尺寸，標記的切圖將會根據您設置的設計稿分辨率爲基準，縮放爲當前項目所需的各個尺寸。

例如：您在 Sketch 某個畫板中，有個尺寸爲 20×20 px 的標記切圖，若是您將導出面板的當前設計稿分辨率設置爲 iOS 1x，那麼該標記切圖會被同時輸出爲 20×20 px 的1倍切圖，40×40 px 的2倍切圖，和 60×60 px 的3倍切圖。又例如：若是您將上述導出面板的當前設計稿分辨率設置爲 iOS 2x，那麼該標記切圖會被同時輸出爲 10×10 px 的1倍切圖，20×20 px 的2倍切圖，和 30×30 px 的3倍切圖。

💡設備類型和設計稿分辨率的選項，並不會影響您導出的圖的尺寸。

Android 設計稿同理，須要您根據當前在 Sketch 中的設計稿的尺寸，選擇對應的正確的分辨率。

例如：您在 Sketch 中某個畫板的尺寸爲 375×667 px，其導出到 PxCook 的以後的尺寸也爲 375×667 px。

②導出畫板和切圖到 PxCook

將以下的 Sketch 畫板，按照如圖所示的設置導出到 PxCook：

在 PxCook 中，進入畫板，切換到 開發模式 ，便可在右側邊欄查看到以下的畫板及切圖數據：

♦️ 總結：至此Sketch教程就告一段落啦，東西雖然有些多且雜。可是很實用哈。爲之後的工做能節省下很多時間～。切圖設置基準分辨率尤其關鍵！

---

以上就是本次 Sketch 切圖功能的優化成果，

感興趣的小夥伴們快來體驗一下吧！爲「產●設●研」而生！

微信關注公衆號：像素大廚 PxCook

可獲取更多設計資訊和各類做圖小技巧