筆記本圖標是 UI 設計中極具代表性的拟物化元素，其挑戰在於在有限畫布內表現紙張纖維、封面材質、裝訂細節與翻頁立體感。本教程將拆解一枚精致筆記本圖標的完整創作過程，涵蓋從矢量骨架搭建到微觀質感渲染的專業工作流。

效果預覽

最終成品呈現一本仿皮封面、邊緣磨砂、內頁紙張質感清晰可見的立體筆記本，適配 iOS/macOS 圖標規範：

知識架構

階段	核心工具/技術	產出目標
結構建模	圓角矩形、鋼筆工具、路徑運算	精確的幾何骨架與透視關係
材質基礎	圖層樣式（斜面浮雕、漸變疊加、圖案疊加）	封面皮紋、紙張基調、邊緣倒角
微觀細節	雜色/纖維濾鏡、筆刷手繪、蒙版控制	紙張纖維、封面毛孔、裝訂針孔、翻頁陰影
光影統一	調整圖層（曲線、色階）、高光/陰影手繪	符合物理規律的整體立體感

關鍵步驟解析

1. 幾何骨架與透視建立

新建 1024×1024 px 畫布。使用「圓角矩形工具」（半徑 12 px）繪製主體，複製兩層分別作為「封面」與「底蓋」。對頂層封面執行 Ctrl+T → 右鍵「扭曲」，向內收窄上邊緣 3-5%，製造微透視感。用「鋼筆工具」在左側繪製裝訂邊緣曲線，與矩形路徑布爾運算合併。

2. 封面仿皮材質系統

為封面圖層添加組合樣式：

• 斜面浮雕：風格「外部斜面」，深度 80%，大小 3 px，光源 120°/30°，高光「線性減淡」15%，陰影「線性加深」20%
• 圖案疊加：載入「皮紋」圖案（或自製：50% 灰填充 → 濾鏡 → 雜色 → 添加雜色 15% → 濾鏡 → 模糊 → 動感模糊 角度 90° 距離 10 px → 定義圖案），混合模式「柔光」，不透明度 35%，縮放 50%
• 漸變疊加：徑向漸變，中心亮（封面主色 +20 亮度）邊緣暗（主色 -30 亮度），混合模式「疊加」，不透明度 25%
• 內陰影：距離 2 px，大小 4 px，模擬封面邊緣內凹

3. 內頁紙張質感與層疊

1. 在封面與底蓋之間建立「內頁」圖層組
2. 矩形工具繪製略小於封面的矩形，填充 #fafafa，添加「斜面浮雕」（內部斜面，大小 1 px，柔化 0）模擬紙張薄度
3. 複製 8-12 層，每層向下偏移 1-2 px，不透明度遞減 5%，形成頁碼厚度
4. 最頂頁面添加「圖案疊加」：自製紙張纖維圖案（新建文檔 100×100 px → 濾鏡 → 渲染 → 纖維 差異 16、強度 4 → 定義圖案），混合模式「正片疊底」，不透明度 8%
5. 頁面邊緣：新建圖層，1 px 硬邊筆刷 #e0e0e0 繪製右側與底部邊緣高光；#c0c0c0 繪製左側與頂部陰影

4. 裝訂細節與翻頁效果

裝訂線：左側邊緣新建圖層，2 px 圓頭筆刷 #888 繪製虛線；上方疊加 1 px #fff 高光線。
翻頁角：右上角用鋼筆勾勒三角翻頁形狀，填充頁面顏色，添加「斜面浮雕」（大小 5 px）與「投影」（距離 3 px，大小 5 px），並在翻頁背面添加漸變陰影（線性漸變 #000 透明度 30%→0%）。

5. 全局光影統一與輸出

建立頂層調整組：
• 曲線 微調對比（S 型曲線提升立體感）
• 色彩平衡 高光添加暖調（+5 紅/-3 藍）
• 手繪大範圍環境光：新建圖層「環境光」，柔邊筆刷 50 px，#fff 不透明度 8% 掃過頂部；#000 不透明度 5% 掃過底部
• 最終輸出：檔案 → 匯出 → 另存為 Web 格式，PNG-24，勾選透明背景，輸出 @1x/@2x/@3x 三種尺寸

常見問題與優化建議

• 頁面層數過多導致卡頓：將內頁組轉為智能對象，或僅保留頂部 3-4 頁詳細渲染，其下用單層漸變模擬厚度
• 皮紋過於明顯破壞小尺寸識別度：圖案疊加縮放改為 25-30%，不透明度降至 20%
• 翻頁角透視不自然：參考實物照片，翻頁斜邊應與封面對角線平行，厚度約為封面厚度 1.5 倍
• 色彩管理：全流程工作在 sRGB IEC61966-2.1，導出前指派配置檔確保跨平台色彩一致

延伸練習方向

• 嘗試不同封面材質：麻布、帆布、金屬拉絲、軟殼 PU
• 設計「打開狀態」筆記本：增加內頁展開、書簽帶、彈性帶等細節
• 結合 After Effects 製作圖標微動效（翻頁、彈性帶彈動）
• 適配 Apple Human Interface Guidelines 的圖標網格系統

精致圖標的核心在於「克制的細節」——每一個高光、每一道紋理都服務於材質真實感與視覺層級，而非堆砌特效。建議收集 20+ 張實物筆記本微距照片建立參考庫，觀察不同光照下紙張透光度、封面反射特性與邊緣磨損痕跡，將觀察內化為筆下語言。