Icon Library Part1 :Sketch 製作 TTF 檔案
小圖示 (Icon) 不管在網頁與應用程式都佔有一定的重要性。
但在開發上使用 png、jpeg 等檔案會因為解析度問題而有模糊不清問題,svg 雖然可以解決解析度的問題,但在大量圖示的情況下,檔案管理上會稍嫌零亂且不容易更新維護。
因此出現了將圖示編輯成字型檔案,再利用獨一無二的編碼從字型表中叫出特定的圖示。
章節列表
- ***Icon Library Part1 :Sketch 製作 TTF 檔案
- Icon Library Part2:Icon 的製作規範
- Icon Library Part3:導入設計師的工作流程
*** 為 目前章節 記號,如果你在找其他章節,可以透過上面的連結快速穿梭。
Font Awesome
大家都知道這個服務,囊括了各種常用的小圖示,在字型表上應有盡有;
只需要 import Font awesome 的 css,在網頁上就可以叫出小圖示,這對快速開發迭代的產品來說是非常有幫助的。
用 Sketch 做個小圖示字型檔
當然設計師有可能想要自己做小圖示、品牌形象需要延伸到小圖示上,或是公司對於小圖示有設計上的規範,客製化在所難免。
接下來會使用 Gulp 將客製化的 Sketch 檔的設計轉成 TTF。
Gulp 是什麼?因為我不是工程師,所以我只能用我的理解粗淺地形容。
Gulp 可以想像它為一個很強大的魔法盒子,只要寫好腳本告訴那個盒子該怎麼做,它就會咻咻咻幫你把很多事情都處理完。
知道其中的原理後,我們開始囉!
行前須知 (Terminal 的相關指令)
- cd (change directory) 最常用來穿梭在資料夾之間。
- -v (version) 可以用來檢查套件、軟體版本。
- ls 用來列出現在目錄的所有檔案與資料夾。
第一步:安裝 Homebrew
Homebrew 是一個套件管理工具,安裝之後可以透過它安裝其它套件。
安裝 Homebrew 請複製下方整段指令,貼在 Terminal 上:
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
第二步:安裝 npm
npm 是一個 JavaScript 套件管理工具,有了 Homebrew 之後就可以使用 Homebrew 安裝 npm。請複製下方整段指令,貼在 Terminal 上:
brew install npm
第三步:安裝 Gulp.js (魔法盒子)
接下來就是安裝 Gulp.js,請複製下方整段指令,貼在 Terminal 上:
sudo npm install -g gulp
第四步:下載 Gulp 腳本
剛剛提到 Gulp 腳本,這裏使用作者 Tsutomu Kawamura 寫好的 Gulp 腳本 。
可以在 Symbols for Sketch 這個 Github Repo 這邊下載。
下載後會得到一個資料夾,資料夾內會有:
Symbols-for-sketch-master
∟symbol-font-14px.sketch
∟symbol-font-16px.sketch
∟README.md
∟templates
∟variants
∟images
∟package.json
∟gulpfile.js
gulpfile.js 就是腳本告訴 gulp 該怎麼將 Sketch 中的 icon 都轉成 TTF。
這裏設計師唯一會動到的檔案只有 sketch 檔,腳本預設告訴 Gulp 去轉換 symbol-font-14px 那支檔案。
第五步:前往腳本資料夾
下載完後請打開 Terminal 並進入到這個資料夾的路徑,這裏可以使用 cd 指令前往資料夾路徑。
在 Terminal 打上 cd 後,拖曳腳本資料夾到 Terminal ,就會自動輸入腳本資料夾的路徑了,記得要按下 Enter 才會進入腳本資料夾。
這時在 Terminal 打上
npm install
安裝 Gulp 執行所需要的資源,安裝完成就可以準備啟動 Gulp 了。
第六步:執行 Gulp ,啟動魔法盒子
打開 Sketch 檔後可以看到有很多 Artboard,這些 Artboard 就是 Gulp 會抓來轉換成 TTF 的 icon 設計區。我們可以複製 Artboard 新增自己的 icon,編輯後存檔,執行 Gulp。
輸入:
gulp symbols
這時資料夾會多出一個 dist 資料夾。
如果把 dist 裡面的 html 檔案丟到瀏覽器上看,就會看到完整的 icon 列表。
額外加強版:檢查 Sketch 異動,即時更新 TTF
除了第六步可以產生 TTF 檔案,在 Terminal 輸入:
gulp watch
瀏覽器將會打開 icon 列表(html 檔案),Terminal 將會持續檢查 Sketch 的異動(只要儲存),即時產生 TTF 檔案並更新 html 的 icon 列表。