Illustrator 擅長精準向量建模與 3D 凸出，Photoshop 擅長材質質感、光影氛圍、合成後期。將兩者優勢結合，即可高效產出兼具 向量無限縮放優勢 與 像素級真實質感 的網頁 3D 立體字。本教學完整拆解跨軟體工作流。

最終效果預覽

---

階段一：Illustrator 向量 3D 建模

1. 文字排版與轉曲

• AI 新建文件（網頁尺寸，如 1920×1080 px，RGB）。
• 文字工具輸入文案，選用 粗體無襯線/幾何字體（如 Montserrat ExtraBold, PingFang SC Heavy），字距緊湊調整。
• 字型 > 建立外框 (Ctrl/Cmd+Shift+O) 轉為複合路徑。

2. 套用 3D 凸出與斜角

• 選中字形 > 效果 > 3D > 凸出與斜角。
• 核心參數：位置：等角投影-上方 / 自訂旋轉；凸出深度：字高 0.8-1.2 倍；斜角：經典/圓潤；表面：塑膠陰影。
• 勾選 預覽 即時調整，確認立體結構、透視關係無誤。

3. 關鍵：分離立體面以利 PS 後期

直接匯出 PSD 會將所有立體面合併為單圖層，無法單獨調整側面/頂面材質。正確做法：

1. 在 3D 對話框點擊 「更多選項」 展開 「表面著色」 區域。
2. 為 頂面、側面、斜角面 分別指定 不同純色填色（如頂面 #FF0000、側面 #00FF00、斜角 #0000FF），僅作為「選區遮罩」用途。
3. 確定效果後，執行 物件 > 擴展外觀。
4. 進入隔離模式（雙擊群組），用 魔棒工具 (Y) 按顏色選取同一立體面的所有路徑，Ctrl/Cmd+G 群組並命名（Top, Side, Bevel）。
5. 刪除臨時填色，恢復無填色無描邊狀態，保留純結構路徑。

4. 匯出分層 PSD

• 檔案 > 匯出 > 匯出為 > PSD。
• 設定：解析度 300 ppi（列印）/ 72 ppi（網頁）、勾選 「寫入圖層」、「防銳利化」。
• 得到結構完整、圖層分離的 PSD 檔案，直接進入 PS 後期。

---

階段二：Photoshop 質感後期與氛圍營造

1. 圖層結構整理

PSD 開啟後，整理圖層組：文字主體 > 頂面群組 / 側面群組 / 斜角群組。鎖定背景透明像素，為每組建立剪貼蒙版承接材質填充。

2. 材質填充：智能物件 + 圖層樣式

• 為每個面群組置入材質圖片（金屬拉絲、玻璃、塑膠、皮革、混凝土等）作為 智能物件，建立剪貼蒙版限制在面範圍內。
• 添加 圖層樣式：斜面與浮雕（增強邊緣體積）、內發光/外發光（邊緣光暈）、投影（落地投影）、疊加/柔光模式填色（統一色調）。
• 側面可添加 漸層疊加 模擬環境光衰減。

3. 全域光影與氛圍統一

• 新建曲線/色階調整圖層（剪貼至文字主體組），統一對比度與色溫。
• 添加環境光暈：新圖層，大柔邊畫筆，低不透明度繪製邊緣光暈/體積光。
• 添加景深效果：將背景/前景元素轉為智能物件 > 濾鏡 > 模糊畫廊 > 景深模糊/虹膜模糊。
• 疊加紋理/塵埃/光斑素材（混合模式螢幕/疊加），提升真實感顆粒度。

4. 響應式輸出

• 網頁用：導出 WebP/AVIF（有損）或 PNG（無損透明），配合 srcset 多尺寸響應式載入。
• 保留 PSD 源檔與 AI 源檔，支援後續文字修改、材質替換、尺寸調整零損耗重製。

---

工作流優勢總結

環節	Illustrator 負責	Photoshop 負責
幾何精度	✅ 向量精確、參數化 3D 結構	❌ 像素近似
材質質感	❌ 僅基礎漸層	✅ 圖層樣式、智能濾鏡、合成模式
光影氛圍	❌ 固定 3D 光源	✅ 手繪光暈、體積光、景深、色彩分級
後期修改	✅ 改文字、改字體、改 3D 參數零損耗	✅ 智能物件/調整圖層非破壞編輯
輸出靈活性	✅ SVG/PDF 向量輸出	✅ 多格式/多尺寸/多壓縮率輸出

「AI 建模、PS 著色、智能物件連接、調整圖層統一」—— 這套跨軟體工作流是專業動態設計、品牌視覺、網頁 3D 字體產出的工業標準範式。掌握它，您將擁有「向量骨架 + 像素皮膚」的雙重優勢。