如何創建自定義字體：7 個步驟和 3 個案例研究
已發表: 2022-03-11面對現實吧; 有些字體是我們設計師喜歡討厭的。 實際上，“仇恨”這個詞可能不夠強烈。 天災？ 詛咒？ 瘟疫？ 糞便？ 我聽說每個人都曾經侮辱我們用來交流思想的無生命的字母、數字和符號，我完全明白。 我見過（並犯下）類型的罪行如此糟糕，以至於即使是最古怪的辦公室公告也會感到尷尬。
但是，如果我告訴你，我們這一代最受詬病的字體實際上可能是品牌設計師最好的朋友呢？ 如果我向您展示如何將平淡無奇的字體變成客戶會喜歡的甜美標識（並為此付出高昂的代價）怎麼辦？ 您是否願意從根本上改變您看待字體的方式，並向無限擴展的創意選擇世界敞開心扉？ 準備好製作自己的字體了嗎？
如果是這樣，請繼續閱讀，因為我將介紹一個簡單的過程，您可以使用它來立即轉換任何字體，以便更好地創建字體。 而且，為了展示這個過程的有效性，我將使用三種被各地設計師強烈鄙視的字體來展示每一步。
首先是小丑，這是一組古怪的小丑角色，通常出現在生日橫幅和“異想天開”的名片上。
接下來，我們有紙莎草紙，從圖坦卡蒙國王陵墓的牆壁上精心複製而來，咖啡店菜單、嚴肅藝術家和詹姆斯卡梅隆的首選。
最後，一個不需要介紹的酷且不可動搖的隨意的排版不法之徒——唯一的， Comic Sans 。
從這個不太可能的分組中，我會教你看到別人喊“垃圾”的寶藏！ 並創建最高水準的自定義標識。
簡單可靠的過程
讓我們開始從醜陋的字體到令人驚嘆的標識的旅程，並學習如何製作字體。 我們將從不好的事情開始，以好的事情結束，並且每次都遵循相同的七個步驟。 七個步驟是什麼？ 我將稍微討論一下細節，但首先，關於此類工作所需的工具的一些說明。
推薦設置
視覺設計師可以使用大量新的和負擔得起的設計工具。 觸摸屏設備和 Apple Pencil 等高級觸控筆讓捕捉創意和遷移到數字工作流程變得比以往任何時候都更容易。 自由嘗試，堅持任何對你有用的東西。 也就是說，我更喜歡使用 Adobe 和 Wacom 的可靠工具的經過驗證的真實方法：
- Photoshop - 用於處理字體和創建分層細化草圖。
- Illustrator - 用於矢量跟踪最終細化草圖并快速添加樣式元素，如顏色、漸變、紋理、圖案等。
- Wacom 數位板— 用於在 Photoshop 中進行數字繪圖。
小丑——從粗魯到優雅
Jokerman 是字體中的 Jim Carrey：從不微妙，在各個角度都響亮，但奇怪地吸引了大眾。 這很荒謬，而且完全是本教程所針對的字體。 像 Jokerman 這樣的古怪字體充滿了奇特的設計元素，但缺乏雅緻標識所需的約束。 作為設計師，我們需要有良好的判斷力，這通常意味著為了更清晰的溝通而放棄細節。
這是一個簡單的七步過程，將我們從不受歡迎的字體帶到高端標識。 涉及一些簡單的繪圖，但是如果您可以寫下您的名字並繪製圖片，那麼您就擁有了學習如何製作自己的字體所需的所有技能。 讓我們開始。
1.查看字體
在 Photoshop 中，選擇一種字體（在本例中為 Jokerman），輸入您的標識所需的企業名稱，然後快速檢查每個字母以了解設計可能性，如比例、比例、字母重量等。
2.構思
使用您的 Wacom 數位板，為您的標識畫一個鬆散的草圖。 這裡不需要精確。 只需快速簡單地繪製一些草圖，作為您設計的骨架。
3.扭曲字體
使用您選擇的字體、縮放、拉伸、傾斜和擠壓構思草圖頂部的每個字母。 無需在此步驟中使事情變得完美。 稍後您將對其進行改進，因此請繼續。
4.修正草圖
現在，在扭曲的字母上方快速繪製草圖。 這是您開始改進原始字體的缺點並添加自己的設計細節的地方。
5.細化草圖
這是 Photoshop 中草圖和細化的最後階段。 清理所有不起作用的東西，並填寫你的字母，這樣你就可以更好地了解形式和字母之間的空格關係。
6. 矢量跟踪
將您的細化草圖放到 Illustrator 中，取出鋼筆工具，然後小心地點擊您的方式來繪製美麗的貝塞爾曲線。
7. 收尾工作
完成矢量追踪後，使用顏色、陰影、高光、輪廓等深思熟慮的細節添加視覺衝擊力。
Papyrus——一種微妙的轉變
懺悔：我喜歡Papyrus，我不在乎誰知道。 說真的，並不是我們設計師喜歡抨擊的所有字體實際上都那麼糟糕。 過度使用？ 可能是。 俗氣？ 好的，是的。 但僅僅因為字體讓人覺得她的電樞設計文檔有尊嚴並不意味著它很糟糕。 這就是我對 Papyrus 的看法。 就像我在 Old Navy 買的正裝襯衫：它合身，讓我在特殊場合也能表現得體。
也就是說，我的禮服襯衫沒有故意磨損的邊緣。 所以，讓我們看看我們是否可以保留 Papyrus 字體的漂亮部分，同時使整體外觀和感覺更加現代。
1.查看字體
同樣，我們從 Photoshop 開始。 選擇您的字體（Papyrus），然後輸入標識名稱。 查看每個字母，記下潛在的設計細節。
2.構思
拿出你的 Wacom 數位板，快速勾勒出一些構圖創意。 不要想太多這一步。 這就像在筆記本上塗鴉你的名字。
3.扭曲字體
就像我們為小丑所做的那樣，在您創建的構思草圖的頂部縮放、拉伸、傾斜和擠壓每個字母。 它會變得混亂，但不要擔心！
4.修正草圖
在所有步驟中，這可能是最令人生畏的，但不要強調它。
你不是從頭開始構建的。 您正在使用原始字體的結構，同時添加您自己的改進。
這個草圖可能非常糟糕和醜陋。 Photoshop 中圖層的美妙之處在於能夠進行多次傳遞，每一次都更接近您的真實設計意圖。
5.細化草圖
這是我們在 Photoshop 中的最後一步。 對自己的設計部分不工作要誠實。 它還有助於為您的字母著色，以便您可以看到它們彼此相鄰的外觀並發現形式上的任何不規則之處。
6. 矢量跟踪
將細化草圖放在 Illustrator 中，並使用鋼筆工具開始您的矢量描摹。
7. 收尾工作
完成矢量跟踪後，通過添加顏色、陰影、高光和輪廓等細節，使您的標識栩栩如生。
Comic Sans - 就像熨燙皺巴巴的襯衫
我拒絕嘲笑 Comic Sans。 當然，它出現在不合適的時間，看起來有點凌亂，就像剛從小睡中醒來一樣。 但是，它符合設計要求，可能只是世界上最知名的字體。
從純粹的美學角度來看，Comic Sans 並沒有太多值得喜歡的地方。 它笨重、笨拙，字母中的小扭結和旋鈕很讓人分心。 儘管如此，它還是有一些有趣的怪癖，可以很好地用於標識，並且它作為有史以來最糟糕的字體的普遍看法使其成為我們七步細化技術的完美挑戰。
這一次，我將減少對機制的關注，並在每一步讓您更深入地了解我的創造性思維過程。
1.查看字體
對於這一步，把自己想像成一個尷尬的青春期男孩的父母。 不可否認，他是一個看起來瘦長的傻瓜，但你可以看到他將成為一個身材魁梧、全面發展的年輕人的那一天。
2.構思
構思是釋放你冒險藝術的一面的時候。 你可以在以後無情地編輯自己，但現在，抓住機會。
當我回顧 Comic Sans 時，我注意到我試圖將其融入到我的構思草圖中。
3.扭曲字體
也許你和我一樣……有點痴迷於在 Photoshop 中組織圖層和使用非破壞性編輯技術。 這一步不要這樣！
輸入你的單詞，光柵化字體，然後扭曲這些字母。
4.修正草圖
就像我說的，Comic Sans 的小不規則令人抓狂，所以在這一步中，我專注於拉直線條和平滑曲線。
5.細化草圖
在最長的時間裡，我直接從 Photoshop 中的校正草圖步驟轉到 Illustrator 中的矢量描摹。 但是，當我第一次看到我填寫的矢量字母時，它們總是看起來有點奇怪。
這個細化步驟是確保您的字母間距良好的好方法。 畢竟，字母之間形成的形狀與字母本身同樣重要。
6. 矢量跟踪
使用鋼筆工具很容易讓你的大腦關閉。 您開始指向、單擊和拖動手柄，而不再尋找改進設計的方法。
不要那樣做！ 當你手繪草圖時，你會不斷地在瞬間做出決定和更正。 您應該以類似的方式使用鋼筆工具。
7. 收尾工作
我對矢量跟踪的結果很滿意，所以我選擇了一個簡單的塊陰影和一些內部強調線。
理想情況下，您的字體將能夠獨立存在而無需任何修飾。 最後潤色是為了讓你的設計流行，但你應該注意不要添加太多的特殊效果。
不想要的東西的機會
我們設計師明智的做法是緊跟行業中存在的趨勢、工具和思維模式。 我們作為一個社區學習和成長，如果我們領域的大部分人對某些事情的看法很差，我們應該尋求了解原因。
然而，我們也應該抵制徹底拒絕設計實踐的衝動，尤其是在流行觀點的一時興起。 當我們遇到一些被認為不好的東西時，比如使用 Jokerman，了解其他設計師為什麼會有這種感覺是件好事，但將潛在有價值的資源扔進垃圾堆是短視的。
相反，盡可能多地記在心裡。 記筆記、觀察、分類你喜歡和不喜歡的東西，並存儲來自其他設計師的各種意見。
您永遠不會知道，有一天您可能會通過使用 Comic sans 作為您客戶美麗的新標識的基礎來做出不可想像的風險設計社區的嘲笑。
• • •
進一步閱讀 Toptal 設計博客：
- 電子商務用戶體驗——最佳實踐概述（附信息圖）
- 以人為本的設計在產品設計中的重要性
- 最佳 UX 設計師作品集——鼓舞人心的案例研究和示例
- 移動界面的啟發式原則
- 預期設計：如何創造神奇的用戶體驗