鏤空字體 通過模擬光照下多層物體的投影、高光、邊緣折射,在二維平面創造強烈的三維空間感與材質質感。本教程拆解一套基於 Illustrator 3D 效果、高斯模糊、圖層疊加混合模式的標準化製作流程,適用於 Logo 設計、標題字體、包裝字體、空間標識系統。
最終效果由四層疊加構成 (自下而上):
1. 底層灰底:中性灰 #808080,提供空間參考面
2. 第三層 黑色投影層:高斯模糊 + 正片疊底,模擬環境光遮蔽
3. 第二層 白色高光層:純白填充,向光源方向微位移,形成邊緣高光
4. 頂層 漸變面層:線性漸變模擬曲面受光,微位移露出白色高光邊
Top_Gradient, Top_White, Top_Black, Base_GrayBase_Gray 置底,填充 #808080;Top_Black 填充 #000000;Top_White 填充 #FFFFFF;Top_Gradient 填充線性漸變 (按光源方向配色)| 圖層 | 效果/設置 | 參數詳情 | 視覺功能 |
|---|---|---|---|
| Top_Black (第三層) | 效果 > 模糊 > 高斯模糊 | 半徑 3-8px (視字號大小) | 生成柔和投影邊緣 |
| 透明度面板混合模式 | 正片疊底 | 僅保留暗部,疊加在灰底上形成陰影 | |
| Top_Black | 位移 | 向光源反方向移動 2-4px | 投影位置對應光源邏輯 |
| Top_Gradient (頂層) | 位移 | 向光源方向移動 1-2px | 露出下層白色邊緣,形成高光線 |
繪製矩形覆蓋字形範圍 → 置於頂層 → 選中矩形與所有字形圖層 → 對象 > 剪切蒙版 > 製作 (Ctrl+7) → 移除邊緣多餘模糊溢出,邊緣銳利乾淨。
將上述步驟錄製為動作「鏤空字體_標準版」:
1. 3D 擠出參數彈出輸入對話框 (允許用戶調整深度/角度)
2. 擴展外觀
3. 執行腳本 SplitFacesToLayers.jsx 自動分離面並建立四層結構
4. 套用預設效果樣式 (圖形樣式面板儲存)
5. 執行腳本 ApplyOffsets.jsx 根據光源方向自動位移
6. 建立剪切蒙版
| 光源方向 | Top_Gradient 漸變角度 | Top_Black 位移 | Top_White 位移 | Top_Gradient 位移 |
|---|---|---|---|---|
| 左上 (標準) | -135° (左上→右下) | 右下 (+3, +3) | 左上 (-2, -2) | 左上 (-1, -1) |
| 正上 | -90° (上→下) | 下 (0, +4) | 上 (0, -2) | 上 (0, -1) |
| 右上 | -45° (右上→左下) | 左下 (-3, +3) | 右上 (+2, -2) | 右上 (+1, -1) |
| 左側 | 180° (左→右) | 右 (+4, 0) | 左 (-2, 0) | 左 (-1, 0) |
Top_Gradient 漸變改為多色標金屬漸變 (#2D2D2D → #E8E8E8 → #3A3A3A → #F5F5F5 → #1A1A1A) → Top_White 改為高光色 #FFFFFF 不透明度 80% → Top_Black 改為深色 #0D0D0D 模糊半徑減半 → 添加「紋理化」效果 (畫布紋理, 縮放 50%) 疊加在頂層。
移除 3D 擠出,改用「外觀面板多層描邊」:
基礎描邊 3px 品牌色 → 外發光 8px 同色 → 第二描邊 1px 白色 高斯模糊 2px → 第三描邊 0.5px 白色 線性減淡 → 整體混合模式「線性減淡」置於深色背景上。
偏移路徑 -3px 疊加 8-10 層 → 每層填充漸變色相微調 (色相偏移 5°) → 每層投影 2px/2px/3px #000 20% → 邊緣添加「撕紙」效果 (效果 > 扭曲與變換 > 粗糙化 1px/相對/平滑)。
⚠ 3D 擠出後面過多導致操作卡頓 → 簡化字形路徑 (簡化 97%)、減少擠出深度
⚠ 高斯模糊向量化後產生大量網格點 → 效果面板中保持「動態效果」不擴展,僅導出時光柵化
⚠ 字形內部計數器 (如 O, A, B 內部) 處理遺漏 → 選中計數器面同樣套用四層邏輯,注意投影方向一致性
✅ 建立「鏤空字體模板.ai」:預設四層結構、圖形樣式、動作、腳本,新建文檔即用