UI设计入门：使用PS绘制拟物化风格的APP图标，掌握图层样式的高级运用

作者：甜姐姐｜面向：PS初学者/设计爱好者｜目标：用“图层样式”做出有质感的拟物化图标

哈喽，我是甜姐姐。今天咱们来搞一个看起来“贼专业”、但其实很适合新手上手的东西——拟物化风格APP图标。

很多人以为“高级感”=疯狂加特效，结果越加越像没睡醒：灰、糊、脏、乱。甜姐姐先把本质说清楚：高级感的拟物化=光影有逻辑 + 材质有层次 + 细节很克制。就像化妆一样，重点是“提气色”，不是把高光打满全脸。

今天我们要做什么？

• 用一个圆角方形做底（常见图标底板）
• 用图层样式堆出“厚度、反光、阴影、材质”
• 再加一个简单符号（比如白色小图形）让图标完整

一、开工前的“地基”：画布与形状（越基础越关键）

先别急着上滤镜，地基歪了，后面再努力都是白给。

1）新建画布

• 文件 > 新建
  
  ：尺寸建议 1024×1024 px（做图标够用）
• 分辨率：72 ppi（屏幕用）
• 背景：白色或浅灰都行

小技巧：按住Ctrl+R打开标尺，拖出参考线，让图标居中更舒服。

2）画一个圆角方形做底板

• 选圆角矩形工具（快捷键 U）
• 在顶部属性栏把圆角设置为：160 px（你也可以按感觉，圆一点更“可爱”）
• 填充先给个中间色，比如蓝灰：#3B6FA5
• 对齐：用移动工具 V，顶部点居中对齐

常见误区：用像素选区填色做底板。新手很容易锯齿、改尺寸就糊。咱们用形状图层，它是矢量的，怎么缩都清晰。

二、拟物化的灵魂：用图层样式堆“厚度”和“光”

拟物化为什么耐看？因为它像现实物体：有边缘、有厚度、有光照方向。PS里最省事的就是：双击图层打开图层样式（或者点图层面板下面的 fx）。

1）先做“厚度”：内阴影 + 斜面与浮雕

目标：让底板像一块有厚度的糖果按钮，而不是一张平面色卡。

操作步骤（底板图层双击 > 图层样式）：

• 内阴影
  
  ：
• 混合模式：正片叠底
• 不透明度：20%~35%
• 角度：120°（先统一光从左上来）
• 距离：10，大小：25~40
• 斜面与浮雕
  
  （重点）：
• 样式：内斜面
• 方法：平滑
• 深度：80%~140%
• 大小：18~35（越大越“软糖”）
• 高光模式：滤色 不透明度 40%~70%
• 阴影模式：正片叠底 不透明度 20%~45%

你会发现图标瞬间“立起来了”。这一步就像给脸打“鼻影+高光”，方向对了，人就精神。

2）做“环境感”：投影要软，不要死黑

新手最容易把投影做成“贴图式黑边”，像P上去的。真实世界里，影子越远越虚，越近越实，这是常识对吧？

操作步骤（仍在图层样式里加“投影”）：

• 混合模式：正片叠底
• 颜色：深蓝灰或深灰（别纯黑）
• 不透明度：15%~30%
• 角度：120°
• 距离：18
• 扩展：0~5
• 大小：35~60

甜姐姐提示：如果你觉得“怎么不明显”，先别加重不透明度，优先调大小，让影子像棉花糖一样散开，会更高级。

三、拟物化“高级细节”：高光、纹理、微反差（点到为止）

1）加一条“高光反射”（最值回票价的细节）

目的：模拟屏幕/玻璃表面反光。就像给糖果壳子抹了一层亮油。

• 复制底板形状
  
  ：选中底板图层，按 Ctrl+J
• 把复制层填充改成白色（或浅蓝白）
• 按 Ctrl+T 自由变换：把它整体缩小一点，并往上挪
• 给它加图层蒙版，用柔边画笔（B，硬度0%）把下半部分“擦掉”，只保留上方一段高光
• 该层不透明度：10%~25%

别踩坑：高光别做成一整块白色盖住，容易“塑料感爆棚”。高光应该像“呼吸一样”轻轻的。

2）加一点“微纹理”（让它不那么像纯渐变）

纯色+光影有时会显得太“干净”，像渲染失败。我们加一点点噪点，就像皮肤有细小纹理一样，更真实。

• 新建图层：Ctrl+Shift+N
• 填充50%灰：编辑 > 填充 选择 50%灰色
• 滤镜：滤镜 > 杂色 > 添加杂色，数量 3%~6%，勾选“高斯分布”“单色”
• 混合模式改成：柔光 或 叠加
• 不透明度：8%~15%
• 只影响底板：右键该噪点层创建剪贴蒙版（或 Alt 点击两层之间）

四、配色与符号：让图标“像一个APP”而不是一块砖

底板做完了，我们加一个简单符号（比如“聊天气泡/音乐/相机”随便你）。原则：形状干净，颜色克制。

1）画符号（用形状/钢笔都行）

• 用自定义形状工具或钢笔工具（P）画一个简化图形
• 填充建议：#FFFFFF 或略带暖色白（更柔和）
• 给符号加一点点图层样式：投影 不透明度 10%~20%，大小 10~25

配色小抄：底板别太花，优先用“主色+明暗”。如果想更高级，可以让底板从上亮下暗（轻微渐变），符号用干净的白来拉对比。

五、最后的“质检”：三步检查高级感

• 光源统一
  
  ：投影角度、高光方向是否都从左上来？别一个往左一个往右，会像精神分裂。
• 对比不过火
  
  ：阴影别黑死，高光别白爆。建议整体不透明度宁可低一点。
• 边缘干净
  
  ：放大到200%看看，有没有脏边、锯齿、蒙版不顺。

结尾：拟物化高级感的关键，就俩字——克制

今天这套做法，核心不是“会多少效果”，而是你能不能把光影逻辑做对、把层次堆出来，然后收手。

甜姐姐送你一句：图层样式就像调味料，撒一点是提鲜，倒一瓶就是黑暗料理。

如果你想继续进阶，下一步可以练：用渐变叠加做更真实的材质（比如金属/玻璃）、用智能对象做可复用的图标模板。咱们下次再一起拽橡皮泥一样把质感捏出来。