《思路分享：設計及裝飾放在預覽圖的標題文字》

這次的主題是《文字的設計與裝飾》。

 

不知不覺，本人在Clip Studio Tips 裡的投稿已有十多篇了！每次除了仔細建構循序漸進的解說內容外，最花時間的，就是設計能吸引目光的投稿縮圖了。

 

適逢這次的「本月TIPS」主題是裝飾文字，本人希望在這篇文章裡分享設計預覽圖內標題文字時的思路，希望這些心得會對您有幫助！

 

由於以下例子及示範都是以繁體中文為主，自動翻譯很大機會會不準確（尤其是有關字句、斷句位置等的指涉），敬請見諒。

【設計標題文字的大原則】

有關設計標題文字，本人有以下幾個原則：

 

• 傳遞及凸出重點訊息

• 吸引眼球但同時保持文字可讀性

• 把文字及圖像組合在同一畫面時，要保持設計風格的統一性

• 在標題使用圖像非必須，但若使用，會期望那些圖像能幫忙傳遞訊息

 

另外，由於我通常都把文字加入充滿圖像的畫面裡，為免變得眼花瞭亂，所以文字裝飾都會盡量保持簡單。

但在一些以文字為主體的設計中，裝飾圖案稍為複雜或花哨一點也是可行的。

【以例子講解標題設計的不同技巧】

在這部份將會以本人以前的投稿的預覽圖作例子，說明標題設計的不同技巧。

 

由於在同一個標題設計中，有可能使用了多於一個技巧，所以在說明不同重點時，例子可能會重覆出現，敬請見諒。

---

🔴Level 1 : 字體顏色變化

▶利用顏色凸顯文字內容

最簡單的做法，就是利用不同顏色在凸出重點內容。

 

在以下的例子中，「模型風」使用了不同的顏色，令人第一眼就看到關鍵字。

另外，這樣把各個詞語區分開（立體透視 / 模型風 / 插畫），也能增加閱讀的流暢度。

▶使用有限的顏色數量

對初學者來說，使用有限的顏色數量永遠是最安全的選項。

 

在以下的例子中，有刻意限制顏色數量，只使用了深藍及粉紅兩色。

當然，在建立自己的用色習慣後，使用更多顏色也是絕對可以的。

在以下的例子中，就配合了主題使用了虹色。

▶文字及插圖的顏色選擇需配合

另外，文字及插圖的顏色也需要互相配合。

 

例如「冬日雪景」的圖像部份主要是藍色，所以文字亦選擇了相似的顏色來達到色調和諧。

 

除了色調和諧，也可運用色調對比等配色原理。「令人懷念的場景」的英文部份，就使用了跟主體部份（橙色）相反的綠色。

【💡POINT】

不擅長配色？沒關係！

除了學習有關色彩的原理外，您亦可以簡單利用【色調補償圖層】中的【漸層對應】功能，輕鬆獲得各種顏色配搭，藉此培養自己的色感！

有關漸層對應的詳細使用方法，可參考這篇官方教程。

在Clip Studio Paint素材庫中輸入「gradient」及設定搜索「漸層」就能找到其他用戶分享的漸層顏色組。

安裝漸層組素材的方法，可參考這篇官方教程。

---

🟠Level 2 : 字體大小變化、排列方式

了解文字顏色的變化後，下一步就是利用字體大小變化來達到設計目的。

 

至於如何決定各字詞的字體大小，最直觀的想法當然是越重要的字詞越大。

這點相信不用多解釋也能明白。

再者，我亦會刻意為文字斷行，而不把所有文字都放在同一行。

一般來說，當一行的文字太長時，對比起有幾行但每行較短的文字，人們閱讀前者時會需要更多的時間。所以，刻意斷行可以增加閱讀效率。

此外，我亦會刻意調整文字大小、字距、行距等，來拼成一個幾何形狀。

調整參數的位置：

另外，亦可以利用文字本身作為背景，放大字體及加粗筆劃，把正空間變成負空間，增加設計感。

（即，在非筆劃位置的空隙上色。在「圖」字（左邊的文字）上會比較容易理解，外框變成了「負空間」（空位），裡面的本該是空位的位置變成了著色的「正空間」。）

---

🟡Level 3 : 為文字加入外框、陰影等

您亦可以為文字顏色加入更多變化，例如：

• 邊緣效果

• 漸層顏色

• 外框字

• 圖案

• 陰影

這些效果能幫助文字從背景圖像中脫穎而出，同時增加可讀性及凸出重點。

【💡POINT】

增加邊框等效果很費時？Clip Studio Paint的素材庫有很多用戶分享的裝飾文字自動動作可供下載，安裝後就可以一鍵輕鬆獲得不同效果了！

 

在素材庫中輸入「text」及設定搜尋「自動動作」，即可選擇心儀的素材。

另外，邊緣效果也可以透過自動動作輕鬆獲得。

在素材庫中輸入「outline」及設定搜尋「自動動作」，即可選擇合適自己的素材。

下載素材後，有關自動動作的安裝方法，請參考這篇官方的幫助。

---

🟢Level 4 : 加入能放入文字的形狀、框架等

除了調整文字本身的顏色、大小外，亦可以加入額外的框架來放置文字。

 

有時只使用一個簡單的幾何圖案亦無不可！

 

【💡POINT】

在簡單的幾何圖案上，加入邊框、陰影等變化，即可輕鬆獲得一個簡單又不會單調的文字框框！這些都可以透過形狀工具來描繪。

又或者根據標題文字，加入邊緣後再使其平整，成為一個文字框框。

【💡POINT】

除了這些簡單的文字框框外，您也可以在Clip Studio Paint的素材庫尋找現成的框框！

 

在素材庫中輸入「Frame」及設定搜尋「圖像素材」，即可選擇合適自己的素材。

另外，您亦可以輸入一些設計元素作為關鍵字，例如「Ribbon」、「Flower」等，進一步縮窄範圍。

一些簡單的、在漫畫中常見的對話汽球，也很適合承載文字。

在素材庫中輸入「dialog」或「bubble」就能找到。

除了圖像素材外，也有一些直接繪製的形狀工具適合當文字框框。

搜索「後光」即可找到相關的素材。

使用例子（左：圖像素材；右：形狀工具）

---

🔵Level 5 : 加入裝飾圖示

此外，亦可以根據文字的內容或插圖的主題來設計文字框框及加入裝飾圖示。

而這些當然也可以運用素材來完成！

【💡POINT】

圖示的位置，除了在文字的角落外，加進文字中間亦可以。

重點在於該圖示不會影響閱讀。

 

而大小比例上，我會建議圖示不多於文字範圍的三分之一。

如果圖示太大，亦可以考慮直接把它變成框框來承載文字。

---

🟣案例分析

綜合以上的設計原則，來簡單的分析一下其中一個標題設計吧！

 

以下這幅預覽圖，來自本人上一篇的小技巧投稿。

【文字部份】

• 只使用了三種顏色：深藍、黃、紅。

• 刻意斷行：（人偶/變形）、（DO’s&/DONT’Ts）。

• 文字有大有小：把「PuppetWarp」輔助文字縮小。

• 文字排列調整成一個幾何形狀。

【圖案部份】

• 文字框框：使用人偶變形功能時會出現的三角形網格圖案。另外，為了凸顯「變形」，所以把四角向外拉伸，做出一個類似凹透鏡的形狀。

• 裝飾圖示1：使用了與人偶變形功能有關，具代表性的「圖釘」。

• 裝飾圖示2：由於文章內容是有關「該做」和「不該做」的事情，所以使用了勾號及交叉來加強標題傳遞的訊息。

兩者加起來，就完成了標題設計的部份了！

---

⚠️NG 項目

在這裡我想補充一下上面沒有提及的NG事項。

 

▶請限制字型數量

除了要注意限制顏色數量外，字型數量也需要注意限制！除非是想做出拼貼的效果，否則一般來說，在標題中只會使用一至兩款字型，不會超過三款。

過多的字型會造成混亂，也會引起閱讀不適，請看以下的例子：

▶請限制標題文字數量

放在預覽圖上的標題，其中一個目的是為了吸引人注意。

過長的文字會使重點不清晰，並增加所需閱讀時間，令預覽圖擊中讀者的力度減弱。

 

請看以下的例子，來自本人大半年前投稿的小技巧預覽圖。

當時我希望讓更多人能看懂預覽圖，執著地硬是把整個標題的中文及英文版本同時放在圖中。這樣，不僅重點沒有凸顯出來，畫面也變得相當沉悶… 這難道是一份學校報告的投影片封面嗎！？

 

再加上，顏色選擇上也不夠好。

粉紅色與粉藍色、還有紅綠黃… 使用太多顏色了，幸好畫面上元素較少，這樣看起來才勉強不刺眼。

 

雖然這是我自己的作品，但很遺憾地說，這作為一幅預覽圖實在是不夠吸引😰

 

所以！在接下來的部份，我將會示範重新設計以上預覽圖，以作為本文的結尾！

---

【實戰設計標題文字】

來到了實戰的部份！

 

這裡除了記錄了我重新設計預覽圖及其標題文字的思路外，亦會介紹當中用到的CSP功能。不過，這裡介紹的功能相對上皆為基本，如果是對CSP操作已經一定經驗的讀者，歡迎略過。

---

1.決定標題文字

 

首先，當然是要決定標題，換句話說就是刪減標題文字數量。

該篇文章的主題是「如何在多人構圖中凸出主角」，關鍵字在於「多人構圖」及「凸出主角」，所以我會暫定標題為「於多人構圖凸出主角」。

 

至於輔助性質的英文譯文，則暫定為「Group composition」。

（實際上，如果是使用英文或其他西歐語系作主要語言的話，可能還要刪減更多的字詞…）

 

2. 預備背景圖像

 

一般我都會使用文章內的插圖作為封面的背景。

然而，跟其他文章不同，在這篇TIPS中只集中介紹「構圖」，結果完全沒有完成度高的插畫可用。

幸好，由於在該篇文章中有介紹有關CSP 3D人偶的使用方法，所以使用3D人偶製作背景圖像是個不錯的選擇！

 

以下，我根據文章中曾介紹的構圖，以3D人偶重現出來：

3. 思考（Brainstorm）與主題相關的視覺表現方式、圖像、圖示等

 

在這步驟，可以根據關鍵字來思考各種能切合主題的圖像。

 

例如——

• 「凸出」：可以是使用顏色對比來凸出？也可以是以相機中的對焦框來傳遞對焦的意思？

• 「主角」：可以加上王冠作為圖示？也可以在頭部後加入光環來表現出「主角光環」？或者加入聚光燈圖案或效果？

• 「多人」：可以以重覆的物件來表達多人？

• 「構圖」：有什麼東西能代表構圖？九格比例（三分法）？黃金三角？

4. 設計標題文字

 

根據上一步驟中所得出的圖像，開始設計標題文字。

以下是本人在設計時思考的過程記錄：

 

1. 從文字開始：標題文字中，「凸出主角」比「多人構圖」更為重要，所以我把前者的字體尺寸調整得比後者大。

 

2. 「於多人構圖中」的字句，我以顏色把「多人構圖」區別出來。

 

🎨顏色方面，我決定先沿用舊設計中的粉紅、粉綠和深藍。這些都可以在後面的步驟隨時更改。

 

🔧個人習慣先新增並設置成剪裁圖層來上色。在最後決定顏色後才使用文字工具更改顏色。這樣在途中修改時會比較靈活。但這部份可隨您的習慣而定。

3. 思考圖象：「相機中的對焦框」不僅形狀簡單，而且能強力傳遞「聚焦主角」的訊息，所以優先嘗試應用在這次設計當中。

 

4. 雖然把對焦框加上去後視覺上不錯，但是變相凸出了「出主」這意思不清的兩字，需要調整。

由於對焦框是正方形的，所以把「凸出主角」的文字斷成兩行（正方形），並放進去。使用了對齊功能所把文字和圖像置中。

5. 「於多人構圖中」這句，無論放哪個地方都有少許破壞平衡感的感覺。所以嘗試運用「重覆」的手法，複製這句成四句後，放在對焦框的四周。

 

🔧為了示範圖的可讀性，這裡預先使用了此自動動作，加入文字邊框。

🔧複製貼上文字、顏色、邊框圖層，並使用變形功能（Ctrl+T），同時按著【shift】鍵旋轉至合適角度。

🔧使用對齊功能對齊。

6. 四句「於多人構圖中」之間的空隙有點礙眼。想把它填滿，以增加安定感。

 

7. 嘗試調整句子的字距設定，但出來的效果不好看。所以再加了一個四方形，把四句句子連在一起。

8. 整體還是有點單調，決定加入淺綠底色、白框、粉紅外框。

 

9. 在四角加入白色十字，不會搶眼但當讀者細看時又能給予細節感。

10. 由於整體是正方形，仍然有點過於平穩和單調。所以我在左上角加入皇冠圖示，一來能呼應主題，二來能打破正方的形狀。

 

標題文字主體設計完成！

然後，把標題文字加進去背景圖像中。

由於本次分享只聚焦在標題文字設計，所以這部份的思路歷程會稍為略去。

11. 根據現時構圖，決定加入英文輔助文字的位置。

由於標題主體的左上角有皇冠圖示，所以我把英文放在主體的右下角，讓畫面平衡。

 

💭📝在與圖像結合後才加上輔助文字或小圖示，可能更靈活的調整整體構圖。

 

例如在《人偶變形（Puppet Warp）》的那幅預覽圖，由於標題文字位於畫面右方，所以小圖示都位於右方的邊緣。相反，如果只單看標題文字的話，就不會是這樣的位置了。

 

12. 把英文調整成斜體，減少畫面生硬感。

加入更多對焦框圖案及三分構圖參考線來豐滿畫面。

完成！

---

【結語】

非常感謝您讀到這裡！

 

雖然本文標題寫是有關「預覽圖」的裝飾文字，但您絕對可以運用這些技巧來為其他創作，例如海報、賀卡、甚至人物插圖，為文字添上更多新意！

 

另外，有關一些文字處理的操作方法，包括向量圖層、文字變形，還有更多個別的素材推薦，我在以前投稿的TIPS中曾更詳細的講解，歡迎撥冗前往一覽：

本篇文章都只是本人的一些思路分享，還有進步的空間。要記住絕對還有更多具創意的方法可以創作文字裝飾！

 

對於這次的分享，您覺得如何呢？

歡迎留言讓我知道！希望這些內容會對您有幫助。