教程概覽

本教程示範如何純用 Photoshop 矢量形狀、圖層樣式、剪貼蒙版、畫筆塗抹，繪制一把擁有真實布面紋理、骨架結構、頂部金屬飾件、手柄木紋、地面投影的精致小紅傘。全流程非破壞編輯，適合 UI 圖標、插畫元素、天氣應用圖標設計。核心技法：橢圓布爾運算造傘面弧邊、剪貼蒙版限域塗抹明暗、路徑描邊畫骨架、形狀疊加構建頂飾與手柄。

一、傘面主體：弧邊矢量與布面光影

步驟 1：新建文件與基礎紅圓

Ctrl+N 1024×1024 px、72 dpi、RGB、背景深灰 #333333。新建圖層「傘面底」，橢圓工具（U）按 Alt+Shift 拉正圓（直徑 600 px），填充鮮紅 #e60012。

步驟 2：布爾運算製作傘骨弧邊

新建圖層「弧邊切割」。橢圓選框工具拉橢圓選區（寬 600px、高 200px），填白。取消選區，移動至紅圓邊緣對齊。Ctrl+J 複製，Ctrl+T 變換：參考點移至紅圓中心，旋轉 36°（360°/10 骨）。按 Ctrl+Alt+Shift+T 重複 9 次，得 10 個旋轉複製橢圓。合併這 10 層（Ctrl+E），Ctrl+點擊 載入選區，回到「傘面底」圖層按 Delete 刪除，得到 10 瓣弧邊傘面。

圖 1：弧邊切割與傘面成型

步驟 3：剪貼蒙版塗抹布面明暗

新建圖層「傘面明暗」，Ctrl+Alt+G 剪貼至「傘面底」。軟邊畫筆（300 px、不透明度 15%~30%），前景色白/黑，依光源（左上）邏輯：左上傘面減淡（受光）、右下傘面加深（背光）、骨架投影位置加深。筆觸順傘骨放射方向，模擬布料織紋走向。

圖 2：傘面明暗塗抹

二、傘骨架：路徑描邊與明暗排列

步驟 4：骨架線條繪制

新建圖層組「骨架」。鋼筆工具從傘頂中心向 10 個弧邊尖點各拉一條貝茲曲線（模擬骨架彎曲受力）。路徑面板右鍵「描邊路徑」，畫筆 2px 硬圓，前景色根據位置決定：受光面骨架 #ffcccc（淡粉）、背光面 #8b0000（深紅）。描邊後調整各骨架圖層不透明度/模式融合。

圖 3：骨架路徑與明暗排列

三、頂部飾件與骨架外緣：金屬質感點綴

步驟 5：頂部金屬蓋與骨架頂端

新建組「頂飾」。橢圓工具拉小正圓（40 px）作頂蓋，斜面與浮雕（外凸、大小 5px）+ 漸變疊加（金屬金環狀）+ 投影。骨架頂端各加一個小圓柱（橢圓+斜面浮雕），排列成圈。

圖 4：頂部飾件製作

步驟 6：骨架左右側高光暗部細化

在「骨架」組內，為每根骨架新建剪貼蒙版圖層，軟筆（10 px、10%）順骨向繪製：受光側高光（白/淡粉）、背光側投影（深紅/黑），增強骨架圓柱體積感。

圖 5-7：骨架側面高光暗部細化

四、手柄與地面投影：完成實體感

步驟 7：手柄製作（簡述）

鋼筆勾勒手柄輪廓（彎曲圓柱），填木色 #8b5a2b。圖層樣式：斜面與浮雕（外凸、大小 8px、木紋圖案疊加）+ 內陰影（彎曲內側）+ 投影。手柄末端加金屬帽（同頂蓋樣式）。

步驟 8：地面投影

新建圖層「投影」置底。橢圓選區（扁平、寬略大於傘面），填黑，高斯模糊 20px，不透明度 30%，Ctrl+T 透視變換貼地。再添加一層微弱環境反光（白、柔光 10%）在投影邊緣。

步驟 9：最終調整與導出

檢查光源一致性（所有高光左上、投影右下）、材質層次（布面柔、骨架硬、金屬亮、木紋粗）。合併可見圖層銳化，導出多規格 PNG/SVG（矢量版）。

最終效果：精致小紅傘，質感豐富

矢量圖標設計原則回顧

1. 形狀優先：盡可能用矢量形狀/路徑構建，保證無限縮放不失真。
2. 樣式疊加：材質、光影、邊緣全部靠圖層樣式非破壞實現，參數即設計稿。
3. 剪貼蒙版限域：塗抹、紋理、明暗全部剪貼至基礎形狀，不越界、易修改。
4. 組件化管理：傘面、骨架、頂飾、手柄、投影分組，單組件可復用、可替換。
5. 光源一致性：全圖單一光源（或主光+環境光），所有高光/投影/環境光嚴格遵循。