教學簡介

本教學示範如何用圖層樣式與向量形狀快速繪製擁有經典紅白藍斜向條紋邊框的信封郵件圖標。核心技法：圖層樣式「描邊」+「圖案疊加」構建條紋，配合形狀工具建立信封主體與蓋頁。

最終效果預覽

製作步驟解析

步驟 1：建立紅白藍條紋圖案

1. 新建 20×20 px 透明背景文件。
2. 矩形選框工具按住 Shift 畫正方形選區，填充紅色 #FF0000。
3. Ctrl+J 複製圖層，移至右側相鄰，填白 #FFFFFF。
4. 再複製移至右側，填藍 #0000FF。
5. 再複製移至右側，填白。共 4 條等寬條紋（紅白藍白）。
6. 選取全部 4 條條紋圖層 → Ctrl+E 合併 → Ctrl+A 全選 → 編輯 → 定義圖案 → 命名「郵件紅白藍條紋」。

步驟 2：繪製信封主體形狀

1. 新建目標尺寸文件（如 500×500 px）。
2. 圓角矩形工具（半徑 8-12px）繪製主體矩形，填充淺灰/紙張色 #F5F0E8。
3. 鋼筆工具繪製信封蓋頁三角形（或用多邊形工具 3 邊），置於主體上方，同樣填充紙張色。
4. 兩形狀圖層合併為「信封主體」智慧物件（右鍵 → 轉換為智慧物件），便於後續統一添加樣式。

步驟 3：套用條紋描邊與質感

1. 雙擊「信封主體」智慧物件圖層 → 圖層樣式 → 描邊：
   • 大小：4-6px（視圖標大小）。
   • 位置：外部。
   • 填充類型：圖案 → 選擇剛定義的「郵件紅白藍條紋」。
   • 勾選「與圖層連結」取消，可獨立移動圖案位置微調對齊。
   • 角度：45°（或 -45°）使條紋呈斜向。
2. 同一圖層樣式添加 斜面與浮雕（內斜面、平滑、深度 50%、大小 3px、柔化 0、光澤輪廓環形）→ 賦予邊框立體厚度。
3. 添加 投影（距離 3px、大小 5px、不透明度 30%）提升懸浮感。
4. 主體內部可添加 圖案疊加（紙張紋理圖案、模式柔光、不透明度 10%）增加紙質感。

步驟 4：細節裝飾（郵票、郵戳、收件資訊）

• 郵票：小圓角矩形 + 圖案疊加（齒狀邊框圖案）+ 圖片填充（剪貼蒙版）。
• 郵戳：圓形形狀 + 文字繞路徑 + 紅色墨水質感（濾鏡 → 筆觸 → 噴灑）。
• 收件資訊：手寫風格字體，圖層樣式內陰影/斜面浮雕模擬壓印效果。

延伸應用

• UI 圖標集：同套條紋圖案應用於資料夾、文件、郵箱、發送等圖標，保持視覺系統一致性。
• 動畫圖標：時間軸為「描邊 → 圖案疊加 → 位移」添加關鍵幀，條紋流動 → 輸出 Lottie/APNG/GIF。
• 印刷品：CMYK 模式、300dpi、出血 3mm，條紋圖案需確保印刷網點不糊（線條寬 ≥ 0.2mm）。

核心知識點總結

1. 自訂圖案 + 描邊填充類型 = 任意形狀邊框條紋化，極度靈活。
2. 智慧物件封裝主體形狀 = 樣式與形狀解耦，修改形狀不破壞樣式。
3. 斜面與浮雕 + 投影 = 扁平圖標賦予觸覺質感的關鍵。