現代 UI 設計中，「長投影」與「立體卡片陰影」是提升層次感、引導視覺焦點的關鍵手法。本教學示範如何結合智慧物件、向量蒙版、高斯模糊與漸層蒙版，製作出可非破壞調整、適應任意寬度的內容盒右側/底部立體陰影，並同步完成左側陰影邏輯。

最終效果

步驟 1：建立紋理背景

1. 新建 640×480 px 文件，白色背景。
2. 新增圖層填充 #E2E2E2，重命名「bg」，轉為「智慧物件」。
3. 套用「濾鏡 > 雜色 > 添加雜色」：量值 2%、高斯分佈、單色，賦予微妙紙張質感。

步驟 2：繪製內容盒基礎形狀

1. 新增圖層「box」，矩形工具繪製 500×120 px 白色圓角矩形（半徑 4 px）。
2. 圖層樣式：
    • 描邊：1 px、內部、#F2F2F2
    • 內陰影：正片疊底、黑色、不透明度 15%、距離 0、大小 3 px（模擬內凹邊緣）
    • 投影：正片疊底、黑色、不透明度 10%、角度 90°、距離 2 px、大小 4 px（微弱外揚）

步驟 3：建立右側立體陰影形狀

1. 新增圖層「shadow-right」，矩形工具繪製 200×50 px 黑色矩形。
2. 選取「box」與「shadow-right」圖層，切換移動工具（V），點選選項列「底部對齊」與「右側對齊」，將陰影精準貼齊盒子右下角。
3. 選取「shadow-right」的向量蒙版縮圖，改用「直接選取工具」（A）操作錨點：
    • 右下角錨點向下移動 7 px（拉長陰影）
    • 框選右上、右下兩錨點，向左移動 3 px（收窄陰影寬度，形成透視收窄感）
4. 將「shadow-right」圖層拖至「box」圖層下方。

步驟 4：模糊與漸隱——關鍵真實感步驟

1. 右鍵「shadow-right」>「轉換為智慧物件」（保留濾鏡可編輯）。
2. 「濾鏡 > 模糊 > 高斯模糊」，半徑 8-12 px（視解析度調整）。
3. 為智慧物件添加圖層蒙版，選取「漸層工具」（G），黑→透明，按 Shift 從右向左拖曳水平漸層，使陰影由濃漸淡向內收斂。
4. 圖層不透明度降至 30%。

步驟 5：複製邏輯製作左側/底部陰影

複製「shadow-right」圖層群組，水平翻轉、調整錨點對稱、漸層方向反向，即得左側陰影；同理可製作底部長投影（向下拉長、垂直漸層）。所有陰影圖層均為智慧物件，雙擊濾鏡/蒙版即可隨時微調。

進階技巧與實戰建議

• 響應式寬度：將「box」與陰影群組轉為「連結智慧物件」，外部調整寬度時內部陰影自動適應（需配合向量蒙版百分比定位）。
• 色彩陰影：將陰影填充色改為品牌主色調（如深藍 #1A237E），混合模式保持「正片疊底」，打造品牌化立體感。
• CSS 映射：此效果可直接對應 CSS `box-shadow: 12px 12px 20px rgba(0,0,0,.15), -4px 4px 10px rgba(0,0,0,.08);` 供前端實作。
• 效能優化：大量卡片佈局時，建議將陰影預渲染為 PNG/WebP 精靈圖，減少瀏覽器即時渲染負擔。

下載來源檔

完整分層 PSD：box-shadows.zip