InDesign 中的色彩漸層是一種視覺填色、描邊或文字效果,可透過漸層色票,使用兩個或以上顏色在物件上平滑融合,並可在色票面板中調整色標、中點與角度控制——而同樣的漸層效果也能直接以一行 CSS 帶到網頁上,方法是使用 Color Gradient Generator。
InDesign 將漸層視為色票的一種,與純色、色調與混色油墨並列。這個區別很重要:漸層在文件中的行為就像其他任何色彩資源。你可以將它儲存到色票面板、在連結檔案之間共用、編輯一次就讓所有使用處同步更新,並套用於物件、框架,甚至是個別的文字字元。當平面色顯得呆板、想為主視覺跨頁增添深度,或需要一個不會與內文爭搶注意力的細緻背景時,設計師就會使用漸層。
色彩漸層在 InDesign 中的作用
在底層,漸層是沿著一條線(或從中心放射)排列的一系列顏色,軟體會填滿它們之間的每一個像素。InDesign 將其表示為一個可命名、編輯和重複使用的色票。每個色票至少包含兩個色標,以及可選的中點,用於控制一種顏色交接給下一種顏色的速度。將中點推向 50% 位置,過渡感覺就會平衡;將它滑近某個色標,該顏色附近的混合就會加快。
三個控制項決定了每個 InDesign 漸層的樣貌:
- 類型 — 線性(沿直線穿過物件)或放射狀(從中心點向外圓形混合)。
- 色標 — 混合中的個別顏色;每個色標在漸層軸上有一個 0% 到 100% 的位置。
- 中點 — 兩個相鄰色標之間的百分比位置,該處會先保持平均色,然後才開始下一次混合。
你也可以使用漸層色票工具切換物件上的漸層方向——在物件上拖曳以重新定義混合的角度與長度,無需從頭重建色票。
如何在 InDesign 中套用漸層
- 從 Window > Color > Swatches 開啟色票面板。
- 點擊面板選單(右上角的小條紋圖示),選擇 New Gradient Swatch。
- 在「新增漸層色票」對話框中,根據你想要的方向將 類型 設為線性或放射狀。
- 點擊漸層色條下方的色標,從你的色票資料庫或色彩選擇器為每個色標指定顏色。
- 拖曳每個色標的位置滑桿來控制該顏色在混合中的位置,並調整色標之間的中點菱形以塑造過渡速度。
- 為色票命名後點擊 確定;新的漸層會出現在色票面板中,可立即使用。
- 選取物件、框架或文字範圍,然後在色票面板中點擊該漸層色票,即可套用為填色,或將其拖曳到描邊指示器上,即可套用為外框。
- 切換到 漸層色票工具 (G),在物件上拖曳以即時調整已套用漸層的角度、長度與中心。
同樣的流程也適用於文字:使用文字工具選取字元,然後將漸層色票套用為填色。InDesign 會將混合效果繪製在所選的字符上,這是雜誌引文與標誌式標題背後的標準技巧。若想將效果限制在句子的某個部分,請先反白僅選取那些字元——漸層會遵循選取範圍。
線性與放射狀漸層:如何選擇
InDesign 中的兩種漸層類型,直接對應網頁上使用的兩個 CSS 漸層函式,因此在印刷上做出的選擇通常能乾淨地轉譯到數位工作流程。下表列出了實際的差異:
| 屬性 | 線性漸層 | 放射狀漸層 |
|---|---|---|
| 方向 | 沿著設定角度的直線(0deg 向上,90deg 向右,180deg 向下) | 以中心點向外呈圓形放射 |
| 最適用於 | 主視覺背景、章節分隔線、按鈕填色、圖片疊加 | 聚光燈、光暈效果、柔和暈影、玻璃感徽章 |
| 典型色標 | 沿著單一軸的 2 到 4 種顏色 | 從中心放射的 2 到 3 種顏色 |
| 對應 CSS | linear-gradient(angle, color1, color2, ...) | radial-gradient(circle, color1, color2, ...) |
| 在螢幕上清晰縮放 | 是 — 純 CSS,無需圖片素材 | 是 — 純 CSS,無需圖片素材 |
當你想要平靜、具方向感的感覺時選擇線性——大多數登陸頁的主視覺背景都屬於此類。當你想要一個焦點或柔和光暈,將視線吸引到單一位置,例如看起來像從背面打光的按鈕,則選擇放射狀。若有疑慮,先用較簡單的類型建構印刷版面,並在輸出前再次檢查角度。
使用 Color Gradient Generator 建立對應的網頁漸層
印刷版面最終往往會出現在網路上——手冊變成登陸頁,雜誌廣告變成主視覺橫幅。在 InDesign 作品與數位版本之間保持色彩一致的最快方法,是將相同的十六進位值放入 CSS 漸層中。Color Gradient Generator 會為你處理語法、角度運算與色標排序,最終輸出一行 CSS,直接貼入樣式表即可。
以下是精確的工作流程:
- 開啟 Color Gradient Generator 並選擇 漸層類型 — 線性適用於方向性漸淡,放射狀適用於由中心向外混合。
- 貼上你在 InDesign 中使用的相同十六進位值以設定每個色標的顏色,然後拖曳每個色標的位置滑桿,直到視覺效果與印刷色票一致。
- 對於線性漸層,調整 角度 滑桿,讓方向與 InDesign 漸層色條一致;0deg 指向頂部,90deg 指向右側,180deg 指向底部。
- 視需要新增或移除色標;工具會依位置自動排序,並將每個值限制在有效的 0–100% 範圍內,因此輸出的 CSS 在語法上始終正確。
- 觀察 即時預覽 隨著你的變更而更新——所渲染的色票就是瀏覽器將產生的精確結果。
- 點擊 複製 CSS,然後將背景宣告直接貼入你的樣式表。
由於每個漸層都是由色標定義,你新增第三或第四個色標就能重現多段式混合——例如在正好 50% 處保留品牌強調色,讓漸層穿過該顏色,而不是直接從頭到尾跑完。無論如何編輯,工具都會保持每個色標的正確順序,因此即使是多達五個色標的混合,推出時也會呈現你預期的樣子。
挑選能在印刷與螢幕間轉譯的顏色
當設計從 InDesign 移出時,一些小小的習慣能讓漸層保持一致:
- 在兩種工具中都使用十六進位值。 InDesign 的色彩選擇器可以顯示顏色的對應十六進位值;將該十六進位值與 Color Gradient Generator 搭配使用,讓螢幕上的呈現與你在色票面板中看到的相符。
- 將漸層錨定在單一品牌色上。讓其中一個色標等於可辨識的品牌色,無論在螢幕或紙本上,都能讓漸層顯得有意圖,而不是隨機。
- 為色票命名並儲存。不論是存放在 InDesign 的色票面板中,還是作為 CSS 自訂屬性,為漸層命名都能讓你免於每次重新建立。
如果你需要新的調色盤來餵入漸層,Color Palette Generator 可從任何基底顏色建立互補、類似與三等分組合,而 Random Color Generator 能在你卡住、想要探索時快速提供一個十六進位值。搭配漸層工具使用,你可以在一個工作階段內,從 InDesign 印刷版面轉移到可運作的網頁版本,並讓相同的顏色在兩處同時出現。
想深入了解,請參閱 Linear vs Radial CSS Gradients: When to Use Each。
想深入了解,請參閱 Color Gradient Generator Alternative: A Local Browser Tool。