關於kerning與tracking

這陣子剛好在研究  google 的 material  design,偶然發現 kerning與tracking這兩個名詞。

到底這兩個字有什麼差別,於是我稍查了一下,

兩個用都是字距的意思,但從中文字上很難理解這兩種字距有什麼不同,

因此我下一個比較清楚的說明。

kerning 指的是兩個(一對)字元之間的字距。

Kerning is the adjustment of space between pairs of letters.

tracking指的是一組文字的平均字距。

Tracking is Overall Letterspacing.

都是字距但有些微的不同,原因是英文字每個字元間的字距並不相同,理由是為了可以清楚辨別與閱讀,例如:kerning的 r與n,若kerning沒有調整好,可能就會被看成m,因此每個字元之間預設的kerning可能就會不同。

而中文字都是方方正正的,所以預設的字元之間的kerning基本上都是0,所以在中文字體下的設計,較少會考慮到kerning的設定。

關於在ai 或是ps下的設定,可以在文字→字元設定中找到相關的設定內容。

kerningNtracking

以上可以參考其他相關的文章

字體123:必需知道的基本知識(增補)

淺談Kerning與Tracking

教學影片

Illustrator tutorial: Pair kerning and tracking | lynda.com

4am democracy 海報視覺分析(part2)

黃金分割比率(golden raito), 指的是1:1618的矩型,這矩型從何而來,如果有興趣的話,可以去google一下。基本上黃金比例矩型,是從許多生物的觀察中,並透過數學得到一個無理數的規則,可能是神奇海螺鸚鵡螺螺紋的規則、人類手臂的長度、自然美景…等等,總之在這樣的比例下,可能會符合生物的生長規則,同時也可能會符合人類的於視覺上美感的感受。

 

那運用在海報的設計上是不是有相同的規則呢?有興趣的人可以參考這一本書《Geometry of Design:Studies in Proportion and Composition(設計幾何學:發現黃金比例的永恆之美)》,或許可以得到一些答案

 

但本篇的重點,在於這一次4am democracy 的海報,是否符合黃金分割準則,我想就一步一步來檢驗,到底這張海報是如何去做版面上的配置?到底圖要多大?高度、寬度怎麼決定?真的一切是憑設計師的美感嗎? 或許是,但是美感還是有規則可尋,就讓我繼續看下去~

 

這張海報網路上有兩種尺寸3461×6295(px)、3980×6260(px),我認為3980×6260(px)是原始稿,所以我以這個尺寸當作分析的標準,如果對於另一個尺寸有興趣的,也可以動手試試看。
shot1
一開始先在標題、段落、圖片,標示上對齊的參考線,可以找到一些對齊的規則,好奇的是,這些高度,對齊的位置怎麼決定的?接下來,我將在圖面上加上黃金分割比率的參考線,黃金分割比率要怎麼畫,請參考這裡。先從圖的上方,畫出一個黃金比例的矩形,如下圖。

 

shot2_
從圖中我們可以看到,畫出來的矩形下緣,會超出海報的下緣,也就是說,這張海報小於黃金矩型的尺寸,但是從中我們己經可以發現幾個有趣的交點,這些交點決定了photo1上方邊界的位置(B)及左下角(A)的位置(沿著圓弧)。

 

shot3_
接下來就是photo1的下方高度要怎麼決定,只要知道photo1下方的高度,就可以知道photo1的高度,先將原來尺寸從左上到右下標示出另一條對角線(紅線),找到交點E,與photo1之間的距離,恰好大致等於海報下方邊界到photo1之間的距離,因此我們就可以找出photo1的大小。
shot4_
最後,我們要找出photo2的位置,先從寬度找起,寬度是從交點C往上延伸,會發現 交點C上的垂直線條,剛好切到photo2的左側,寬度大概知道了,接下來比較複雜的地方是高度,先從剛剛畫出來的黃金矩型,找出中點的水平線,會發現photo2的上緣恰好在黃金矩型中間的位置,photo2上方邊界位置決定,可是高度怎麼進定的?圖中中線到交點D的垂直距離,似乎還不足photo2的高度,多的那段高度是怎麼出來的?其實就是兩個矩型高度的差距(黃色方塊處),寬度高度確定後,photo2的大小與位置大致上就出來了。

 

透過上述的方法,就可以找出這兩張圖大致上定位的方式,當然其他文字或許也有比較特殊的定位方式,就留給有興趣的人去檢驗吧!

 

當然有人會覺得,一張海報有需要用到特別去運用黃金分割率來配置嗎? 當然憑經驗豐富設計師的美感,在無意的情況下的設計,可能會恰好符合黃金分割,但是那是在不斷的調整與修正的情況下,得到的一個結果,但考慮到這張海報僅只有三天的時間就要刊出,我想為了時間也是有經過一些巧思來快速的進行版面的配置。

 

最後我從設計幾何學這本書中,得到一句話,或許可以解釋大多數人對於黃金比例的疑惑:
「數學上的表示模數,僅能用來驗證人類直覺的洞察力;黃金分割準則,亦僅用來定義藝術家直覺認定的理想比例,因為這是一種檢驗方式,非常一套創作體系。(Adolphe Mouron, 1901-1986)

 

所以,黃金分割準則,只是用來驗證作品,不建議直接用來當創作工具;基本功還是很重要,不斷的發想,不段的修正,在大自然的定律下,美感自然就會碰巧的符合黃金分割準則;走捷徑,可能只會限制創作力的發揮。
以上個人小小心得~~歡迎指教。

4am democracy 海報視覺分析 (part1)

關於反服貿這個議題,在台灣持續了好一陣子了,觀察整個的過程,根本是學生展現創意的一個地方,看了許多很有創意塗鴨、海報,當然也有超級專業的作品,而刊登在紐約時報4am democracy ,正是聶永真神人的作品啊!!
這張海報的原由是為了讓全世界知道台灣發生什麼事情,有人在募資平台(flyingV Vdemocracy.tw)發起了募資活動,希望能夠將台灣目前發生的事情,透過國際媒體發聲來引起關注,而在短短的時間內就募足了資金,買下了紐約時報的全版廣告,而廣告視覺的操刀者,正是台灣知名的設計師聶永真。
聶永真何許人也?能夠被記載在維基百科應該不太容易,有興趣的人可以上網google一下這位神人的作品。而就這一次刊登在紐約時報的作品,網路上也有一些人從不同角度給予不同評價,但身為一個設計師, 想試著從視覺的角度來分析這個作品。

 

字體的部份,可以參考這裡
從廣告的角度去看,請參考這裡

 

The Non-Designer’s Design Book (寫給大家看的設計書)書中有提到四個設計法則,來檢示作品是否符合一般的設計美感;這本書是寫給非專業人士看的,所以提出來的原則是一個比較簡單的通則。
當然也可以透過其他的方式來理解這個作品, 這本書所提到的四個原則分別是,相似、對齊、對比、重覆,其說明如下:
  1. 相近(proximity):
    是指相關的元素要盡量放在一起,比較如符合易讀性,想像在一張海報上,將聯絡資訊(地址、電話、mail、時間、地點…等)放在不同的區塊,除非是想考驗讀者的耐心,否則就是另有巧思,想讓讀者體驗解迷的箇中樂趣那就另當別論了。
  2. 對齊(alignment):
    是指在文字或是物件(圖片、logo、插圖…等),要有一個對齊的標準,否則會顯的整個版面的部局紮亂無章,讀者無從看起。對齊常用的方式有:齊左、齊右、齊中對齊,依當下的設計需求使用。
  3. 對比(contrast):
    是為突顯主題或是增加畫面張力常用手法,這也是一個作品能否在一瞬間抓到讀者注意力的最大關鍵因素;那對比是什麼呢?簡單來說就是兩個反差很大的東西,放在一起,對視覺造成一個強大的衝擊;對比就像是:多與少、黑與白、深與淺、暴力與和平、光明與黑暗…,都是對比的呈現方式。
  4. 重覆(repetition):
    指的是為了符合一致性或是要強化讀者的印象所採用的方式,但重覆的次數要適當,重覆太多次反而容易覺得有種碎碎念的感覺,當然也是要視情況使用,像是在不同的輸出物上,適當的重覆logo,來強化讀者對品牌的印象。
而回過頭來看這個作品,從這個作品中得到了什麼,一個大大的標題,整片黑的畫面,右下角有一個圖片,旁邊有一段文字,似乎想與這張圖片做一些連結;往下看有一段有文章,右邊有一張大張的圖片,搭配這些文字或許可以從圖片知道什麼故事,下面則有一排細細的文字,接下來就看到了4am.tw的logo,標題與結尾互相呼應;這是我看到這個海報大致上的感覺。
接下來我們就從這四個原則來簡單的來了解這個作品。請參照下圖,一張是原圖,另一張則是經過標示的圖
democracy_oringin_400
democracy_marked_400
  
  1. 相近(proximity):
    整個海報,除了標題在最上方的位置外,所以有文字大概都集中左下角,圖片則在右下角。若想得到更多有關於4am.tw的資料,在文章的最下方整排的文字會有說明。
  2. 對齊(alignment):
    title1、title2、text1、tex2 靠左對齊;photo1、photo2靠右對齊。
  3. 對比(contrast):
    title1大文字,與text2、text3、對比,整個黑畫面與文字的白底對比,黑畫面大於白畫面,看似有一鼓黑色的力量往下壓迫的感覺,最後在右下角的位置,放了一張photo3,一張有太陽花照片的圖片,與上方photo1、photo2呈現對比,讓整個畫面很有張力。
  4. 重覆(repetition):
    字體與"4am.tw"的重覆,希望大家到這個網站得到更多有關於台灣現在正在發生的事情。內文字體有三種,這方面請參考這篇文章
以上是我初略對於這張海報的分析,當然每個人對於這張海報的解讀可能不同,但整體而言,個人認為是一個很成功的且讓人印象深刻的作品。
接下來,可能有些人會跟我一樣好奇,為什麼看似是很單純的作品,但看起來卻還是有一種說不出的美感(除了照片與字體挑的好外),這當然是聶永真的功力啦!! 但是不是能有什麼更細的方法來解構這個作品,接下來的文章,我會用黃金分割率(golden ratio),來分析,這個海報在設計上還藏著什麼樣的密秘。

如何在Illustrator上設定完美像素(pixel perfection)

2021/10/18 更新:
這篇文章是早期為了使用 Illustrator 繪製介面所撰寫的文章,目前已有許多新的介面設計軟體可以使用,目前主流的軟體有:

  • Sketch
  • Figma
  • Adobe XD

以上這些軟體都是針對「數位產品介面」所開發的軟體,要達成完美像素已經不是一件太困難的事!在這邊推薦大家使用更專業的介面設計軟體!下面針對 Illustraotr 完美像素的設定,依然沒有改變,所以還是可以使用 Illustrator 來進行完美像素的設定。


每個人繪製 UI 的習慣不太一樣,有人喜歡 Photoshop(Ps) 繪製 UI,個人是偏好使用 Illustrator(Ai)來繪製 UI,Ai 是向量軟體,所以每個圖案都是由路徑組成,路徑就是線,線是由兩個點來組點,而三點,就可以組成一個面。而PS是影像處理軟體,所有的畫面都是由像相素(pixel)組成, 因此在原理上,Ps 跟 Ai 是不太一樣。但用 Ai 來繪製 UI 主要有幾個好處:

  1. 隨意縮放大小
    量軟體,可以隨意的縮放元件大小,所以用 Ai 來製圖,以後要用來製作不同尺寸的ICON或是用來輸出,都會來的比 Ps 還方便。
  2. 以物件或路徑進行管理
    這是我個人覺得用 Ai 來製作 UI 最方便的地方,相對於 Ps,Ps 是用圖層進行管理,因此常常要在圖層裡開開關關,個人認為比較麻煩。而在 Ai 裡,在繪製任何畫面是以路徑及物件為主,所以可以隨意的去移動物件與路徑,如果用不到的物件可以暫時放在工作區域外,要用時再移至工作區域就可以了。
  3. 多個工作區域( 2021/10/8 補充: 目前 Ps 也支援多開工作區域了。)
    進行管理,但如果愈到差異很大的狀況, 例如:前一個畫面是九宮格(Spring board)的畫面,下一個畫面變成清單(List menu)的畫面,基本上就是要重新開一個新的文件,但在AI, 就可以直接新增工作區域來進行繪製。

看起來AI似乎比較方便,但是用 Ai 來繪製 UI 要注意的是 Ai 是向量軟體,但是輸出設備(手機、平板)是像素組成,只差在密度單位上可能不太一樣,因此在進行 UI 繪製過程,必須要進行一些基本設定,將向量的畫面模擬成像素的畫面,這樣在進行畫面的輸出時,才不會有 0.1234 像素的問題。


設定以像素為基礎的文件

首先在 Ai 新增一個文件。在新文件設定,請依照下列步驟進行設定:

  1. 單位為「像素」(pixel)
  2. 寬度與高度必需是以整數的像素為主。
  3. 設彩模式必需是 RGB(CMKY是印刷輸出使用的模式)
  4. 點陣特效設定為 72ppi.。
  5. 預覽模式設為:像素。
Ai 25.2.1 新開檔案

完成後,在文件進行任何編輯,都會以像素為最小單位進行編輯。 此外,有些細節的情況要注意到,這也是後來發現的一些問題,提供大家參考。

方向鍵的鍵盤漸增請調整為1px

方向鍵可以用來控制物件位置,而移動的距離預設是3px,所以請到 「編輯」→「偏好設定」→「一般」將「鍵盤漸增」調整為1px,這樣在移動位置時,可以比較精確。

打開對齊像素格點功能

文件右上角,「對齊像素格點」的功能請打開,這樣所有的物件在移動時,就能自動的對齊像素格點。

1像素之差

請比較下面兩圖之間的差異

可以看到左圖是 4×4 的方型,在以中心為「參考點」的情況下,x 與 y 軸分別是(2,2) 而在右圖是3×3的方型,在以中心為「參考點」的情況下,x 與 y 軸分別是(1.5,1.5) 這有什麼影響呢? 影響在於在繪製 UI 時,經常會使用到對齊功能,假設一個 3×3 的方形要與一個 4×4 的方型要垂直置中對齊時,會發生什麼事?如下圖:

看起來 3×3 的方塊會與 4×4 的方式垂直置中,但 Ai 會幫你把 3×3 的方塊左右兩側,半透明霧化處理。

繪製任何對稱圖形請使用偶數

2021/10/21 更新:
對稱的問題,在新版的 Ai 似乎有獲得改善,但繪製對稱圖形建議還是以偶數做為單位。


有些情況在以像素為基礎的模式下無法避免, 請參考下圖繪製一個9×9(像素)的圓與10×10(像素)的圓會差在那裡?

有沒有發現,在右圖9×9(像素)的圓,無法對稱… (已改善),這也是用Ai 來繪製 UI 常見到的問題,因此要繪製任何對稱圖型,請盡量以偶數為單位。

結論

以上操作,有些是我參考國外的文章,部份是自己在繪製 UI 時所遇到的問題,問題當然還有, 像是框線也是一個讓人苦惱的問題,之後有空會再補充,當然有任何疑問或那邊有錯誤,也歡迎提出指教。

2021/10/8 更新:
框線(border)已不再困擾我,新的軟體可以很完美的解決問題

參考文章 How to get pixel-perfect designs in adobe illustrator