編者按：今天推薦兩個設計神器，一個是阿里設計師開發的切圖神器，可以自動切圖，一鍵保存，非常方便。另外是谷歌剛開放的字型Noto ，現在可以免費下載，一起來收！

前端：我需要24x24的 icon

UI：23.5x44可以嗎……

如何把手中那堆32x66、23.5x44...各種凌亂尺寸的icon全部變成規范儲存于正方形畫布的指定大小？

Sketch圖形大小不把描邊計算在內，如何讓有描邊屬性的icon貼邊切出？

配適各種手機屏幕的@1x、@2x、@3x不同分辨率icon，靠復制？

切圖這么簡單的事，就不要人工做了呀~用Coffee Slice都可以一鍵搞定。

Coffee Slice

1. 簡單切圖功能：根據用戶給出的目標容器尺寸，自動計算icon的描邊屬性、寬度，對icon進行縮放、貼邊處理。添加切圖圖層，自動生成基于@1x/@2x/@3x分辨率的成品切圖。

2. 一鍵保存功能：生成@1x/@2x/@3x分辨率的成品切圖并一鍵保存到指定路徑。

下載插件 Coffee slice - v2.0.zip 并解壓

雙擊Coffee Slice.sketchplugin安裝。

1. 選擇你想要切出的icon：

2. 運行插件：

點擊插件欄中的 ':hear_no_evil: Coffee Slice' -> 'Just Slice' 或使用快捷鍵 : ? + ? + K

3. 告訴插件一個icon的目標尺寸

4. 搞定了!

已經自動生成基于@1x/@2x/@3x分辨率的成品切圖（自動添加slice圖層），使用Sketch的export功能將它保存下來吧~

1. 選擇你想要切出的icon：

2. 選擇你的設計稿的分辨率（1x或2x），并確定你所需要的icon文件類型（PNG或者SVG）

3. 選擇保存路徑

4. 你的圖標已經保存在指定路徑了~

如果你有什么疑問，或者有什么建議和意見，請 提出issue 或者給我發電子郵件: oohmyv@gmail.com

Google Noto Fonts

昨天 Google 終于官方宣布「An Open source font system for everyone」，在五年后正式向全世界推出免費開放原始碼字型 ? ！這命名也很有趣，Noto 其實就是—“No more tofu” 的縮寫，「豆腐」是當遇到網頁或系統上有無法顯示的字符，會顯示為一個中間空白符號「?」，看起來就很像豆腐，Noto 致力于解決跨系統、語系無法正確顯示部分字符的問題。

Google 在網站里提到「Noto 字體系列一共涵蓋 800 種語言及 110,000 個字符」，勢必會讓 Android 及 ChromeOS 更加方便。實現這套字型還要感謝 Monotype 及 Adobe 和無數志工的參與。Google 在網站上開放這套免費字型下載，完整字型集、字重和樣式打包后大小為 470.5 MB（包含繁體中文、簡體中文），也可以依照需求來下載特定語系。

STEP 1

Google Noto Fonts 網站已重新改版設計，如同 Google Fonts 前段時間大更新，采用更為簡潔干凈且一致性的設計風格。從網站上方可以找到下載完整字型集的鏈結，目前檔案大小為 470.5 MB ，如果不需要所有語系，利用搜尋找到適合你使用的免費字型。

STEP 2

例如繁體中文 Noto Sans CJK TC、簡體中文 Noto Sans CJK SC，也能在 Noto 網站中找到各種字重的樣式預覽。右上角就有對應的下載按鈕「Download」，點擊后下載、解壓縮，將它安裝到系統里就能使用 Google 的 Noto 開源字型。

如果不知道如何安裝新字型，Noto 網站也提供簡易教學。

Noto 字型不僅能在許多語系下正常顯示，更重要的是維持設計一貫性，也因此不會有無法顯示時就跑出不同字型、拼湊而成的奇怪樣式，閱讀上眼睛也更為舒適。Noto 除開放在網絡下載，也在 GitHub 釋出設計原始檔。

「優設酷站22連發！」

1. 免費圖庫+導航收集站：《酷站兩連發！高品質免費圖庫站+專注WEB/APP導航收集站》
2. 音樂站+字體搜索：《酷站兩連發！幫你專心工作的音樂站+谷歌字體在線搜索神器》
3. 漸變色+代碼比較：《酷站兩連發！漸變色方案全聚合網站+在線代碼比較神器》
4. 配色+占位圖：《酷站兩連發！在線色彩搭配工具+快速生成占位圖片器》
5. LOGO下載+字體下載：《酷站兩連發！可商用的矢量LOGO下載+平面最愛的27款免費字體》
6. 壓縮圖片+在線配色：《酷站兩連發！在線圖片壓縮神器+在線配色工具COLOURCO》
7. CSS Hover動畫+寵物小精靈配色：《酷站兩連發！寵物小精靈專屬配色網站+CSS HOVER動畫收集站》
8. 美女圖片+游戲配色：《酷站兩連發！游戲配色網站+免費美女素材特供網站》
9. 在線配色+字體推薦：《酷站兩連發！在線配色神器+英文字體推薦網站》
10. 追波作品變代碼+16進制顏色：《酷站兩連發！用代碼呈現DRIBBBLE作品+16進制顏色網站》
11. 無縫紋理+多邊形背景：《酷站兩連發！專注無縫紋理素材站+多邊形背景生成器》

原文地址：free.com.tw

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com