神器兩連發！阿里設計師開發的切圖神器 谷歌的免費中文字體

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

前端：我需要24times;24的 icon

UI：23.5times;44可以嗎……

如何把手中那堆32times;66、23.5times;44…各種凌亂尺寸的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’ -gt; ‘Just Slice’ 或使用快捷鍵 : ⌃ ⇧ K

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

4. 搞定了!

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

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

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

3. 選擇保存路徑

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

如果你有什么疑問，或者有什么建議和意見，請 提出issue 或者給我發電子郵件: [email protected]

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

【優設網 原創文章 投稿郵箱：[email protected]】