iT邦幫忙

2023 iThome 鐵人賽

DAY 30
1

事不宜遲,讓我們直接來看最後的成果。

介面設計

DAY 27 時,我們設想的版型相對簡單,只是一個三欄三列的網格,所以在時間有限的情況下,我直接用 Bootstrap 快速的拉一拉。這個是當初 Desktop 的設計草稿:

這個是完工 Desktop 版的樣子:

另外這個是當初 Mobile 的設計草稿:

這個是完工 Mobile 版的樣子(在 Safari 上預覽的樣子):

大致上還算是有符合我想像中的那個味道!

功能設計

  1. 透過 Color Picker 們變換顏色,這個功能在 DAY 23 裡面有提到,算是在當時的基礎下再魔改一下。不同的是在新的版本中,放了一個原本的 Emoji 在旁邊作為使用者參考。
  2. 透過 Emoji Picker 選擇需要的 Emoji,並加上一個骰子讓使用者可以丟。在點擊之後,原本中間的主角位置會變成選中的 Emoji。
  3. 實作一個任意填充顏色的功能,按下去之後色票就會隨機填入一組不同的顏色。這個部分其實可以再改善,目前是用純 Random 的方法實作,但其實可以考慮顏色與顏色之間,例如在已經骰出某個顏色的情況下,剩下的可以填入該顏色的近似色、或是對比色,讓顏色的變化更多樣;同時,設計一個恢復顏色的按鈕,按下去之後就會回復成原本的樣子。

成果

尾聲

和某些已經有悠久歷史的工作相比,「字型設計師」與「字型工程師」可以說是相對近代才出現的工作。在十五世紀之前,書籍(也就是現在所說的手抄本)的複製都仰賴手抄員(Scribe)一筆一畫的「抄寫」下來,不僅曠日費時,還會有謄錄抄錯的可能,對於知識的傳播於保存可以說是相當不利。

直到神聖羅馬帝國的約翰尼斯・谷騰堡(Johannes Gutenberg, 1397 - 1468)發明了活字印刷術。過去必須以月、以年為單位的複製過程,可以有效的減至數週、甚至在數日內完成。伴隨著印刷物的大量發行,知識與宗教的革命也隨之展開。

在活字從活字櫃上被挑出、依序放入活字盤、墨水滾過紙張之前,字型設計師必須在紙上發揮創意,設計出一套可用的字型;而這些草稿會被送往鑄字廠,由鑄字師負責將紙上的草稿轉鑄為字模,也就是鉛字。在如此的時代浪潮下,手抄員的需求逐漸沒落(不過不必為他們的失業擔心,他們大多都有修道士的正職),字型設計師的身份誕生了。

在西方,有許多知名的設計師在文藝復興及科學革命的印刷需求中大顯神通,以自己的名字為名,繪製出一套又一套經典的字型。而在東方,在重文重儒的風氣下,這些「工人」雖然不曾被歷史所記載,但從傳承至今的諸多印本與刻本中,我們依然能夠讚嘆當時的雕版師是如何在木板上刻印出複雜的漢字圖騰。

印刷術與字型設計的出現,可以說是人類文明的轉捩點之一。

而邁入數位時代後,我們不再需要按圖索驥地挑出一個又一個活字,而可以透過鍵盤的敲敲打打,在螢幕上輸入我們想要的「字」;而字型設計師在完成草稿後也不再需要轉送鑄字場,而是可以透過設計軟體將草稿繪製成曲線,再由字型工程師將成品封裝成一個字型檔案釋出。

我們在這一個月裡,透過各式各樣的例子瞭解關於 OpenType 和 Unicode 的相關知識——這些都是身為「字型設計師」與「字型工程師」必須清楚的。以這次的 Side Project 為例,雖然我們用的是開源的 Twemoji,但其實也可以從頭設計一套 Emoji,此時,就必須考慮我們前面提到的碼位配置、針對目標軟體支援的 Color Font 格式、有無需要實作 OpenType 的 Feature 等等。

而當要使用字型資源時,對於該字型檔案格式的理解與掌握,例如在各個軟體與平台上的相容性、內建的 Feature 與 LookupType 表的使用、OpenType 的 table 查詢等,則又會是更加冷門且神祕的技術。

希望在這次鐵人賽的 30 天挑戰裡,有成功地一揭這領域神秘的面紗,讓更多人清楚字型的誕生與活用的技巧;也謝謝看到這裡的大家,你們不經意間點進來的小動作,都是我繼續寫下去的動力 🥹。


上一篇
DAY 29|總複習:從電腦如何儲存一個字,到電腦如何顯示一個字
系列文
一起成為新世紀文字藝術師:深入玩轉 Unicode 和 OpenType30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
_cccheng
iT邦新手 5 級 ‧ 2023-10-18 12:09:06

不太懂字型,但有稍微研究過一些 unicode,發現這系列寫得非常好!本次鐵人賽最有料的主題,沒有之一!

我要留言

立即登入留言