圖標設計看似簡單，實則考驗設計師對材質、光影、透視的微觀把控。一個優秀的購物袋圖標，不僅要輪廓識別度高，更要在極小尺寸下傳遞紙質厚度、折痕硬度、手提繩張力等觸覺細節。本教程將帶你從基礎形構構建到材質光影渲染，完整複刻一枚商業級購物袋圖標。

最終效果展示

設計思路拆解

購物袋圖標可拆解為五大幾何體：

1. 袋體主體：倒梯形長方體，頂部敞口，底部有折疊結構；
2. 側面折痕：兩側各一道向內凹陷的豎向折線，體現紙袋扁平收納特性；
3. 手提繩：頂部兩側各一個半圓環，材質為扭繩或扁繩，有明顯壓痕；
4. 品牌區：正面中央矩形區域，承載Logo或圖案，通常有微微凹陷的印刷質感；
5. 底部支撐：隱藏在袋內的硬紙板，僅在透視下露出邊緣線。

繪製步驟實錄

階段一：矢量骨架構建（形狀圖層）

1. 新建1024×1024px畫布，背景透明；
2. 用圓角矩形工具繪製袋體主形狀，圓角半徑約8-10px（頂部邊緣），路徑操作中選「合併形狀」；
3. 鋼筆工具添加側面折痕路徑：在袋體左右兩側各畫一條向內彎曲的貝塞爾曲線，作為後續陰影/高光的蒙版依據；
4. 橢圓工具繪製手提繩：兩個同心圓構成環狀，上邊緣與袋口對齊，路徑操作選「減去頂層」挖空內環；
5. 矩形工具畫出品牌區與底部支撐線，全部保持為形狀圖層，便於後期非破壞修改。

階段二：材質渲染（圖層樣式+剪貼蒙版）

為每個形狀圖層單獨設置樣式，關鍵參數如下：

袋體主體（牛皮紙質感）

• 顏色疊加：#D4B896（典型牛皮紙基調）；
• 漸變疊加：線性，角度90°，不透明度15%，從#E8D8C4到#B89878，模擬頂部受光、底部陰影；
• 圖案疊加：載入「紙張紋理」圖案（自製或下載無縫紙紋），混合模式「柔光」，不透明度8%，比例50%；
• 倒角浮雕：風格「外部斜角」，深度30%，大小3px，軟化2px，光源角度135°，高光「線性減淡」20%，陰影「正片疊底」40%。

側面折痕（凹陷效果）

在袋體圖層上新建剪貼蒙版圖層，用深色（#A08060）硬邊筆刷沿折痕路徑描邊，再用高斯模糊（1-2px）柔化；上方再疊一層亮色（#E8D8C4）高光線，模擬折痕邊緣的受光棱線。

手提繩（扭繩質感）

• 基礎色：#8B6B4A；
• 倒角浮雕：風格「內部斜角」，大小5px，深度200%，光澤輪廓「環形-雙峰」，模擬繩索扭紋；
• 投影：距離3px，大小6px，正片疊底40%，投射在袋體上。

品牌區（印刷質感）

填充品牌色，添加「圖案疊加」→「噪點」圖案，模式「正片疊底」，不透明度5%，模擬油墨網點；內陰影模擬凹印感。

階段三：全局光影統一與細節微調

1. 新建「曲線」調整圖層置頂，略微提亮高光（輸出245），壓暗陰影（輸入15），增強對比度；
2. 新建圖層，模式「疊加」，50%灰填充，用燃燒/躲避工具（曝光度10%）局部強化折痕陰影、繩索高光、袋口厚度；
3. 為手提繩添加接觸陰影：新建圖層置於繩索下方，橢圓選區填黑，高斯模糊8px，不透明度20%，變換縮扁為橢圓投影；
4. 檢查16px、32px、64px縮放下的識別度，必要時簡化細節（如移除品牌區網點）。

圖標集擴展建議

• 狀態變體：空袋/滿袋（袋體鼓脹）、懸掛/放置（繩索受力形態不同）；
• 材質變體：白卡紙（高光更強）、無紡布（織紋圖案）、塑料袋（高光鋒利、透光）；
• 風格延展：扁平化風格（去倒角、純色填充）、線性風格（描邊2px、無填充）、等距視角（30°等軸測）。

輸出規範

• 原始文件保留PSD，圖層命名規範（體/繩/標/影/光），組別清晰；
• 導出：SVG（矢量版）、PNG@1x/2x/3x、ICO（Windows）、ICNS（macOS）；
• 命名規則：`icon_shopping-bag_default_512.png`、`icon_shopping-bag_filled_256.svg`等。

完成這枚圖標後，你將擁有一套可復用的「紙質容器類圖標」設計方法論——從結構拆解、材質建模、光影邏輯到多尺寸適配，同樣適用於禮盒、快遞箱、紙杯等圖標設計。記得交作業哦！