前往
大廳
主題

【桌遊設計講義】附錄三:色彩運用

愛天使亞夜 | 2025-01-16 17:31:11 | 巴幣 112 | 人氣 87

【CMYK 原理】
CMYK 模式下,先把 K 拿掉,只看 CMY 的話,那也能跟 RGB 三原色一樣混出這樣子的顏色:
跟 RGB 中間越混越亮不同,CMY 的混色是越混越暗。

印刷色的原理就是利用人眼中的三種色錐細胞,分別可以感知紅、綠、藍三種色光的特性。如果三種色錐細胞都被完全激發,人眼看到的就是白色。那麼要控制眼睛看到什麼顏色,只要限制色錐細胞被激發的程度即可。
換句話說,我們預設紙張是白色,所以白光照在白紙上再反射到人眼,三種色錐細胞都被激發而看到白色。如果我們要讓紙張顯示不同顏色,就是在紙張上灑上墨水。而墨水會吸收特定色光,造成特定色錐細胞不激發,因此我們看到不同的顏色。
所以說,CMY 三種墨水,其實就是只吸收一種特定色光的墨水。CMY 三種墨水都灑滿,就是三種色光都吸光光,進而產生黑色。

不過務實上,首先因為「白紙黑字」是最常用的情境,因此「黑色」用得最多。如果每次都要用 CMY 三種墨水來混黑色,這不只非常消耗墨水,而且也會因為「太濕」而產生 NG(CMY 全滿也是 NG 色)。如何解決?那就是加上一種黑色的獨立墨水來取代,因此印刷色才會是 CMYK 四色。

而且實際上,CMY100 的黑色不只 NG,還不夠黑。
而這也是為什麼 K 的出現可以讓一些 NG 色變得不 NG 的原因之一。



【色系】
在桌上遊戲,特別是卡片遊戲上,非常常見的就是「只用顏色做區分」的情況。這時,「色系」就是一個非常好用的技巧。

常用的例如工人擺放遊戲,一個玩家執一個顏色;或者卡片遊戲,不同類型的卡片有不同的配色等等。記憶這些色碼,可以加快編輯時的速度。

快速選擇顏色最快的方法就是,直接拿 CMY 去混。上面提供的混色範例,就有水藍、洋紅、黃色、綠色、藍色、紅色等六種顏色可以使用。再算上 K0 跟 K100,就還有黑白兩色,以上共八種顏色,以色系來說,理論上是相當夠用了。

〔橙色系?〕
雖然上面有提到 8 種色系,但沒有「橙色」這種我們很耳熟能詳的顏色呢?
其實是這樣的,在 CMYK 配色中,實際上來說,MY 兩色的混色就會是橙色系。也就是說,橙色與紅色在概念上實質重複。當然,並不是說橙色與紅色不能同時存在,但要注意的是,因為兩者屬於同系統的顏色,所以在配置上距離要稍微拉大一點。


從色票來看,真正的紅色就只有 M100,Y100 這個顏色。所以「紅色系」算是不太好用的選擇。
如果要表現出「紅色系」,保持 M100 的情況下,Y 值設定 60 以上還能被視為「紅色」,Y 值太少看起來就偏「洋紅」。
MY 的組合當中,紅色系的範圍其實很小,反之橙色系的範圍大一些。然後「粉紅色系」的範圍看起來更大,使用粉紅色系代替紅色系會是一個不錯的替代方案。

〔範例〕
《私立女僕學園外傳:夏日回憶》中定義為「紅色」的卡片,實質上是橙色系(M85,C70)。

〔紫色系?〕
跟橙色系與紅色系的關係一樣,紫色系本質上也跟藍色系一樣是 CM 混色。不過跟 MY 兩色同屬「暖色」不同,因為 CM 兩色剛好一冷一暖的關係,而紫色因為屬於「暖色」,所以很直覺的,只要 M>C 混出來就會是紫色。


與 MY 色票不同,CM 色票呈現出明顯的右上暖左下冷的趨勢。
紫色系的範圍雖然不大,但仍算是很直覺能選取的顏色。只要掌握 M>C 的重點即可。

〔綠色系〕
綠色系就是 CY 混色,不過比較容易忽略的是,Y 的明度很高但 C 的明度低不少,用白話點說就是 Y 會被 C 給吃掉。所以雖然 C100,Y100 是綠色沒問題,但如果你等比例減少,會發現顏色開始偏藍而不綠。因此漂亮的綠色大概都是 Y>C 的情況。但 C>Y 的藍綠色並不是 NG 色,如果你要表現出「寶石般」的顏色,C>Y 的藍綠色系仍是可以考慮的。


CY 色票應該是最無懸念的,不過還是順便附上來一下。
偏右上的綠色系看起來較具生氣,反之左下的看起來較為冰冷。根據你的主題不同,兩種不同的綠色系都有表現的空間,但不建議兩者同時使用,色彩過於接近了。



【換色技巧:覆蓋】
覆蓋(overlay)是用來搭配「色系」時很方便的功能,是使用 Photoshop 編輯檔案時必學的技巧。
覆蓋的混色原理是,保留原本的「色相」,但套用底下的「對比」。用白話的說法就是,會保留你此圖層的「顏色」,但套用底下圖層的「深淺」。因此呢,我們只要準備一個灰階的「主體」,接著在使用「覆蓋」這個功能就能達到快速套色系的效果。

〔詳細做法範例〕
首先你當然要先準備好你的「排版」。用卡片遊戲來說,通常就是你的牌框。
注意你的牌框設計最好是「純灰階」以達到最好的效果。但這裡的「灰」指的是「C=M=Y」的灰,而不是混到 K 的灰。如果你的牌框混到 K,那麼使用這招時效果就會「怪怪的」。

下半部是灰階模式下 K0→K100 的漸層轉 CMKY,因為 CMY 無法描述純黑色,所以轉換時會混入 K 而導致 CMY 數值不相同。結果就是在「覆蓋」時產生預期外的結果。

既然我們要讓 C=M=Y,那麼想當然耳,色彩的濃度就等於我們的深淺。所以我們可以使用「遮色片」功能來達到這個效果:
首先我們先新增一個純色圖層,填入 C100 這個顏色,然後製作圖層遮色片,按住 alt 點擊遮色片進入遮色片編輯模式,貼上你剛剛製作好的「灰階圖檔」,接著按 ctrl+I 製作負片效果。
這樣你會得到一個用 C 取代 K 的圖層。
為什麼遮色片需要負片效果?因為遮色片的原理是白=不透明而黑=透明,意味著遮色片「黑」的地方會沒有墨而顯示出白色,這不是我們要的,因此需要負片效果。
如果你不懂如何快速製作純色圖層,那麼開啟普通圖層,直接用 shift+F5 填滿整個圖層的方式也能得到相同的效果。

重複這個動作,直到 CMY 三種顏色都有,然後混色模式改成「色彩增值」。最後當然背景圖層記得打開並且填入「純白色」,這樣你就會得到一張只有 CMY 三色的灰階圖檔了。
當然最後你可以把這個檔案另存新檔,因為實際使用時,你需要將圖層全數合併。
看起來與 K0→K100 不同?這個無解,因為三色黑實際上就是不夠黑,也就是說,你能使用的對比最大就是如此。

框準備好以後,在上面加上一個純色圖層。這個圖層直接填入你想要的「色系」,然後混色模式調整成「覆蓋」,即可快速產生想要的結果。
沒有上顏色的框。


覆蓋上顏色後就可以快速換色了。


遮擋到其他原素的問題,只要利用「建立剪裁遮色片」的功能就可以了。
具體做法是在你的純色圖層上按右鍵→建立剪裁遮色片,這樣就只會覆蓋掉 1 個圖層的範圍,而不會把底下全部的內容都給「覆蓋」了。


之後,只要替換覆蓋的顏色,就能快速製作出其他色系的卡片了。

依敝人的習慣,如果要製作每個玩家各執一色的遊戲,會傾向於使用「紅橙黃綠藍紫」。這裡有六種顏色可以使用,應該足以應付大部分的情況。敝人反而不喜歡同時使用洋紅與紅色。

紅橙黃綠藍紫的色碼分別為:
 紅:M100,Y100
 橙:M75,Y75
 黃:Y100
 綠:C100,Y100
 藍:C100,M100
 紫:C50,M100

如果還是不夠,才會加入洋紅色與水藍色:
 洋紅:M100
 水藍:C100

題外話,紅黃綠藍紫 5 色剛好配合「火光木水暗」5 種屬性,對於做奇幻類主題的遊戲中非常好用。



【對比色】
當你需要使用到文字或圖示來表示重要資訊,那麼易讀性就很重要。簡單的說就是,你需要讓文字或符號可以被辨認出來而不是混在底色裡面,因此你需要使用「對比色」。

理論上,「互補色」被認為是對比最大的顏色。但是在印刷應用上並不是這麼一回事。
互補色的定義是,一個跟他混合後可以產生「灰色系」的顏色。也就是失去色相,單純只剩下明暗度的顏色。這樣的顏色因為互相位於「色環」的兩側,因此被認為是對比最大的顏色。

但實際應用上並非如此。50% 灰色的互補色就是 50% 灰色自己,何來對比之有?如果你是為了「易讀性」做考量,你應該考慮的不是互補,而是亮度。

亮度又稱 L 值,顧名思義,代表它有多「亮」。亮度 100 就是白色,亮度 0 就是黑色,定義就是這麼簡單暴力。
你要讓你的文字或圖示壓在某個底色上又能完美呈現,就代表你文字與底色之間的「亮度差」要夠大。如果不夠,就會出現字看不清楚的情況。

〔範例〕

M100 的洋紅色字,配上 C100,Y100 的綠色底。理論上他們是對比色,但實際上看得相當吃力,因為 M100 的 L 值僅有 49,而 C100,Y100 的 L 值也僅有 52,過小的差異導致顏色不清。


相反,M100,Y100 的紅色字,配上 M25,Y25 的紅色底,儘管它們屬於「同系」色,但因為 M100,Y100 紅色的 L 值僅有 49,但 M25,Y25 紅色的 L 值卻高達 87,如此大的亮度差異,即使是同色系也能有良好的易讀性。

不過這邊還是建議,在狀況允許的情況下,文字一律只用「黑字」(K100,L=10)或「白字」(K0,L=100)。如此一來,以 L=55 為界線,你的底色偏深(L<55)就上白字;底色偏淺(L>55)就上黑字,就不容易產生閱讀障礙了。

〔常用色的 L 值表〕
背景使用的 K75 深灰色是 L43。



【色盲友善設計】
有些玩家難以分辨紅色與綠色,稱之為色盲。其實色盲可能不是只有紅綠色盲,但因為數量最多,所以如果你有打算考慮色盲友善,那麼能夠了解一下紅綠色盲的困難之處即可以幫助你設計。

首先最直覺的就是,紅綠色盲無法分辨紅色與綠色。換句話說,紅色與綠色在他們眼中極為相似。以印刷色來說就是,C100,Y100 與 M100,Y100 它們看起來很接近,因此原則上你可以拓展為:它們無法區分 C 與 M。

當然色盲友善設計本身是一門十分高深的學問,絕不是簡易篇幅就能說完整。不過最暴力的解法就是,你直接把 C 或 M 其中一個色版忽略掉,那就不會出現這個問題。

或者更具體的做法:你在挑色系時,不要同時挑出兩個只有 C 跟 M 有差異的色系。

這裡提供一個方便記憶的表:
 C:水藍
 M:洋紅
 Y:黃色
 CM:藍色
 C+M:海藍
 CM+:紫色
 CY:綠色
 C+Y:藍綠
 CY+:黃綠
 MY:紅色
 M+Y:粉紅
 MY+:橙色
以上 + 號代表多的意思;沒 + 號則代表一樣多。

有了上表,自然你就知道以下顏色不應該放在一起:
 水藍與洋紅
 海藍與紫色
 綠色與紅色
 藍綠與粉紅
 黃綠與橙色

這可能不是很好記憶,但你只需要抄起來,有需要隨時複查就可以了。

當然,除了紅綠色盲以外,也有所謂的黃藍色盲。但老實說,如果你要考慮到所有的色盲,那麼你能使用的顏色就只剩下黑白單色了。有些時候,你可能需要做出一點點妥協。



【負片效果 NG】
負片效果在 RGB 模式下是很常用的特效,但因為原理不同的關係,換到 CMYK 上就會效果不佳。你可以在電腦裡試試看,通常你會發現畫面毀了。

負片效果的算法是:將所有像素的顏色,每個色版都取補值。由於 CMYK 所有色版的取值都是 0~100,也就是說,0 會變成 100、10 會變成 90……以此類推。
換句話說,每個色版的取值都是 100 減去原本的數值。因此四個色版合計就是 400 減去原本的數值。那也就是說,原本色彩總值在 150 以下的顏色就會變成 NG 色。
另外一種情況是,因為 CMY 等比例混色的顏色出來的結果會是灰色系,所以通常不會同時有 CMYK 全都有值的情況。更具體來說,K 值與 CMY 值本身是互相取代的關係。但在這種情況下取負片會怎樣?CMY 高 K 低變成 CMY 低 K 高,結果就是黑色變成黑色,根本也達不到期望的效果不是嗎?

〔範例〕
RGB 模式下的負片效果,基本上還能保持對比


CMYK 模式下的負片效果,對比消失殆盡的同時還出現一大堆 NG 色(四色黑)

【本章重點】
直接使用「色系」作為配色的主體會比較好做。
使用「覆蓋」的混色模式可以快速換色系。而作為底色的部分則要以 CMY 灰來製作,使用 K 來製作的話這個方法會失敗。
如果要顧及易讀性,比起對比色,L 值的差距才是重點。而最優解永遠是只使用黑字或白字。

如果要顧及「色盲友善」,則不該同時使用僅有 CM 有差別的兩種顏色,如:
 水藍與洋紅
 海藍與紫色
 綠色與紅色
 藍綠與粉紅
 黃綠與橙色

CMYK 模式下絕對不可以使用負片效果。
送禮物贊助創作者 !
0
留言

0則留言

更多創作