既非纯扁平，又非重拟物——切面风以「多面体折射光影」为核心视觉隐喻，兼具几何秩序感与材质真实感，近年在 App 图标、品牌识别、数据可视化图标中高频出现。本教学拆解「多边形构建 → 面法线光影 → 环境反射 → 通用模板化」全流程。

切面风图标：几何切面折射光影，宝石般通透质感

核心设计原理

低多边形几何体

将图标主体抽象为 8~20 个三角形/四边形面片，保留关键轮廓特征（如相机的镜头圆、云朵的卷曲角）。

面法线决定明暗

每个面片根据其法线与光源夹角，获得唯一亮度值。同一朝向面片共享亮度，形成硬锋利的明暗分界——这是切面风「非平滑」的本质。

环境反射映射

为避免「塑料感」，需在高光面片叠加环境反射（天空蓝/地面绿/暖光橙），模拟玻璃/宝石折射周围环境。

边缘高光/暗部线条

相邻面片亮度差 > 30% 时，在交界处添加 1~2 px 高光线或暗部线，强化棱角立体感。

制作流程：以「相机图标」为例

1. 矢量线框拓扑

新建 512×512 px 画布。参考实物照片，用钢笔工具（形状模式）勾勒相机主体外轮廓。再在内部手动添加三角形面片路径，遵循：
- 面片数量 12~18 个
- 关键特征(镜头、闪光灯、握柄)各自成面片组
- 避免过度细碎面片（< 20 px² 导出后会糊）

将所有面片路径合并为一个形状图层（Ctrl+E），命名「Gem_Base」。

2. 面片分离与基础着色

1. 路径选择工具 (A) 逐个选中面片路径，Ctrl+J 复制到新形状图层，重命名如 `Facet_01_Top`、`Facet_07_Lens`。
2. 按「朝向组」批量填充基础色：
   顶向面：#E8F4FF (高亮蓝白)
   侧向面：#3A7BC8 (主色调蓝)
   底向面：#1A3A5C (深影蓝)
   镜头面：#0D1A2E (近黑)

3. 光影计算自动化（脚本/动作）

手动逐面调亮度极其繁琐。推荐两种半自动方案：

• 动作录制：录制「选中图层 → 图层样式 → 颜色叠加 → 亮度偏移 +10%」动作，配合 F2 等功能键，选中面片按键即可批量微调。
• JSX 脚本：遍历所有形状图层，读取路径法线（需导出 SVG 解析或手工录入法线表），按兰伯特余弦定律自动计算亮度并写入「颜色叠加」。脚本模板可在 GitHub 搜索 `photoshop facet shading script` 获取。

4. 环境反射与边缘强化

• 新建图层组「Reflections」，剪贴至「Gem_Base」群组。
• 用大尺寸柔边画笔（不透明度 5%~10%），在朝天面片刷入天空蓝 #88CCFF，朝地面片刷入暖灰 #A0A080，侧向面片刷入主色调高饱和变体。
• 新建图层「Edges」，1 px 硬边画笔，沿面片交界线手绘高光线(白/高亮色)与暗部线(深影色)。或用「滤镜 → 风格化 → 查找边缘」提取线稿后手动筛选。

5. 通用模板化：建立「切面风图标生产线」

1. 将上述层级结构（Base群组 + Facets群组 + Reflections群组 + Edges群组）保存为 `.psdt` 模板文件。
2. 新建图标时：文件 → 新建 → 选择模板 → 替换「Base」形状路径 → 运行「光影计算动作/脚本」→ 微调反射与边缘 → 导出多规格。
3. 配合「生成图像资产」命名图层 `icon_camera@2x.png, icon_camera@3x.png`，保存即同步输出。

避坑指南

问题	原因	对策
小尺寸(≤64px)面片模糊不清	面片过多/过小，像素网格对齐失败	面片数≤12，最小面积≥30px²，开启「将矢量工具与像素网格对齐」
质感偏「塑料」非「宝石」	缺环境反射、高光过软	强制添加反射层、边缘硬高光、全局光设90°
修改主体形状需重做所有面片	未用智能对象/模板	Base形状转智能对象，面片由脚本按拓扑自动生成

切面风本质是「可控的低多边形渲染」。掌握「拓扑→法线→着色→反射」管线，即可从单枚图标扩展至全套图标系统、甚至 3D 打印/Three.js 网页交互的统一视觉资产。

更多精彩教程请关注三联 Photoshop 教程栏目，三联 PS 群：339853166 欢迎加入。