前言

無需 3D 軟件，純用 Photoshop「形狀圖層」、「圖層樣式（斜面浮雕/漸變疊加/投影/描邊）」、「矢量路徑操作」即可繪製出擁有體積感、材質感、光影邏輯自洽的卡通小屋插畫。本教學完整拆解 27 步驟，從屋頂、牆身、門、窗、煙囪到細節裝飾，展示矢量繪圖在 PS 中的專業級應用。適合插畫師、UI 設計師、圖標設計師提升矢量繪圖與層樣式技法。

畫布與工具設定

• 新建 500×500px、白色背景、RGB 模式文件。
• 主力工具：鋼筆工具 (P)、形狀工具 (U)、直接選擇工具 (A)、圖層樣式、路徑面板。
• 色值參考：屋頂 #830F00、牆身深色、門/窗/裝飾專屬色碼（見下文）。

27 步矢量建模流程

屋頂系統（步驟 1~6）

1. 屋頂左半邊：鋼筆工具繪製屋頂左側形狀 → 雙擊圖層開啟樣式：斜面浮雕（內部凹陷、深度 100%、大小 10px、柔化 0、角度 120°/30°、高光模式篩色 70%、陰影模式正片疊底 70%）+ 漸變疊加（線性、角度 90°、色標按圖設定深紅至亮紅過渡）+ 投影（距離 3px、大小 5px、不透明度 40%）。
2. 複製圖層 → 編輯→變換→水平翻轉 → 對接右半邊。
3. 修正右半邊樣式：漸變角度改 -90°（鏡像光源），投影距離改 -3px（向左投影），保持光源邏輯自洽（光源來自左上）。
4. 屋頂脊線（屋脊）：前景色 #830F00，鋼筆繪製三角形脊線形狀，命名「屋頂左」，樣式同屋頂左半邊。
5. 複製脊線 → 水平翻轉 → 移動對接 → 命名「屋頂右」。

牆身主體（步驟 7~8）

1. 背景層上新建圖層，鋼筆勾勒牆身輪廓（含門窗洞口預留），填充深色（如 #3D2B1F），命名「身體」。
2. 圖層樣式：斜面浮雕（外部浮雕、平滑、深度 80%、大小 8px）+ 漸變疊加（線性、垂直、深淺過渡模擬牆面受光）+ 投影（距離 5px、大小 8px）+ 描邊（1px、深色、內部）勾勒輪廓線。

屋頂投影（步驟 9~11）

1. Ctrl+點擊「屋頂左/右」縮圖載入選區 → Shift+Ctrl+點擊「屋頂右」疊加選區 → 新建圖層填充 #5F5343 → 向下移動選區形成投影位置。
2. 濾鏡→模糊→高斯模糊 10px。
3. Ctrl+點擊「身體」層載入選區 → Ctrl+Shift+I 反選 → 在投影層按 Delete 刪除超出牆身外的投影，確保投影僅落在牆面上。

門系統（步驟 12~20）

1. 門板：矩形選框工具拉選區 → 新層填黑 → 命名「門」 → 樣式：斜面浮雕（內部凹陷）+ 漸變疊加（木紋漸變：#8B4513→#D2691E→#8B4513）+ 投影 + 描邊（內部、深褐、2px）。
2. 門飾條：圓角矩形工具 (Shift+U) 半徑 3px，繪製 3 條橫向裝飾條 → 樣式：斜面浮雕（外部浮雕）+ 漸變疊加（金屬感：灰白灰）+ 描邊（1px 深灰）。
3. 複製裝飾條向下排列。
4. 門把手：橢圓工具繪小圓 → 樣式：投影 + 徑向漸變（中心亮、邊緣暗，模擬金屬球體）。
5. 門頂裝飾板：鋼筆繪製頂部裝飾形狀 → 樣式：漸變疊加（類屋頂漸變）。
6. 門上方裝飾：鋼筆繪製山形裝飾 → 完整樣式（斜面+漸變+投影+描邊）。
7. 門楣/門框：新層填黑選區置於門層下方 → 漸變疊加（金屬/木質漸變）。
8. 門台階：鋼筆繪製台階形狀 → 完整樣式（斜面+漸變+投影）。

窗戶與煙囪（步驟 21~27，節選）

• 窗戶：矩形/圓角矩形/橢圓形組合 → 玻璃漸變疊加（藍白透明感）+ 窗框斜面浮雕 + 窗台投影。
• 煙囪：鋼筆繪製圓柱體形狀 → 斜面浮雕（圓柱體感）+ 漸變疊加（磚紋/顏色帶）+ 頂部煙圈（橢圓形狀層疊加、篩色模式、動態模糊）。
• 前景草地/花朵/籬笆：筆刷/形狀工具快速點綴。

核心技術深度總結

1. 形狀圖層 vs 像素圖層：矢量優勢

• 無限縮放不失真，適合多尺寸輸出（圖標/插畫/印刷）。
• 屬性面板即時修改填充/描邊/路徑操作（布爾運算：合併/減前/相交/排除）。
• 圖層樣式即時預覽、非破壞、可複製貼上至其他形狀層。

2. 圖層樣式「物理材質模擬」參數對照表

材質	斜面浮雕	漸變疊加	投影/描邊
木材	外部浮雕/平滑/深度 80%/大小 8px	線性/垂直/木色多色標	投影距離 3-5px/描邊內部 1px 深色
金屬	內部凹陷/鑿刻清晰/深度 150%/大小 5px	線性/角度變化/灰白灰多色標(金屬反光)	投影距離 2px/描邊內部 1px 深灰
磚石/牆面	外部浮雕/平滑/深度 60%/大小 10px	線性/垂直/深淺灰褐過渡	投影距離 5px/大小 8px
玻璃	內部凹陷/平滑/深度 30%/大小 3px	線性/垂直/藍白透明色標(不透明度 20%)	無投影/描邊 1px 半透明白

3. 光源一致性鐵律

全圖單一主光源（本教學設為左上 120°/30°）。所有樣式「角度」鎖定 120°、「使用全域光」勾選。屋頂左右脊線漸變角度互為鏡像（90°/-90°），投影方向對應光源對面。任何破壞光源一致性的操作都會瞬間暴露「偽 3D」感。

4. 投影「落地邏輯」實現

「載入投射物選區 → 填充投影色 → 模糊 → 載入承接面選區 → 反選 → 刪除超出部分」——此流程確保投影只落在承接物體表面，不懸浮、不穿模，是 2D 模擬 3D 投影的標準動作。

效率提升工具包

• 樣式預設：將常用材質樣式存為「樣式預設」（樣式面板右上角菜單 → 新建樣式），一鍵套用。
• 動作錄製：將「建立形狀 → 套用樣式 → 命名 → 分組」錄製為動作，指派功能鍵。
• CC Libraries：將形狀、顏色主題、樣式存入雲端庫，跨設備/跨文件複用。

小結

這不僅是「畫小屋教程」，更是「PS 矢量繪圖 + 層樣式材質系統 + 光影邏輯自洽」的完整方法論演練。27 步看似繁瑣，實則每步都是標準化模組：形狀 → 樣式 → 位置關係 → 光影驗證。掌握此方法論，你可以繪製：等距建築插畫、遊戲 UI 圖標、產品爆炸視圖、資訊圖表 3D 圖示、品牌吉祥物三視圖……所有「需要體積感、材質感、可縮放」的矢量視覺輸出。建議：以此教程為藍本，自行設計一棟「屬於你風格的小屋」（現代/賽博/蒸汽朋克/水墨/低多邊形），完成從「跟著做」到「自己設計」的躍遷！