本教程演示如何純用 Photoshop 矢量形狀、圖層樣式、蒙版與筆刷，繪製出媲美官方渲染圖的 iPad 產品視覺。全流程非破壞性編輯，圖層結構清晰，適合產品設計師、UI 設計師學習寫實質感表現。

最終效果

圖層架構規劃

iPad_Frame_Grp
  Frame_Outer (圓角矩形+圖層樣式)
  Frame_Inner (內襯圓角矩形+樣式)
  Home_Button_Grp
    Button_Base (橢圓+漸變疊加)
    Button_Ring (1px圓角矩形路徑描邊)
Screen_Grp
  Screen_Base (圓角矩形)
  Wallpaper (智能物件+剪貼蒙版+樣式)
  Dock_Grp
    Dock_Base (矩形+投影)
    Dock_Highlight (筆刷繪製反光+柔光模式)
    App_Icons_Grp (智能物件圖標+文字標籤)
  Status_Bar (黑矩形 25%不透明度+時間文字)
Shadow_Grp
  Ground_Shadow (橢圓模糊)
  Contact_Shadow (線性漸變)

分步製作要點

1. 機身外框與內襯

• 圓角矩形工具：外框半徑 20px，內框半徑 15px，間距 10px。
• 圖層樣式關鍵：
  斜面浮雕：內斜面、平滑、深度 100%+、大小匹配邊框厚度、角度 120°、高光模式「正常」白 60%、陰影模式「正常」深灰 40%。
  內陰影：距離 0、噪點 0、大小 3-5px、不透明度 30%，模擬邊緣倒鉤陰影。
  漸變疊加：線性、角度 90°、淺灰→深灰→淺灰，模擬陽極氧化金屬橫向反光條。
  

2. Home 鍵精細結構

• 橢圓形選區填色 → 漸變疊加（徑向、中心亮邊暗）模擬指紋感應蓋板玻璃。
  
• 1px 圓角矩形路徑（路徑模式） → 前景 #4a5e67 → 描邊路徑 → 刪除路徑，形成金屬邊框線。
  

3. 螢幕與壁紙

• 圓角矩形工具繪製螢幕區域。
• 置入壁紙素材 → 選擇 > 載入選區（螢幕形狀） → 圖層蒙版 → 右鍵「應用圖層蒙版」裁切多餘。
  
• 壁紙層樣式：內陰影（邊緣暗角）、漸變疊加（微弱對角高光）、描邊 1px 深灰。
  

4. Dock 條與圖標

• 矩形工具拉 Dock 基礎形（寬略小於螢幕） → 填 #60717e → 投影：距離 3px、大小 5px、不透明度 40%。
  
• 鋼筆勾勒反光弧線 → 填白 → 不透明度 15%、模式「柔光」 → 編輯 > 變換 > 透視/扭曲 貼合透視。
  
• 置入 App 圖標（建議使用 Marcelomarfil 等開源圖標包） → 白色小字體標籤。
  

5. 狀態欄與收尾

• 螢幕頂部拉貫穿黑矩形 → 不透明度 25% → 添加時間、電量、信號等 UI 文字。
  

進階提升建議

• 智能物件化：將 Frame、Screen、Dock 各自轉為智能物件，雙擊進入內部編輯，主文檔保持整潔。
• 透視模擬：全組 Ctrl+T > 透視變形，模擬產品攝影仰拍/俯拍視角。
• 材質變體：複製整組 → 替換框架漸變為金色/玫瑰金/深空灰漸變，快速產出多配色版本。
• 環境反射：螢幕層疊加「環境反射」照片（窗戶、燈帶），模式「螢幕」低不透明度，增強真實感。