如果你想做出屬于自己的字庫?看完這篇文章,你也可以的!

做字庫超簡單!字體設計神器Glyphs系列教程(上)

哈嘍!大家好,我是@楊洋 XHM,今天來梳理一下,我近期錄制的字體設計神器 Glyphs 系列教程的內容要點。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

這套教程有 13 集,分享了我在使用它創作字庫時,所用到的全部工具。從基礎介紹到案例演示,包括最后字體封裝出庫都有講解。而文章我會分上下 2 篇,大家看完如果有幫助,記得點贊+關注喲!

視頻版:① 軟件介紹

當視頻在手機上無法加載,可前往PC查看。

一、軟件介紹:

1. 軟件 Glyphs 是干嘛的?

Glyphs 是一款 Mac 平臺上的字體設計軟件,它能快速繪制高精度的矢量圖形,高效復用形狀,輕松管理任意數量的字母和符號。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 自動編碼封裝字庫

使用 Glyphs 你可以從草圖開始繪制完美的矢量形狀,并自動為每個字符添加相匹配的編碼,只要你設置好基礎的字體信息,就能高效地生成 TTF、OTF 等主流格式的字體文件。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

3. 我們用 Glyphs 做了哪些字體產品?

我們用 Glyphs 設計出了時下流行的優設標題黑、優設好身體、棒棒體、書華體。如果你也想設計出自己的字體,這個軟件可以學起來,這算是現在主流的字庫設計軟件了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

4. Glyphs VS Illustrator 在字體設計上有什么優勢?

總結來說:用 Glyphs 做字體設計,能從字體矢量化到產品封裝,一個軟件全部搞定!而 Illustrator 還是側重在更全面的矢量圖形繪制上,對于字體設計這個細分領域還是缺乏了一些實用功能。平時簡單設計幾個字還行,字數過多就不方便管理了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

整體來說 Glyphs 讓我印象深刻的主要還是這 4 點:

  1. 對于曲線的調節,控制精度非常高。
  2. 沒有什么技術門檻,基礎功能非常好上手。
  3. 可以一邊做字,一邊做各種排版測試。
  4. 軟件的拓展性很好,有非常多實用的插件腳本。

5. 智能部件提高效率:

在 Glyphs 里,我們可以根據需求,將筆畫創建為智能部件,并設置好粗細、長短、角度等屬性。之后在設計字體時,可以直接調用這些智能部件,并用滑桿來調整各項參數。這樣可以有效的減少修改偏旁部首的時間,讓設計效率提高!

做字庫超簡單!字體設計神器Glyphs系列教程(上)

6. 軟件學前小帖士:

① 運行環境:因為 Glyphs 是 Mac 平臺上的設計軟件,而且開發者明確表示不會開發 win 版本,所以如果你想用這個軟件,就得有臺蘋果電腦,或者給自己電腦裝個蘋果系統,你懂我意思吧,淘寶一下你就知道。

② 軟件啟動:如果你安裝的是 Glyphs 2 代,那這個舊版本是沒有啟動界面的。在打開軟件后,只要桌面左上角蘋果按鈕旁出現 Glyphs 菜單的按鈕,就說明軟件已經啟動成功了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

接下來只需要按快捷鍵 ? Command + N 新建,就可以快速新建一個帶有大小寫字母+數字的工作文檔了。

視頻版:② 界面介紹

當視頻在手機上無法加載,可前往PC查看。

二、界面介紹:

整個軟件分為五個模塊,分別為菜單欄、工具欄、左側,右側邊欄以字體預覽視圖。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

1. 菜單欄:

這里涵蓋了 Glyphs 所有的功能。一些具體的功能介紹后面都會講解,那么現階段主要還是在大家對工具快捷鍵不熟悉時,都可以在這里查一查。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 工具欄:

這里囊括了絕大部分常用的繪制、輔助工具。其中多數工具和其它軟件的操作邏輯基本一樣,后面我也會詳細介紹的。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

① 字體信息:

界面左上角「i」是字體信息模塊的快捷按鈕,它是軟件里的核心模塊。像設定字體名稱、基本參數、包括字體家族的模板、以及給字體添加各種自定義參數,來達到一些特殊效果,都需要用它來實現。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

② 視圖模式:

視圖按鈕主要控制預覽視圖的兩種顯示模式,默認是以圖標的方式顯示。而列表模式則是詳細的記錄了每個字符的參數以及它的修改時間、左右邊距、字框大小,都能在這看到。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

3. 左側邊欄:

① 字符列表:

這里涵蓋軟件里自帶的字符清單,通過它可以快速、批量生成一些字符集。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

小貼士:在 Glyphs 3 代里囊括的字符清單更加豐富。你可以通過語言旁邊的「 + 」來增加一些不常用的小語種清單,默認是沒顯示的。你可以根據自己的需求添加。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

② 字體參數:

視圖按鈕主要控制了預覽視圖的兩種顯示模式,默認是以圖標的方式顯示。而列表模式則是詳細的記錄了每個字符的參數以及它的修改時間、左右邊距、字框大小,都能在這看到。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

③ 過濾器面板-智能篩選提升效率:

在 Glyphs 里有智能過濾器和列表過濾器,這個功能可以幫你精準篩選自己需要的字符。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

智能過濾器:它就是根據你設定的一些條件,來自動的幫你篩選一些符合要求的字體。而列表過濾器:它就是根據自己的需求,去添加一些固定順序的字符清單,從而提升你的效率。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

比如:我們經常就會通過一個偏旁部首的清單,來快速把這套字體里的偏旁部首都篩選出來,來幫助我在設計初期進行規范的制定。

4. 字體視圖:

字體視圖顯示了這個文檔里面,所有加載好的字符,方便你快速地去預覽它的完成情況。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

在左下角的「 + 」就是添加字符形,而「 - 」就是刪除字符形。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

中間會顯示你目前的操作信息、字符數量:

做字庫超簡單!字體設計神器Glyphs系列教程(上)

右下角則是調節視圖預覽大小的按鈕。你們可以根據自己的需求去調整。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

視頻版:③ 編輯視圖

當視頻在手機上無法加載,可前往PC查看。

三、編輯視圖:

1. 字體信息面板、部件參數一目了然:

在編輯視圖的正下方,顯示了這個字符框架的基本信息。比如:它的編碼、間距、群組,當你選中字形后,它還會顯示坐標方位,錨點信息以及整個字的寬度、高度。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 右側邊欄:

① 備忘錄-管理字體規范

在 Glyphs 里,有一個備忘錄,它能用來記錄字體規范的參數信息,比如橫筆豎筆的粗細,包括常見的字體特征的尺寸,都可以通過它來記錄,這方便你在設計其它字的時候能有個參考。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

② 調試曲線:

它主要就是用來優化曲線杠桿的,幫助你快速的創建一個相對平滑的曲線,后面會有實例來詳細的講解,這里大家簡單的了解一下就行了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

③ 圖層面板:

在 Glyphs 的圖層面板里,主要分為主圖層,備份圖層和特殊圖層三種類型。主圖層就是默認狀態下的圖層,你可以在上面繪制任意筆畫。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

而備份圖層,顧名思義就是可以用它來創建備份,當你要設計多個版本時,你可以在備份圖層上去進行操作,修改完成以后,可以跟主圖層做對比,從而選出自己滿意的方案。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

④ 變換模塊:

這里主要就是常見的縮放、旋轉、傾斜、對齊、布爾運算等功能,和其它軟件沒有太大區別。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

小貼士:當在使用縮放工具時,它都默認狀態下是從中心向外放大或縮小。如果你想單獨的橫向或縱向去調整,你可以把旁邊的鎖解掉。然后分別調整上下的數值即可。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

而旋轉、傾斜、對齊、布爾運算這幾個工具這里我就不逐個羅列了,都是些基礎操作。不會的去看一下視頻,基本就沒問題了。

視頻版:④ 字符添加

當視頻在手機上無法加載,可前往PC查看。

四、字符添加:

1. 快速新建字符文檔:

通過「菜單欄 」-「文件」-「新建」按鈕,可快速新建西文字符集的文檔(快捷鍵 ?Command+N)

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 預創建字符形:

通過點擊啟動界面的「菜單欄」-「文件」-「從字符形集合新建」可以預創建字符形:

做字庫超簡單!字體設計神器Glyphs系列教程(上)

此時勾選需要的文字種類,可一次性新建包含多個語種甚至是表情符號的字體文檔,方便你制作大型項目。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

3. 單獨添加字符形:

通過「菜單欄」-「字符」-「添加字符形」可調出添加字符形面板,輸入你要設計的字體,即可添加完成(快捷鍵 ? Shift + ? Command + G)

做字庫超簡單!字體設計神器Glyphs系列教程(上)

小貼士:輸入的字符都要用空格間隔開,一個蘿卜一個坑,不然兩個字符會出現在一個坑位里。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

4. 批量添加字符形:

通過界面左側語言列表 - 選中所需字符清單 - 右鍵即可調出對應清單的字符列表,然后按住快捷鍵(? Command + A )全選,點擊生成。即可快速批量添加字符。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

Tips:這個操作配合自己建立的字符清單超級好用!長期整理好自己的字符清單,能極大程度的提高效率,具體操作看視頻教程。

5. 刪除字符形:

你如果選中需要刪除的字符,在字體視圖的左下角,有個「 - 」減號,單擊就刪除了,非常簡單(快捷鍵 ? Command + ? Backspace)刪除。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

視頻版:⑤ 稿件導入

當視頻在手機上無法加載,可前往PC查看。

五、稿件導入:

我們如何將在其他軟件做好的矢量文件導入到 Glyphs 里面呢?例如:我們將 Ai 里的文件拷貝到 Glyphs 里做調整,或者手寫了幾個手稿,用 Ai 的圖像描摹矢量化了以后再丟到 Glyphs 里邊去修正。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

在不做任何設置的情況下,直接復制粘貼,你會它在距離字符形框很遠的地方粘貼了。因為它會自動識別這個粘貼對象在前一個軟件里面的 x y 軸向。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

那么解決方法分三步:

1. 新建一個 1000×1000 的的畫板,把畫板的坐標軸調到原點 X=0、Y=0

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 在畫板上創建一個 1:1 的矩形塊,復制到 Glyphs 上去,再跟進實際情況調整畫板坐標。像下圖就是 X 軸對齊了,但 Y 軸向下偏移了 300,這個時候只要把畫板向上調 300 即可。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

3. 調完以后,只需要再把它復制到 Glyphs,檢查一下位置是否貼合就 ok 了。接下來就可以將做好的字符等比放大、移動到畫板的正中央,再復制到 Glyphs 里,就可以愉快的在面對它進行調整了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

這樣一套流程下來,就不需要你再額外的調整,它也能保持統一咯!

視頻版:⑥ 路徑繪制

當視頻在手機上無法加載,可前往PC查看。

六、路徑選擇:

這里主要是基礎工具的介紹,如果是和其他軟件一樣的操作我就不講了,這里主要講一下每個工具在這個 Glyphs 里的升級用法。

1. 更便捷的框選工具:

在 Glyphs 里面使用選擇工具,框選的同時按住 fn,可以把框選的范圍變成傾斜的,這樣就會比較方便的去選取一些錯位的錨點和路徑。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

2. 更靈活的鋼筆工具:

① 快速斷開路徑

如果我們要斷開路徑的話,只需在斷開的位置再點擊一下就把這個路徑直接就斷開了。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

② 快速生成曲線

選中選擇工具并按住 Option 鍵單擊直線路徑的中間,它會自動生成兩個杠桿,這樣可以快速地拖拽出一個完美的曲線。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

③ 快速生成平行杠桿

雙擊直角錨點,錨點變成了圓形,杠桿就變成平行杠桿了。或選中多個錨點然后按住回車鍵,這樣的話也可以快速的把你所選錨點一次性轉化成平行杠桿。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

④ 固定杠桿調整錨點

按住 option 鍵挪動錨點時,兩端的杠桿是固定不動的。在這個杠桿上來回滑動,可以快速調節曲線的舒適度。這樣能幫助我們在做字的時候,快速的做到對稱的杠桿。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

⑤ 固定錨點調整杠桿

按住 option 鍵去挪動直角錨點的時候,它兩端的杠桿是固定的,只挪動了這個錨點的位置。這樣的話能極大程度的避免,我們在拖拽錨點的時候,導致其它的曲線發生了非常大的變化。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

⑥ 同時調整多個錨點操作杠桿

在 Ai 里面我們只能一個個去調整杠桿,而在 Glyphs 里,我們可以同時選中,然后一起去調整,這樣我們在調整曲線的時候,可以快速的把這兩邊的杠桿調整到一致。

做字庫超簡單!字體設計神器Glyphs系列教程(上)

這次分享到這里就結束啦。如果你覺得有所收獲的話,就給我點個贊吧!我們下次再見~

收藏 261
點贊 85

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。