設計理念與效果預覽

扁平化設計浪潮下，iOS 7 風格圖標以其乾淨的長投影、微妙的漸變與內陰影成為經典入門案例。本教學將引導你從零構建一枚日記本圖標，熟練者約 30 分鐘即可完成。

Part 1：地基建立——畫布與參考線系統

1.1 畫布設定

• 尺寸：1024 × 1024 px（符合 App Store 規範）
• 背景色：#fcf2da 暖米白

1.2 參考線網格配置

編輯 → 首選項 → 參考線、網格與切片 設定如下：

Part 2：圖標基礎形狀與長投影

2.1 基礎圓角方形

• 工具：圓角矩形工具（形狀模式）
• 尺寸：512 × 512 px，圓角半徑 120 px
• 填充色：#c47420 深橙褐，命名「icon base」

2.2 內陰影增加厚度感

2.3 長投影系統構建

• 新建矩形，填充黑色，尺寸約 718 × 733 px
• Ctrl+T 旋轉 45° 角度
• 圖層樣式 → 漸變疊加（參見下圖） → 不透明度 30%，填充 0%

Part 3：日記本主體構建

3.1 封面與內頁層次

• 圓角矩形：參考下圖參數建立封面
• 複製圖層 → A 直接選取工具 → 寬度減 16 px，高度改 432 px
• 再次複製 → 高度改 416 px，填充 #f3f3f3 淺灰（內頁）

3.2 內頁橫線細節

• 直線工具：粗細 2 px，填充黑色
• 圖層不透明度 20%

Part 4：鉛筆與橡皮擦圖元繪製

4.1 鉛筆筆身與裝飾

• 矩形：192 × 96 px，填充 #00da67 薄荷綠
• 兩條裝飾線：高度 32 px，黑色，不透明度 25% / 10%

4.2 筆尖與筆頭幾何構建

• 多邊形工具：邊數 3，縮進深度設定參考下圖 → 填充 #e39a4d 木色
• 筆尖：三角形 32 × 32 px，填充 #474f57 深灰 → 建立剪貼蒙版限制於筆頭範圍

4.3 橡皮擦組件

• 橡皮本體：圓角矩形 64 × 96 px，半徑 20 px，填充 #f78879 粉紅
• 金屬箍：矩形 32 × 96 px，填充 #d5d5d5
• 高光：圓角矩形 10 × 40 px，白色，不透明度 30%

4.4 鉛筆整體長投影

• 矩形 352 × 160 px，同基礎長投影方法：旋轉 + 漸變疊加

完成！ 圖層結構清晰、光影邏輯自洽，即可匯出各尺寸規格應用於專案中。