教學目標與成果展示

透過漸層疊加、圖層樣式與智能濾鏡，零 3D 軟體基礎也能在 Photoshop 中製作具有空間深度的 3D 風格網頁首屏設計，包含立體 Logo、導航欄、分隔線與紋理質感。

Step 1：文件建立與深色紋理背景

新建 1000×750 像素文件。雙擊背景圖層轉為可編輯圖層，開啟「圖層樣式」→「顏色疊加」，填充深棕 #47382e 作為基底色。

Step 2：參考線佈局規劃

開啟標尺（Ctrl+R），拖曳參考線劃分：頂部 Header 區域、導航欄高度、內容區邊距等關鍵位置，確保佈局精準對齊。

Step 3-4：Header 區塊與立體陰影

3.1 Header 矩形建立

使用「矩形工具」繪製 Header 區塊矩形，命名圖層為「header」。

4.1 懸浮陰影製作

前景色設黑色，選「橢圓工具」繪製比 Header 寬的橢圓形，命名「shadow」置於 Header 下方。轉為「智能物件」→「濾鏡」→「模糊」→「高斯模糊」（半徑 10px），不透明度 60%，營造懸浮立體感。

Step 5：Header 漸層質感與 3D 厚度

選取 Header 圖層，開啟「圖層樣式」→「漸層疊加」，設定線性漸層從深到淺（參考圖參數），模擬金屬/陶瓷材質的頂部高光與底部陰影過渡，瞬間產生 3D 厚度視覺。

Step 6：垂直分隔線（vDivider）組件化製作

1. 「直線工具」繪製 1px 亮紅線 + 1px 黑線，編組命名「vDivider」
2. 為組添加「圖層蒙版」→「顯示全部」
3. 「漸層工具」選「徑向漸層」（黑→白），自上而下拉取蒙版漸層，使分隔線上下漸隱，避免生硬截斷

Step 7：導航文字 3D 字體效果

1. 「文字工具」輸入導航文字（白色），編組「White Links」
2. 複製組 → 置於原組下方 → 文字改黑色 → Ctrl+T 向上左移 1 像素
3. 白字疊黑字，產生經典 3D 字體立體效果

Step 8-9：水平分隔線（hDividers）與漸隱處理

同 Step 6 方法製作水平分隔線，編組「hDividers」，添加圖層蒙版用「線性漸層」（黑→白）實現左右漸隱，適應導航欄視覺重心。

Step 10：Header 紋理疊加與蒙版融合

1. 載入紋理圖片 →「編輯」→「定義圖案」命名「webPattern」
2. 複製 Header 圖層命名「pattern」，移除漸層疊加，改套「圖案疊加」選用 webPattern
3. 為 pattern 圖層添加圖層蒙版，徑向漸層（白→黑）從中心向外，使紋理中心清晰邊緣漸隱，自然融合

Step 11：Logo 與圖標圖層樣式精修

11.1 Logo 文字樣式

輸入「Chinavisual.com」（Chinavisual 加粗），套用綜合圖層樣式：投影、內陰影、斜面與浮雕（內斜面）、光澤、顏色疊加、漸層疊加、描邊，打造金屬壓印質感 Logo。

11.2 勺子圖標樣式

置入勺子圖片，套用投影、內發光、斜面與浮雕、顏色疊加等樣式，使其融入整體金屬質感體系。

最終成果

設計思維核心總結

• 漸層疊加模擬材質：無需 3D 軟體，漸層方向與色彩停靠點決定材質感知
• 智能物件+智能濾鏡：陰影模糊可隨時調整參數，保持非破壞工作流
• 組件化思維：分隔線、導航項、Logo 皆為可複用組件，利於響應式佈局延展
• 蒙版漸隱替代硬性裁切：紋理、分隔線邊緣漸隱更符合真實視覺習慣