運用簡單漸變與圖層樣式，無需 3D 工具即可設計出極具立體深度的網頁介面：深色紋理背景、帶陰影的 Header 漸變條、雙色文字 3D 效果導航、單像素紅黑分隔線蒙版漸變、紋理疊加 Header 徑向漸變蒙版、Logo 與勺子圖示內發光/斜面浮雕/描邊/投影樣式，構建層次豐富的偽 3D 網頁。

素材圖片

最終效果

步驟

1. 新建 1000×750px，背景圖層轉可編輯，顏色疊加 #47382E。
2. 視圖 > 標尺 拉參考線定位版面。
3. 矩形工具拉 Header 區塊，命名「header」。
4. 橢圓工具黑色畫陰影橢圓置於 header 下方，濾鏡 > 轉換為智能濾鏡 > 高斯模糊 10px，不透明度 60%。
5. Header 圖層添加漸變疊加（參考參數）營造凸起感。
6. 直線工具畫 1px 紅線+1px 黑線編組「vDivider」，加蒙版徑向漸變黑白由上而下。
7. 文字工具建導航標籤（白字），群組「White Links」；複製群組改黑字、上左移 1px 產生 3D 文字效果。
8. 同法製作水平分隔線群組「hDividers」，蒙版線性漸變黑白。
9. 儲存紋理圖片為圖案「webPattern」，複製 header 命名「pattern」，取消漸變疊加改「圖案疊加」選 webPattern，加蒙版徑向漸變控制紋理顯示範圍。
10. Logo 文字「Chinavisual.com」分色加粗，添加圖層樣式（投影、內陰影、斜面浮雕、描邊、顏色疊加）。
11. 勺子圖示置入，同樣添加圖層樣式（投影、內陰影、斜面浮雕、光澤、描邊）。

文：視覺中國