想掌握高保真 UI 介面繪製技巧嗎？本教學將演示如何純用 Photoshop 向量工具、圖層樣式、蒙版技巧，從零繪製一個擁有磨砂玻璃質感、多層次高光陰影、輸入框交互狀態、頭像框的 Windows 風格登入介面。全程無需外部素材，核心技法包含：高斯模糊背景虛化、圓角矩形向量基礎、選區描邊構建邊框、漸層疊加模擬玻璃反光、投影/內陰影立體結構、圖層蒙版非破壞性編輯。適合 UI 設計師、圖標設計師提升圖層樣式駕馭能力。

完成效果

背景素材處理

導入背景風景圖。濾鏡 > 模糊 > 高斯模糊，半徑視解析度而定（~70px），使背景極度虛化，只保留色塊與光影輪廓，營造「朦朧期待感」。

登入框主體結構：輔助層法精確構建

1. 新建圖層「輔助」，圓角矩形工具 (U) 半徑 6px，繪製登入框主體形狀，填充白色。移動至畫布正中心。關閉圖層眼睛（隱藏），保留路徑供選區載入。

陰影邊線層

1. 新建圖層「陰影邊線」。Ctrl+點擊「輔助」圖層縮圖載入選區。選框工具右鍵「描邊」：寬度 2px，位置「內部」，顏色黑，混合模式「正常」，不透明度 30%。

2. 添加「投影」圖層樣式：距離 3px，大小 8px，不透明度 40%。

3. 新建空白圖層與「陰影邊線」合併 (Ctrl+E) 命名「陰影」。載入「輔助」選區，Ctrl+Shift+I 反選，刪除選區外多餘陰影，保留邊緣內側陰影帶。

精細邊框層

1. 新建圖層「邊線」。載入「輔助」選區，選框工具右鍵「描邊」：1px，內部，白色 #ffffff，不透明度 80%。模擬玻璃邊緣高光邊。

低反光與高反光層：磨砂玻璃靈魂

1. 新建圖層「低反光」。載入「輔助」選區。漸層工具：徑向，白色到透明。在左上角、右下角各拖一個小徑向漸層，模擬環境光在玻璃曲面的微弱反射。不透明度 30%。

2. 新建圖層「高反光」。載入「輔助」選區。橢圓選框工具按 Alt 減去選區，保留左上角月牙形選區。徑向漸層白到透明拖動，不透明度降至 15-20%，模擬強烈點光源反光高光。

至此登入框主體完成，刪除「輔助」圖層。

輸入框製作：同樣邏輯精簡版

1. 圓角矩形工具繪製輸入框形狀，命名「輔助2」，隱藏。

2. 新建「輸入框」圖層，載入選區，描邊：1px，內部，白色。添加「投影」：距離 1px，大小 3px，不透明度 20%。

3. 合併可見圖層為「輸入框」。載入「輔助2」選區，選取 > 修改 > 擴展 1px，Ctrl+Shift+I 反選刪除，精確裁切邊緣。
4. 新建「灰色填充」圖層，載入選區，羽化 15px，填充 #989898，反選刪除，形成內陰深度。複製組合成雙輸入框（帳號/密碼）。刪除輔助層。

頭像框製作：異形狀態下的同樣邏輯

1. 「輔助3」圖層繪製圓角矩形頂部接半圓的異形頭像框路徑，隱藏。

2. 「頭像框」圖層：載入選區，重複「低反光」（左上/右下徑向漸層）、「高反光」（橢圓減選區大反光）步驟。

3. 「頭像框邊線」：載入選區，描邊 1px 黑色內部；選取 > 修改 > 擴展 1px，描邊 1px 白色外部。形成內暗外亮的立體邊框。

4. 置入頭像照片，Ctrl+Alt+G 剪貼蒙版於頭像框內。完成！

核心方法論總結：輔助層-選區-描邊/漸層-混合模式-蒙版裁切

本教學所有元素均遵循統一邏輯：向量輔助層定義形狀 → 載入選區 → 新建效果層 → 描邊/漸層/濾鏡 → 混合模式疊加 → 蒙版/選區裁切多餘。這套「非破壞性向量驅動像素效果」工作流，確保隨時可通過修改輔助層路徑一鍵更新所有關聯效果，是專業 UI 設計的標準化生產範式。